每次被人问到Ajax的原理,只是简单知道这东西是局部刷新,并知道以前的网站都是点击一个请求,直接发送到服务端,拿到新数据重新刷新整个页面,用户体验差,对于服务端的压力比较大。自从有了Ajax,麻麻再也不用担心那些问题了,现在是想刷新哪里就只刷新那里,且不是每次都调服务端,有一部分的工作直接在用户的客户端直接处理了。
那么,Ajax的原理究竟是什么呢?作为一个在前端行业摸爬滚打这么多年,还没出什么造诣的人,真是丢这行的脸,如果这个都不知道的话!!!
来来来,正式说下Ajax的过程吧(个人吸收后的成果,游客酌情吸收):
Ajax的核心是XMLHttpRequest对象,简称XHR,要使用XHR对象。
第一个方法就是open('get','example.php',true),启动一个请求预备发送阶段,只能在同源网络(即同一个域,端口号,协议相同)下请求,否则会报安全错误。
第二个方法:send(data),里面的参数是请求数据,无数据则是null,调用send方法后请求就会被分派到服务端。
在open之后和send之前,浏览器会发送请求头部信息,调用方法是:setRequestHeader('MyHeader','MyValue'),send之后浏览器接收到响应信息,第一步查看status属性,以确定浏览器是否成功响应。status是 200表示 成功响应, 304 表示请求的并没有被修改,可 以直接使用浏览器中存的版本。
GET请求是直接把请求报头和请求数据发给服务器,POST中间有个过程:检测XHR的readyStatus属性,可以使用onReadyStatusChange方法,status由0(未初始化)-1(启动)-2(发送)-3(接收)-4(完成),响应完成。
所以GET请求的速度远远大于POST请求的速度。
这里说下GET请求和POST请求的差异吧(个人理解,游客酌情吸收):
1,上述所述,效率方面,GET>POST,原因:GET一次性将HttpHeader和requestData发送给服务器,直到响应成功,而POST则是先将HttpHeader发送给服务端,响应100后,再发送请求数据给服务端,中间还有readyStatus的响应过程。所以比GET慢。
2,安全方面,GET请求将请求参数拼接在URL末尾,而POST则是在HttpBody里面。GET<POST.
3, 传输数据量方面,GET<POST,一般情况下GET的传输数据量在2K-8K。而POST取决于服务端的设定,一般都在2M或者以上。
4,缓存方面。浏览器会主动把GET请求的cache缓存,POST则不会,因为POST每次请求的url相同,但是httpbody里面的参数不同,无法一一对应,所以缓存没有意义。