Ajax技术解析

ajax即是Asynchronized Javascript And Xml，主要利用的是Javascript和浏览器的XMLHttpRequest对象对资源进行异步请求。

从去年入行以来，一直用jquery封装的ajax操作，以至于今年上半年在花旗面试的时候别人问我ajax的原理是什么，我也无言以对。

现在闲下来整理一下技术，给自己扫一下盲。

黄金四部法：

首先创建xmlHttpRequest对象：

           var xmlHttp;

           function createXMLHttpRequest(){

               if(window.ActiveXObject){ //正对ie6以及更为古老的ie版本浏览器

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

               }else if(window.XMLHttpRequest){ //正对Firefox,chrome,safari,opera以及ie7+浏览器

               xmlHttp = new XMLHttpRequest();

               }

           }

      定义返回操作:    

           var okFunc = function(){

               if(xmlHttp.readyState == 4){ //readyState从 0 到 4 发生变化。0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中4: 请求已完成，且响应已就绪

                   if(xmlHttp.status == 200){ //status即是一般的http状态200为成功

                       $("#msg").html(xmlHttp.responseText);

                   }

               }

           }

执行资源请求命令:

           var startAjax = function(){

               $("#msg").html("Loading...");

               createXMLHttpRequest();

               if(!xmlHttp){

                   return alert('xmlHttp create failed!');

               }

               xmlHttp.open("POST","ajax",true);//post请求

               //xmlHttp.open("GET","ajax?test=dadada&t="+Math.random(),true);//t=Math.random()的作用是避免直接调用缓存，确保每次和服务器通信

               xmlHttp.onreadystatechange = okFunc;

               xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

               //xmlHttp.send();

               xmlHttp.send("test=dadada2"); //xmlHttp.send(text);其中的text仅针对post请求适用

           }

鼠标事件操作：

           $(document).ready(function(){

               $("#start").click(startAjax);

           });

当然在自己的项目中，直接使用这样的代码是不太合适的，可以对其进行封装或者直接使用jquery，重复造轮子费时费力不可取。