传统的JavaScript实现的Ajax 与 JQuery封装的Ajax
一、传统的JavaScript实现的Ajax
步骤：
1. 声明一个对象用来装入XMLHttpRequest对象
2. 给XMLHttpRequest对象赋值
3. 实例化成功后，使用open()方法初始化XMLHttpRequest对象
4. 回调事件，当它的readyState值改变时会激发一个readystatechange事件
5. 使用send()方法发送该请求
<script type="text/javascript">
function Ajax(){
var xmlHttpReq = null;
if(window.ActiveXObject){ //IE5 IE6 是以ActiveXObject的方式引入XMLHttpRequest对象的
xmlHttpReq = new Active XObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest){ //除IE5 IE6 以外的浏览器，XMLHttpRequest是window的子对象
xmlHttpReq = new XMLHttpRequest(); //实例化一个XMLHttpRequest对象
}
xmlHttpReq.open("GET","test.aspx",true); //调用open()方法并采用异步方式，使用get方式传递参数时用test.aspx?name=Jack.
xmlHttpReq.onreadystatechange = RequestCallBack; //设置回调函数
xmlHttpReq.send(null); //因为使用GET方法提交，所以可以使用null作为参数
}
function RequestCallBack(){ //一旦readyState值改变，将会调用该函数
if(xmlHttpReq.readyState == 4){ //请求完成加载
if(xmlHttpReq.status == 200){ //响应已经成功
document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
}
}
}
</script>
<input type="button" value="Ajax提交" onclick="Ajax();"/>
<div ></div>
------------------
使用Post提交时，需要设置请求头部
xmlHttpReq.open("POST","test.aspx",true); //调用open()方法并采用异步方式
xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpReq.send("name=Jack&pwd=123"); //因为使用POST方法提交，参数是放在send方法里的
后台返回数据后调用此方法：
xmlHttpReq.onreadystatechange =RequestCallBack; //设置回调函数
-------------------------------------------------------------
因为XMLHttpRequest对象的很多属性和方法，对于想快速入门Ajax的人来收，并不是个容易的过程。为了开发人员能够将程序开发集中在业务和用户体验上，而不用去理会那些繁琐的XMLHttpRequest对象，于是有了下面的Jquery中的Ajax。
-------------------------------------------------------------
JQuery中的Ajax
JQuery对Ajax操作进行了封装，在JQuery中$.ajax()方法属于最底层的方法，
第2层是load()、$.get() 和$.post()方法，
第3层是$.getScript()和$.getJSON()方法。
---------
1. load()方法是JQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中。
load(url [,data] [,callback]);后两个参数是可选的
--load()方法的传递方式根据参数data来自动指定。如果没有这个参数，则采用GET方式传递；反之，为POST方式。
JQuery代码如下：
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
});
});
<input type="button" />
<div ></div>
test.html页面的HTML内容会被加载并插入<div ></div>的元素中。
--如果只需要加载test.html页面内的某些元素，那么可以使用load()方法的URL参数来达到目的。
load()方法的URL参数的语法结构为："url selector"。注意，url和选择器之间有一个空格。
例如只需要加载test.html页面中class为“para”的内容，则可以
$("resText").load("test.html .para");
//无data参数传递，是GET方式
$("#resText").load("test.aspx",function(){
//...
});
//有data参数传递，则是POST方式
$("#resText").load("test.aspx",{name:"rain",age:"22"},function(){
//...
});
--回调函数
$("#resText").load("test.html",function(responseText, textStatus, XMLHttpRequest){
// responseText: 请求返回的内容
//textStatus : 请求状态：success、error、notmodified、timeout
// XMLHttpRequest : XMLHttpRequest对象
});
2. $.get() 方法
load()方法通常用来从Web服务器上获取静态的数据文件，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()或者$.post()方法。
$.get()方法使用GET方式来进行异步请求。
结构为：$.get( url [, data] [,callback] [, type] )
参数说明：callback，只有当Response的返回状态是success才调用该方法。
type，类型是String,服务器端返回内容的格式，包括xml、html、script、json、text和_default
返回不同的数据格式有不同的处理方法：
（1）返回HTML格式
$(function(){
$("#send").click(function(){
$.get("test.aspx",{
username:$("#username").val(),
content:$("#content").val()
},function(data, textStatus){
$("#resText").html(data); //将返回的数据添加到页面上
});
});
})
（2）XML文档
由于服务器端返回的数据格式是XML文档，因此需要对返回的数据进行处理，处理XML文档与处理HTML文档一样，也可以使用常规的attr()、find()、filter()以及其他方法。
$(function(){
$("#send").click(function(){
$.get("test.aspx",{
username:$("#username").val(),
content:$("#content").val()
},function(data, textStatus){
var username= $(data).find("comment").attr("username");
var content = $(data).find("comment content").text();
var txtHtml = "<div class='comment'>"+username+"<p class='para'>"+content+"</p></div>";
$("#resText").html(txtHtml); //将处理后的数据添加到页面上
});
});
})
由于要服务器端返回的数据格式是XML文档，因此需要在服务端设置Content-Type类型为text/xml
(3) JSON文件
之所以出现这种数据格式的文件，很大程度上是因为XML文档体积大和难以解析。JSON文件和XML文档一样，也可以方便的被重用。
也需要对返回的JSON数据进行处理，才可以将新的HTML数据添加到主页面中。
$(function(){
$("#send").click(function(){
$.get("test.aspx",{
username:$("#username").val(),
content:$("#content").val()
},function(data, textStatus){
var username = data.username;
var content = data.content;
var txtHtml = "<div class='comment'>"+username+":<p class='para'>"+content+"</p></div>";
$("#resText").html(txtHtml); //将返回的数据添加到页面上
},"json");
});
})
将第4个参数设置为“json”来代表服务器端返回的数据格式。
-------------------------------------------
3种数据格式的优缺点：
当不需要与其他应用程序共享数据时，使用html来提供返回数据；
如果数据需要重用，那么使用JSON文件，它在性能和文件大小方面具有优势；
而当远程应用程序未知时，XML文档是明智的选择，它是Web服务领域的“世界语”。
-------------------------------------------
3. $.post()方法
$(function(){
$("#send").click(function(){
$.post("test.aspx",{
username:$("#username").val(),
content:$("#content").val()
},function(data, textStatus){
$("#resText").append(data); //将返回的数据添加到页面上
});
});
})
另外，当load()方法带有参数传递时，会使用POST方式发送请求，因此可以用load()方法来完成相同的功能。
$(function(){
$("#send").click(function(){
$("#resText").load("test.aspx",{
username:$("#username").val(),
content:$("#content").val()
})
})
})
上面使用load()、$.get()和$.post()方法完成了一些常规的Ajax程序，如果还需要编写一些复杂的Ajax程序，就要用到JQuery中的$.ajax()方法。
$.ajax()方法不仅能实现上面的方法的功能，而且还可以设定beforeSend（提交前回调函数）、error（请求失败后处理）、success（请求成功后处理）、complete（请求完成后处理）回调函数，通过这些回调函数，可以给用户更多的Ajax提示信息。
4. $.getScript()
有时候，在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。虽然可以在需要哪个Javascript文件时，动态地创建<script>标签，
$(document.createElement("script")).attr("src","test.js").appendTo("head");或者
$("<script type='text/javascript' src='test.js'/>").appendTo("head");
但这种方式并不理想，为此，JQuery提供了$.getScript()方法来直接加载.js文件。加载完后会自动运行里面的函数。
$(function(){
$('#send').click(function(){
$.getScript('test.js');
});
})
$.getScript()方法也有回调函数，它会在JavaScript文件成功载入后运行。例如想载入JQuery官方颜色动画插件(jquery.color.js).
$(function(){
$.getScript('/jquery.color.js',function(){
$("#go").click(function(){
$(".block").animate({backgroundColor:'pink'},1000)
.animate({backgroundColor:'blue'},1000);
});
});
})
当jquery.color.js动画插件加载完毕后，单击id为“go”的按钮时，class为block的元素就有了颜色动画变化。
5. $.getJSON()
$.getJSON()方法用于加载JSON文件，与$.getScript()方法的用法相同。
$(function(){
$("#send").click(function(){
$.getJSON('test.json',function(data){
//data:返回的数据
});
});
})
用$.each()处理返回的数据：
$(function(){
$("#send").click(function(){
$.getJSON('test.json',function(data){
$('#resText').empty();
var html = '';
$.each(data,function(commentIndex, comment){
html +='<div >'+comment['username']+':<p>'+comment['content']+'</p></div>';
});
$('#resText').html(html);
});
});
})
6. $.ajax()方法
是jquery最底层的Ajax实现。它的结构为：
$.ajax(options) ,参数以key/value的形式存在，所有参数都是可选的。
常用参数：
参数名称 类型 说明
url String
type String
timeout Number
data Object或String
dataType String
beforeSend Function
complete Function
success Function
error Function
global Boolean
--------------------------
因为$.ajax()方法是最底层的Ajax实现，因此可以用它来代替前面的所有方法。
例如，可以代替$.getScript()方法
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
});
})
例如，可以代替$.getJSON()方法：
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
dataType: "json",
success : function(data){
$('#resText').empty();
var html='';
$.each(data, function(commentIndex,comment){
html+= '<div>'+comment['username']+':<p>'+comment['content']+'</p></div>';
});
$('#resText').html(html);
}
});
});
})
-------------------------------------
序列化元素
1. serialize()方法
使用$.get()和$.post()方法的时候，data参数少量还可以一个一个添加进去，但如果表单元素越来越复杂，使用这种方式在增大工作量的同时也使表单缺乏弹性。于是JQuery为这一常用的操作提供了一个简化的方法--serialize().
$('#send').click(function(){
$.get("test.aspx", $("#form1").serialize(), function(data,textStatus){
$("#resText").html(data);
});
});
需要再说明一下，data参数的几种形式：
(1) {
username : $("#username").val(),
content : $("#content").val()
}
(2)字符串格式
" username="+encodeURIComponent( $('#username').val()) + "&content=" + encodeURIComponent( $('#content').val() )
(3) serialize()方法不仅表单可以使用它，其他选择器选取的元素也可使用它。
$(":checkbox , :radio").serialize();
把复选框和单选框的值序列化为字符串形式。