Ajax实现原理.docxVIP

Ajax实现原理Ajax 的工作Ajax直觉认识：我们发送一个请求，但是这个请求比较特殊它是异步的，也就是说客户端是不会感觉到的。在发送这个请求的时候我们绑定了一个事件，这个事件会监控我们发送请求的状态，并且每次状态改变都会触发，所以我们就可以根据不同的状态让他执行不同的操作。请求到达服务器端的后服务器端根据相应的请求返回对应的信息，这个返回信息我们可以取得并且是异步得到，不会引起客户端刷新。既然在上面已经绑定了监控状态变化的事件，我们就可以在那里首先做好在得到返回信息要做的处理（当然如果失败也会有相应的状态我们也会做出相应的处理），我们在处理中得到返回信息通过javascript在客户端做相应操作即可。 Ajax 核心—XMLHttpRequest 上面我们大概感受了一下Ajax的过程，我们发现发送异步请求才是核心，事实上它就是XMLHttpRequest，整个Ajax之所以能完成异步请求完全是因为这个对应可以发送异步请求的缘故。而且我们又发现上面那个事件就是整个处理过程的核心，可以根据不同状态执行不同操作，其实它就是XMLHttpRequest的方法onreadystatechange，它在每次状态发生改变时都会触发。那么是谁取得的返回信息呢？它就是XMLHttpRequest的另一个方法responseText（当然还有responseXML）。(⊙o⊙)哦，我们还没有说发送给谁以及执行发送操作，这两个就是XMLHttpRequest的open和send方法。Y(^o^)Y，其他的当然还有了，我们直接列出来吧： XMLHttpRequest 对象 属性?readyState 请求状态，开始请求时值为0直到请求完成这个值增长到4responseText 目前为止接收到的响应体,readyState3此属性为空字符串，=3为当前响应体，=4则为完整响应体responseXML 服务器端相应，解析为xml并作为Document对象返回status 服务器端返回的状态码，=200成功，=404表示“Not Found”statusText 用名称表示的服务器端返回状态，对于“OK”为200，“Not Found”为400方法?setRequestHeader() 向一个打开但是未发生的请求设置头信息open() 初始化请求参数但是不发送send() 发送Http请求abort() 取消当前相应getAllResponseHeaders() 把http相应头作为未解析的字符串返回getResponseHeader() 返回http相应头的值事件句柄?onreadystatechange 每次readyState改变时调用该事件句柄，但是当readyState=3有可能调用多次 代码实现 ajax.js文件代码，也是我们说的主要内容，是一个javascript文件，所有的Ajax操作都在这里：/jianxin160/article/details/5544551view plain/jianxin160/article/details/5544551copy to clipboard/jianxin160/article/details/5544551print/jianxin160/article/details/5544551?//与服务器通信 ?function?talktoServer(url)?{???var?req?=?newXMLHTTPRequst();???var?callbackHandler?=?getReadyStateHandler(req);???req.onreadystatechange?=?callbackHandler;???req.open(POST,?url,?true);???req.setRequestHeader(Content-Type,?application/x-www-form-urlencoded);???var?testmsg?=?document.getElementById(testmsg);???var?msg_value?=?testmsg.value;???req.send(msg=+msg_value);??}??//创建XMLHTTP对象 ?function?newXMLHTTPRequst()?{???var?xmlreq?=?false;???if?(window.XMLHttpRequest)?{???xmlreq?=?new?XMLHttpRequest();???}?else?if?(window.ActiveXobject)?{???try{???xmlreq=new?ActiveXObject(Msxm12.XMLHTTP);???}?catc