一、傳統的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 id="resText"></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" id="send" value="Ajax獲取"/>
<div id="resText"></div>
test.html頁面的HTML內容會被加載並插入<div id="resText"></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");
});
})
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
--------------------------