浅谈AJAX实现原理

转自：https://blog.youkuaiyun.com/fuxiaohui/article/details/72725500

当下盛行的Ajax

    现在Ajax框架数不胜数，Ajax的功能也太庞大的以至于它连它的父辈JavaScript都带动起来了，记得我最初接触web的时候Javascript还没到达有现在的高度，如今随着客户提醒越来越重要，很多软件开发并不仅仅停留在功能实现的要求上，而是更注重交互、分享和互动（这也是web2.0的目标）。其实这也是完全正确的，毕竟那种仅仅赋予功能的东西我们不能满足了，例如你买东西还想要挑好看的呢，何况软件开发呢。回到正题，Ajax框架我还是赞成使用的，毕竟自己来实现效率太慢了，像目前优秀的JavaScript框架jQuery就不得不令人赞赏，而且它也是越来越受欢迎，连微软都在Asp.NET MVC框架中自带了jQuery。但是我觉还是有必要了解Ajax的本质的，这样你才能运用自如。

Ajax的工作

    Ajax直觉认识：我们发送一个请求，但是这个请求比较特殊它是异步的，也就是说客户端是不会感觉到的。在发送这个请求的时候我们绑定了一个事件，这个事件会监控我们发送请求的状态，并且每次状态改变都会触发，所以我们就可以根据不同的状态让他执行不同的操作。请求到达服务器端的后服务器端根据相应的请求返回对应的信息，这个返回信息我们可以取得并且是异步得到，不会引起客户端刷新。既然在上面已经绑定了监控状态变化的事件，我们就可以在那里首先做好在得到返回信息要做的处理（当然如果失败也会有相应的状态我们也会做出相应的处理），我们在处理中得到返回信息通过javascript在客户端做相应操作即可。

Ajax核心—-----XMLHttpRequest

    上面我们大概感受了一下Ajax的过程，我们发现发送异步请求才是核心，事实上它就是XMLHttpRequest，整个Ajax之所以能完成异步请求完全是因为这个对应可以发送异步请求的缘故。而且我们又发现上面那个事件就是整个处理过程的核心，可以根据不同状态执行不同操作，其实它就是XMLHttpRequest的方法onreadystatechange，它在每次状态发生改变时都会触发。那么是谁取得的返回信息呢？它就是XMLHttpRequest的另一个方法responseText（当然还有responseXML）。(⊙o⊙)哦，我们还没有说发送给谁以及执行发送操作，这两个就是XMLHttpRequest的open和send方法。Y(^o^)Y，其他的当然还有了，我们直接列出来吧： 

 

XMLHttpRequest对象属性

readyState：请求状态，开始请求时值为0直到请求完成这个值增长到4

responseText：目前为止接收到的响应体,readyState<3此属性为空字符串，=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有可能调用多次