一、简介
1、ajax是Asynchronous Javascript and XML的缩写，意思是执行异步的网络请求
2、我们会发现使用form表单submit按钮提交表单的时候，网页会有执行刷新操作，在新页面告知操作结果，而ajax技术可以使得向服务器请求数据的时候无需卸载页面，得到更好的体验
3、ajax的核心是XMLHttpRequest对象，它实现了异步方式从服务器获取数据，也就是用XHR对象获取到服务器的数据，再使用DOM将数据更新到页面中
4、虽然ajax名字中包含了XML，但是他只是一种通信手段，与具体数据格式没有关系，因为当时主流使用XML作为前后台通信数据的格式，所以名字中使用了XML；而现在主要使用的都是JSON格式的字符串
二、XMLHttpRequest对象 ajax的实现流程如下： 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()方法 request.open(method,url,boolean); open()方法接收3个参数 get方式请求使用get方式提交数据时需要将提交内容以固定的格式附加在URL后面，格式如下：
url = "地址 ? name1=value1 & name2=value2";
使用post方式提交数据，提交内容是作为send()方法的参数提交的，所以URL后面无需附加参数
//获取到用户名及密码的输入框 var username = document.getElementById("username"); var passwd = document.getElementById("passwd"); //将输入内容附加在URL后面 var url = "php/post.php"; //调用open()方法 request.open("post",url,true);注意：因为已经不再使用form表单，所以后台无法再使用name属性获取数据，之前定义在form表单name属性中的内容现在就是在name1=value1中的name1中，相应的，post方式就是下文中的postbody中的name1
3、调用send()方法 request.send(postbody); send()方法接收1个参数因为get方式下的数据已经附加在URL后面提交，所以这里一般填入null
post方式请求数据的格式如下：
postbody = "name1=value1 & name2=value2";
注意1：此处用post方式提交数据与用form表单提交毕竟有所不同，服务器会需要程序来读取并解析原始数据，所以我们需要使用XHR来模仿表单提交：
//将Content的头部信息重新设置 //定义表单提交时的内容类型，并以适当类型创建一个字符串 request.setRequestHeader("Content-Type","application/x-www/form-unencoded");注意2：这个方法只能加在open()方法之后，send()方法之前
//实际使用方法 var username = document.getElementById("username"); var passwd = document.getElementById("passwd"); var url = "php/post.php"; request.open("post",url,true); //放置的位置一定在这里 request.setRequestHeader("Content-Type","application/x-www/form-unencoded"); var postbody = "username="+username.value+"&passwd="+passwd.value; request.send(postbody); 4、捕获请求状态，判断结果send()方法调用后，请求就会被提交到服务器；多数情况下，我们会发送异步请求先检查请求过程当前的活动阶段，再判断请求是否返回成功
XHR对象相关属性： 我们利用原生的onreadystatechange事件来监听readyState变化 readyState返回值如下：
readyState返回值
只要readyState的值有一个值变为另一个值，就会触发一次onreadystatechange事件，可以利用此事件来返回监听到的请求/响应过程状态值
我们关心的是readyState值为4的情况，因为这是代表所有数据已经准备就绪；同时如果status返回的是200，那么可以确定该次去请求/响应过程全部完成
status返回值如下：
status返回值
注意：这里不要使用statusText去判断，因为该值在跨浏览器时不可靠
最后的返回结果，不管是什么类型内容，都会被保存在responseText中
监听代码如下： //监听readyState状态与status返回值 request.onreadystatechange = function () { if(request.readyState == 4 && request.status == 200){ alert(request.responseText); } }综上所述的内容，就是整个ajax请求的全部流程，我们在js中最后拿到的就是后台返回的responseText，只里面保存的一般来说是JSON格式的字符串，我们可以将其转换成数组或者对象后提取其中的键值对
三、封装使用 以下代码是将上述的过程进行的封装，使得使用时只要调用函数并在回调函数中实现功能就可以了 <script> /* * method是请求方式 * url是网络请求的地址 * postboidy是post方式请求时的提交数据 * successCallback是请求成功的函数 * errorCallback是请求失败的函数 */ function request (method,url,postbody,successCallback,errorCallback) { //创建一个请求对象 if(window.XMLHttpRequest){ var request = new XMLHttpRequest(); }else{ var request = new ActiveXObject("Microsoft.XMLHttp"); } if(arguments[0]=="POST"){ //创建请求 request.open(method,url,true); //设置上传类型 request.setRequestHeader("content-type","application/x-www-form-urlencoded"); }else if(arguments[0]=="GET"){ request.open(method,url,true); } //发送请求 request.send(postbody); //状态监听 request.onreadystatechange = function () { if(request.readyState ==4 && request.status == 200){ //请求成功的回调函数 if(successCallback){ successCallback(request.responseText); } } else if (request.readyState == 4 && request.status != 200) { //请求失败的回调函数 if(errorCallback){ errorCallback(request.statusText); } } } } </script> 使用方法举例：
相关文章
精彩导读
热门资讯
关注我们
