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
  欢迎各位菊苣来指点交流~