在这个重视用户体验的时代，AJAX已经成为开发必不可少的部分。无论网站大小，用途，领域几乎都用到了 AJAX。所以详细整理一下ajax的相关用法，原理，以及技巧。

-------------------------------我是分割线-------------------------

一、首先ajax是什么

用过的人肯定理解，为了不刷新网页而与服务器交互数据，也就是异步交互数据。这是非常有用的，假设每次页面有需要更新的地方，我们都要去重新加载整个页面（伴随的是网页等待加载的状态）万一网络此时断了，这是非常不愉快的。为了用户的体验，我们选择不让用户察觉的情况下，偷偷的加载（用户发现的时候内容已经改变了），这是值得称赞的。

二、底层原理

作为一个合格的开发人员，我们不能知其然，还要知其所以然。

ajax实际是通过XMLHttpRequest向服务器发送请求，从服务器接收数据，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

了解一下XMLHttpRequest这个对象的属性和方法：

属性	说明
readyState	标识XMLHttpRequest对象的状态 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 1 (初始化) 对象已建立，尚未调用send方法 2 (发送数据) send方法已调用，但是当前的状态及http头未知 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误， 4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
Onreadystatechange	请求状态改变的事件触发器（readystate变化时会调用这个属性上注册的javascript函数）
responseText	服务器相应的文本内容
responseXML	服务器相应的XML内容对应的DOM对象
Status	服务器返回http状态码。200表示“成功”，404表示“未找到”500表示“服务器内部错误”等。具体请查阅相关资料
statusText	服务器返回状态的文本信息

方法	说明
Open（method, url, asynch, username, password）	Ø method 参数是用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。 Ø url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。 Ø async 参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。 Ø username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。
Send(content)	向服务器发出请求，如果采用异步方式，该方法会立即返回。Content可以指定为null表示不发送数据，其内容可以使dom对象，输入流或字符串。
SetRequestHeader（header，value）	设置HTTP请求中指定头部header的值为value此方法需要在open方法以后调用，一般在post方式中使用
getAllResponseHeaders()	返回包含http的所有响应头信息，其中响应头包括Content-length，data，uri等内容返回值是一个字符串，包含所有头信息，其中每个键名和键值都用冒号分开，每一组键之间用CR和LF（回车加换行符）来分割。
getReponseHeader(header)	返回HTTP响应头中指定的键名header对应的值
Abort()	停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态

使用方法

第一步：创建XMLHttpRuquest对象；
第二步：注册回调方法
第三步：设置和服务器交互的相应参数
第四步：设置向服务器端发送的数据，启动和服务器端的交互

第五步：判断和服务器端的交互是否完成，还要判断服务器端是否返回正确的数据

//类的构建定义，主要职责就是新建XMLHttpRequest对象  
var MyXMLHttpRequest=function(){  
    var xmlhttprequest;  
    if(window.XMLHttpRequest){  
        xmlhttprequest=new XMLHttpRequest();  
        if(xmlhttprequest.overrideMimeType){  
            xmlhttprequest.overrideMimeType("text/xml");  
        }  
    }else if(window.ActiveXObject){  
        var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];  
        for(var i=0;i<activeName.length;i++){  
            try{  
                xmlhttprequest=new ActiveXObject(activeName[i]);  
                break;  
            }catch(e){  

            }  
        }  
    }  

    if(xmlhttprequest == undefined || xmlhttprequest == null){  
        alert("XMLHttpRequest对象创建失败！！");  
    }else{  
        this.xmlhttp=xmlhttprequest;  
    }  

    //用户发送请求的方法  
    MyXMLHttpRequest.prototype.send=function(method,url,data,callback,failback){  
        if(this.xmlhttp!=undefined && this.xmlhttp!=null){  
            method=method.toUpperCase();  
            if(method!="GET" && method!="POST"){  
                alert("HTTP的请求方法必须为GET或POST!!!");  
                return;  
            }  
            if(url==null || url==undefined){  
                alert("HTTP的请求地址必须设置！");  
                return ;  
            }  
            var tempxmlhttp=this.xmlhttp;  
            this.xmlhttp.onreadystatechange=function(){  
                if(tempxmlhttp.readyState==4){  
                    if(temxmlhttp.status==200){  
                        var responseText=temxmlhttp.responseText;  
                        var responseXML=temxmlhttp.reponseXML;  
                        if(callback==undefined || callback==null){  
                            alert("没有设置处理数据正确返回的方法");  
                            alert("返回的数据：" + responseText);  
                        }else{  
                            callback(responseText,responseXML);  
                        }  
                    }else{  
                        if(failback==undefined ||failback==null){  
                            alert("没有设置处理数据返回失败的处理方法！");  
                            alert("HTTP的响应码：" + tempxmlhttp.status + ",响应码的文本信息：" + tempxmlhttp.statusText);  
                        }else{  
                            failback(tempxmlhttp.status,tempxmlhttp.statusText);  
                        }  
                    }  
                }  
            }  

            //解决缓存的转换  
            if(url.indexOf("?")>=0){  
                url=url + "&t=" + (new Date()).valueOf();  
            }else{  
                url=url+"?+="+(new Date()).valueOf();  
            }  

            //解决跨域的问题  
            if(url.indexOf("http://")>=0){  
                url.replace("?","&");  
                url="Proxy?url=" +url;  
            }  
            this.xmlhttp.open(method,url,true);  

            //如果是POST方式，需要设置请求头  
            if(method=="POST"){  
                this.xmlhttp.setRequestHeader("Content-type","application/x-www-four-urlencoded");  
            }  
            this.xmlhttp.send(data);  
    }else{  
        alert("XMLHttpRequest对象创建失败，无法发送数据！");  
    }  
    MyXMLHttpRequest.prototype.abort=function(){  
        this.xmlhttp.abort();  
    }  
  }  
}

三、ajax使用

自己创建XMLHttpRequest对象需要处理各大浏览器不兼容问题，常用jquery框架 $.ajax() load() $.get() $.post()方法兼容主流浏览器。

$.ajax({  
      url:"url",  
      type:"get",  
      dataType:"json",  
      data:{  
            userID:"1"  
       },  
      success:function(response){  
  
       },  
      error:function() {  
       }  
});

$.get(  
      "url",  
       {userID:"123"},  
       function(response) {  
      }  
 )

$.post(  
      "url",  
       {userID:"123"},  
       function(response) {  
       }  
)

----------------------------------我是分割线---------------------------------

AJAX整理

一、首先ajax是什么

二、底层原理

三、ajax使用

猜你喜欢