AJAX(async JavaScript and XML)
request 请求
response 响应
优点:
1.节省用户操作时间,提高用户体验,减少数据请求
2.传输获取数据
完整AJAX基础过程
步骤:
1.创建ajax对象
2.调用open( )方法,启动发送请求
3.调用send( )方法,发送请求
4.等待服务器,返回内容
var xhr;
if (window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
// IE7+, Firefox, Chrome, Opera, Safari
}
else {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
// IE6, IE5
}
等待服务器返回内容
存有XMLHttpRequest的状态,从0~4
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成,且相应已就绪
function ajax(obj){
//创建ajax对象
var xhr
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest()
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP")
}
//打开请求
xhr.open(obj.type,obj.url,obj.async)
//判断请求方式get/post,发送数据
if(obj.type.toLowerCase()=="get"){
xhr.send()
}else if(obj.type.toLowerCase()=="post"){
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhr.send(toUrl(obj.data))//name=1&name2=2
}
//操作返回的数据
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
//对responseText进行json转化
var data=JSON.parse(xhr.responseText)
//把转化好的数据当做参数返回给obj.success函数
obj.success(data)
}
}
//对obj.data进行转化,把对象转化成url形式
function toUrl(obj){
var arr=[]
for(var i in obj){
arr.push(i+"="+obj[i])
}
return arr.join("&")
}
}