Ajax

Ajax

刘听风 165 2018-12-08

一、简介
ajax是Asynchronous Javascript and XML的缩写,意思是执行异步的网络请求
其表现形式为程序的执行顺序不依赖程序本身的书写顺序,则相反为同步。
ajax技术可以使得向服务器请求数据的时候无需卸载页面,得到更好的体验
ajax的核心是XMLHttpRequest对象,它实现了异步方式从服务器获取数据,也就是用XHR对象获取到服务器的数据,再使用DOM将数据更新到页面中
虽然ajax名字中包含了XML,但是他只是一种通信手段,与具体数据格式没有关系,因为当时主流使用XML作为前后台通信数据的格式,所以名字中使用了XML;而现在主要使用的都是JSON格式的字符串
二、XMLHttpRequest对象
ajax的实现流程如下:
1.创建XHR对象
2.调用open()方法,创建请求
3.调用send()方法,发送请求
4.捕获请求状态,判断请求结果
5.获取数据库返回的数据
1、创建XHR对象
XHR对象首次实现是在ie5上,当时使用的是ActiveX对象,所以XHR下ie上有两个版本的实现方式,ie7以下的ActiveX对象与ie7及以上的XHR对象,其余浏览器统一都是使用的XHR对象
所以创建对象的时候需要有兼容性写法
if(window.XMLHttpRequest){
var request = new XMLHttpRequest();
}else{ //这是ie7以下的写法
var request = new ActiveXObject(“Microsoft.XMLHttp”);}
2、调用open()方法
XHR.open(method,url,boolean);
open()方法接收3个参数
method:数据提交方式,字符串形式,可以使用"get"或"post"
url:请求对象地址,字符串表示(get方式与post方式有差异)
boolean:true(默认)表示异步请求,false表示同步请求(相信使用ajax都是为了异步的,所以这里就用true,或者不填写)这个可以省略,默认是true
get方式请求
使用get方式提交数据时需要将提交内容以固定的格式附加在URL后面,格式如下:
url = “地址 ? name1=value1 & name2=value2”;
post方式请求
使用post方式提交数据,提交内容是作为send()方法的参数提交的,所以URL后面无需附加参数
3、调用send()方法
request.send(postbody);
send()方法接收一个参数
postbody:字符串形式,填入需要提交的数据;如果没有提交的数据,可以填入null
get方式请求
因为get方式下的数据已经附加再URL后面提交,所以这里一般填入null
post方式请求
数据的格式如下:
postbody = “name1 = value1 &name2 = value2”;
4、捕获请求状态,判断结果
send()方法调用后,请求就会被提交到服务器;多数情况下,我们会发送异步请求检查请求过程当前的活动阶段,再判断请求是否返回成功
XHR对象相关属性:
readyState:请求 /相应过程的当前活动阶段
responseText:作为响应主体被返回的文本
responseXML:如果相应的内容类型是text/xml或者application这个属性中将保存着响应数据的XMLDOM文档
status:相应的HTTP状态
statusText:HTTP状态说明
我们利用原生的onreadystatechange事件来监听readyState变化
readyState返回值如下:

只要readyState的值有一个值变为另一个值,就会触发一次onreadystatechange事件,可以利用此事件来返回监听到的请求/响应过程状态值
我们关心的是readyState值为4的情况,因为这是代表所有数据已经准备就绪;同时如果status返回的是200,那么可以确定该次去请求/响应过程全部完成
status返回值如下:

注意:这里不要使用statusText去判断,因为该值在跨浏览器时不可靠
最后的返回结果,不管是什么类型内容,都会被保存在responseText中
监听代码如下:

综上所述的内容,就是整个ajax请求的全部流程,我们在js中最后拿到的就是后台返回的responseText,只是里面保存的一般来说是JSON格式的字符串,我们可以将其转换成数组或者对象后提取其中的键值对