AJAX

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("&")
            }
        }

你可能感兴趣的:(AJAX)