ajax学习笔记

最近在看《Head First Ajax》,虽然书里代码给的已经够详细了，但在手过一遍代码时还是引发了一些知识点的思考和扩展。书还没看完，这篇文章我打算是对于那本书边看边总结。

Ajax代码思路

• 创建请求对象

• 配置请求对象并发送到服务器

• 服务器应答请求对象

（1） 创建请求对象，作为和服务器进行通讯的对象：

function createRequest(){

try{

var request=new XMLHttpRequest();

}catch(tryMS){

try{

request=new ActiveXObject("Msxml2.XMLHTTP");

}catch(otherMS){

try{

request=new ActiveXObject("Microsoft.XMLHTTP");

}catch(failed){

request=null;

}

}

}

return request;

}

注：ActiveXObject是Microsoft特定的一种编程对象，有两个不同版本由不同浏览器分别支持。XMLHTTP是可以在Javascript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。
获得请求对象request后，它有这么些个属性：

常用的有onreadystatechange,readyState,responseText,status。

这几天在segmentfault看到一个更详细的ajax介绍:http://segmentfault.com/a/1190000004322487?utm_source=Weibo&utm_medium=shareLink&utm_campaign=socialShare#articleHeader6 引用过来对我自己的总结加以补充：

（2）配置请求对象并发送到服务器：

 
  var request=createRequest();
  request.open("GET",url,true);
  request.onreadystatechange=showResponse;
  request.send(null);
 

open,send方法均来自request对象的原型XMLHttpRequest，打开__proto__:XMLHttpRequest可看到：

open()方法有三个参数，第一个是发送请求所使用的方法（GET还是POST,区别以后再总结）,第二个是规定服务器端脚本的url（该文件可以是任何类型的文件），第三个参数规定是否进行异步处理（默认true异步）
send()方法将请求送往服务器。

• 我在这里注意到，request.onreadystatechange=showResponse;这句代码所在的位置不同，控制台输出的响应内容就不同。想来也是，回调函数加入任务队列的时机不同肯定输出不同啊，就比如现在这个位置，request.onreadystatechange=showResponse;在open之后send之前，当代码解析到request.onreadystatechange=showResponse;时，此时的readyStates=1（请求已和服务器建立接连），此后当readyStates由1变为2，回调函数showResponse加入任务队列中等待被执行，readyState从2变化到3，回调函数showResponse第二次加入任务队列，readyState从3变化到4，回调函数再次加入队列。所以猜想当执行栈的代码执行完毕后，控制台会输出“请求已发送，服务器已接收，send之后”，“请求正在处理”，“请求已完成”；确实如此：
  
  （3）服务器应答请求对象，js就可以处理响应内容了：

   
   function showResponse(){
       if(request.readyState==0){
           console.log('请求未初始化，调用open之前');
       }else if(request.readyState==1){
           console.log('请求已提出，服务器连接已建立，open之后send之前');
       }else if(request.readyState==2){
           console.log('请求已发送，服务器已接收，send之后');
       }else if(request.readyState==3){
           console.log('请求正在处理');
       }else if(request.readyState==4){
           console.log('请求已完成');
           if(request.status==200){
              //处理request.responseText;
           }
       }
   }
  

上面代码仅是为了跟踪readyState变化，实际项目代码要不了这么多。底下才是实际主要代码：

   function showResponse(){
        if(request.readyState==4){
            if(request.status==200){
              //处理request.responseText; 
            } 
        }    
   }
   

参考

• 《Head First Ajax》
• 《图解HTTP》:返回结果的Http状态码
• AJAX-onreadystatechange事件:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp
  欢迎各位菊苣来指点交流~