【颗粒归仓】（三）原生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了。
 
    二者各有好处，我们需要都进行了解和掌握。