【颗粒归仓】（三）原生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

      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了。

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