【颗粒归仓】（三）原生ajax和jquery-ajax方法的对比

       最近在敲的SSH网上商城项目中后台验证那块有一个原生ajax的例子，而且前段时间在总结jquery封的ajax这块的知识，现在将二者进行一个对比：

一、原生ajax的创建过程

      1、创建一个 XMLHttpRequest 对象

If(window.XMLHttpReqest) {       //IE7.IE8.FireFox,Morilla.Safari,Opera       var xmlhttp = new XMLHttpRequest();       //解决有些浏览器服务端无法响应XMLMinoType的问题       if(xmlhttp.overrideMimeType) {              xmlhttp.overrideMimeType("text/xml");        }    } else if (window.ActiveXObject) {         // IE6,IE5.5,IE5                    //创建一个数组，包含所有可以用来创建activex控件的名称               var activexName  = ["MSXML2.XMLhTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];    for (var i=0; i<activexName.length; i++ ){Try{         var xmlhttp = new ActiveXObject (activexName[i]);break;            } catch(e){        }               }        }       If (xmlhttp == undefind || xmlhttp == null){      alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");      return;}

      2、调用并注册回调函数

   （1）调用回调函数

    xmlhttp.onreadystatechange = callback;    //callback后不加括号

   （2）注册回调函数

 function callback() {   //5.判断和服务器端的 交互是否完成，还要判断是否正确返回了数据   if (xmlhttp.readyState == 4) {        //表示和服务器的交互已经完成         if (xmlhttp.status == 200) {               //表示服务器的响应代码是200，正确返回了数据               //纯文本的接受方法               var message = xmlhttp.responseText;    //XML数据对应的DOM对象的接受方法    //使用的前提是，服务器端需要设置content-type为text/xml    //var domXml = xmlhttp.responseXML;    //记忆向div标签中填充文本内容的方法    var div = document.getElementById("message");    div.innerHTML = message;          }   }         }

      3、设置和服务器端交互的相应参数 

//记忆一个固定用法，获取文本框中用户输入的内容        var userName =document.getElementById("UserName").value;

    这里取出页面上一个叫做"UserName"的参数

    使用open方法调用open或者get函数

 xmlhttp.open("GET","AJAX?name="+ userName,true)  // get方式

 xmlhttp.open("POST","AJAX",true)    //post方式

       4、设置向服务器端发送的数据，启动和服务器的交互

      xmlhttp.send(null);

        如果使用post方式，需要加上：

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

        之后 

    xmlhttp.send("name=" + userName);

        一共写了4大段代码，其中包含5个步骤，即：

1、建立XMLHttpRequest对象

2、注册回调函数

3、使用open方法设置和服务器端交互的基本信息

4、设置发送的数据，开始和服务器端交互

5、在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器端返回的数据，更新页面内容

二、使用jquery封的ajax创建过程

$.ajax({      url:"http://www.microsoft.com",    //请求的url地址      dataType:"json",   //返回格式为json      async:true,//请求是否异步，默认为异步，这也是ajax重要特性      data:{"id":"value"},    //参数值      type:"GET",   //请求方式      beforeSend:function(){          //请求前的处理      },      success:function(req){          //请求成功时处理      },      complete:function(){          //请求完成的处理      },      error:function(){          //请求出错处理      }  });  

对于post和get两种方式的区别，在使用jquery方式的情况中，没有太大的不同，仅仅在该方式中设置5个属性，即可轻松实现ajax的异步功能。

三、两种方式对比

       其实原理一样，只不过使用的区别有：

       1、jquery 封装了所有浏览器创建xmlhttpRequest对象的方式，javascirpt 要去判断下。
       2、jquery 封装了发送请求的方式，javascirpt 要去判断status readystatus 分别为4 和200

       jquery的 AJAX 除了完成基本的 ajax 操作外，还封装了：jsonp 跨域获取远程数据、提供了 json 的序列化和反序列化、提供了动态加载 js 文件、提供了表单序列化等等功能，远远超出了 ajax 的一般概念。（来源于网络）

四、使用场景

      在我们的itoo项目中，我们使用了jquery这个js插件，使得我们对于ajax的使用非常方便，一个固定的模式，几句简单的代码（除了上述的例子，还有简化post和get的方式）来实现ajax异步，这样情况下，使用jquery简单而且适配的浏览器也更多。

      但是有这样的情况，公司考虑到jquery这样的插件比较消耗资源，不提倡使用jquery插件的时候，就只能够使用原生的ajax了。

      二者各有好处，我们需要都进行了解和掌握。