关于使用原生代码实现Ajax以及使用jQuery实现Ajax的几个方法。

Ajax(Asynchronous JavaScript and XML)是由JavaScript,XML,CSS等几种现有技术整合而成。
使用原生代码实现Ajax
原生Ajax的执行流程是,用户界面触发事件调用JavaScript,通过Ajax引擎XMLHttpRequest对象异步发送请求到服务器,服务器返回XML,JSON或HTML等格式的数据,然后利用返回的数据使用DOM和CSS技术局部更新用户界面。如图：
使用XMLHttpRequest对象发送GET(POST)请求到服务器,并处理文本方式响应,需要通过以下4个步骤实现。
1.创建XMLHttprequest对象。通过window.XMLHttpRequest的返回值判断创建XMLHttpRequest对象的方式。
2.设置回调函数。通过onreadystatechange属性设置回调函数,其中回调函数需要自定义。
3.初始化XMLHttpRequest对象。通过open()方法设置请求的发送方式和路径。
4.发送请求。
示例代码如下:
GET方法提交:
1.创建XMLHttprequest对象
if(window.XMLHttpRequest){//返回值为true时说明是新版本的IE或其他浏览器。
xmlHttpRequest=new XMLHttpRequest();
}else{//返回值为false时说明是老版本IE浏览器(IE5和6)
xmlHttpRequest=new ActiveXObject(“Microsoft.XMLHTTP”);
}
2.设置回调函数
xmlHttpRequest.onreadystatechange=callBack;
3.初始化XMLHttpRequest组件
var url=“userServlet?name=”+name;//服务器端URL地址,name为用户名文本框获取的值。
xmlHttpRequest.open(“GET”,url,true);
4.发送请求 如果send()方法不设值,在不同的浏览器下可能存在不兼容的问题。
xmlHttpRequest.send(null);
//回调函数callBack()中处理服务器响应的关键代码
if(xmlHttpRequest.readyState == 4&&xmlHttpRequest.status == 200){
var data=xmlHttpRequest.responseText;
if(data==“true”){
$("#nameDiv").html(“用户名已被使用！”);//nameDive为显示消息的div的id
}；
};
POST提交方式：
1.创建XMLHttprequest对象
if(window.XMLHttpRequest){//返回值为true时说明是新版本的IE或其他浏览器。
xmlHttpRequest=new XMLHttpRequest();
}else{//返回值为false时说明是老版本IE浏览器(IE5和6)
xmlHttpRequest=new ActiveXObject(“Microsoft.XMLHTTP”);
}
2.设置回调函数
xmlHttpRequest.onreadystatechange=callBack;
3.初始化XMLHttpRequest组件
var url=“userServlet”;//服务器端URL地址。
xmlHttpRequest.open(“POST”,url,true);
xmlHttpRequest.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
4.发送请求
var data=“name=”+name;//需要发送的数据,name为用户名文本框获取的值。
xmlHttpRequest.send(data);
//回调函数callBack()中处理服务器响应的关键代码
if(xmlHttpRequest.readyState == 4&&xmlHttpRequest.status == 200){
var data=xmlHttpRequest.responseText;
if(data==“true”){
$("#nameDiv").html(“用户名已被使用！”)；//nameDive为显示消息的div的id
}；
}；

使用jQuery实现Ajax
通过原生JavaScript实现Ajax相对比较复杂，而jQuery将Ajax相关的操作进行了封装,只需要简单调用一个方法即可完成请求发送和复杂格式结果的解析。
相比使用原生JavaScript实现Ajax技术而言,使用jQuery实现Ajax更加简洁方便且结构清晰。
1.使用$.ajax()方式：语法:$.ajax([settings]);
示例：
$.ajax({
“url”:“userSerrvlet”, //要提交的URL路径
“type”:“GET”, //发送请求的方式
“data”:“name=”+name, //要发送到服务器的数据
“dataType”:“text”, //要指定返回的数据格式
“success”:callBack, //相应成功后执行的代码
“error”:function(){} //请求失败后执行的代码
});
//相应成功时的回调函数
function callBack(data){ //入参表示相应结果
};

2.使用$.get()方法：语法:$.get(url[,data][,success][,dataType])；
该方法是jQuery封装的发送HTTP GET请求从服务器加载数据的Ajax方法。
示例：$.get(“Text”,“name=”+uname,haha);

3.使用$.post()方法：语法:$.post(url[,data][,success][,dataType])；
该方法是jQuery封装的发送HTTP POST请求从服务器加载数据的Ajax方法。
示例：$.post(“Text”,“name=”+uname,haha);

4.使用$.getJSON()方法：语法:$.getJSON(url[,data][,success]);
示例：$.getJSON(“Text”,“name=”+uname,haha);

注意：使用$.getJSON()方法只能以GET方法发送数据。

5.使用.load()方法。
该方法通过发送Ajax请求从服务器加载数据,并把响应的数据直接调用到指定的元素中。
语法如下：$(selector).load(url[,data][,complete]);

示例:$("#opt_area>ul").load(“news”,“opr=listHtml”);

以上代码示例等价于：
$.get(“news”,“opr=listHtml”,function(data){
$("#opt_area>ul").html(data);
})
注意：该方法默认使用GET方法发送请求。除非提供的data参数是一个对象,则使用POST方法发送。

以上介绍了$.get(),$.post(),$.getJSON(),.load()等常用Ajax方法都基于$.ajax()方法封装的,相比于$.ajax()方法更加简洁,方便。