AJAX(Asynchronous Javascript and XML)异步的javascript和XML
首先,它不是一种编程语言,是可以在不加载整个页面的情况下局部更新的一种技术
核心是XMLHttpRequest
通过XMLHttpRequest和web浏览器进行数据的交互和异步,然后通过javascript操作dom,实现动态的局部刷新
1、创建一个XMLHttpRequest对象
var request;
//做兼容型处理,主要处理ie6以下
if(window.XMLHttpRequest){
request=new XMLHttpRequest()
}
else{
request=new ActiveObject(“Microsoft XMLHTTP”)
}
2、XMLHttpRequest发送请求
请求的方式有两种:GET POST
前者可以用来查询,后者可以用来修改添加数据到后台等
open(method,url,async)发送请求的方法,请求的地址,异步
send(String)
3、XMLHttpRequest获取响应
(1)reponseText 获得响应的数据
(2)status 获取http状态码
常见的状态码
1** 接收到请求,正在处理
2** 代表成功
3** 重定向
4** 客户端出现错误
5** 服务器端出现错误
(3)readyState
0:表示请求初始化
1:服务器建立连接
2:请求已经接受
3:正在处理中
4:响应完成
4、页面监听
request.onreadyStatechange=function(){
if(request.readyState=4&&request.status=200){
//做你想做的事情
}
}
5、客户端的实现
通过javascript操作dom,实现动态的局部刷新
采用jquery实现
//GET请求
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type:"GET",
url:"sever.php?number="+$("#input").val(),
dataType:"json",
success:function(data){
if(data.success){
//做你想做的事情
$("#add1").html(data.msg)
}
else{
$("#add1").html("出现错误"+data.msg)
}
},
error:function(jqXHR){alert("出现错误"+jqXHR.status)}
})
})
})
//post请求
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type:"POST",
url:"sever.php",
dataType:"json",
data:{
//以键值对的方式写上你要向服务器传输的参数的值
name:$("input1").val(),
age:$("input2").val(),
class:$("input3").val()
},
success:function(data){
if(data.success){
//做你想做的事情
$("#add1").html(data.msg)
}
else{
$("#add1").html("出现错误"+data.msg)
}
},
error:function(jqXHR){alert("出现错误"+jqXHR.status)}
})
})
})
json是一种数据格式,与js有着相似的书写格式
例如:
{
“name”:“zhangsan”,
“age”:18;
‘hasgrilfriend":false;
“hascar”:null
}
将对象转为json格式:JSON.stringify(obj)
将json转为对象格式:JSON.parse(JSON.stringify(obj))//小提示,这种方法可以实现对象的深拷贝
转载:https://blog.csdn.net/li1484155613/article/details/101473760