jQuery 對Ajax的支援——從Ajax基本實現到jQuery對Ajax的封裝
jQuery對Ajax的支援
在學習這塊之前先得了解下Ajax。
一、Ajax
——Asynchronous JavaScript And XML
Ajax不是一種框架，而是多種技術組合而成的一種整體。主要用於非同步更新網頁內容。通過與後臺的資料交換，Ajax可以只更新網頁的部分內容而不會重新載入整個頁面。
在學習jQuery對Ajax的支援之前，先了解下Ajax的原始實現。
結合程式碼說明起來比較方便：
ajaxtest.html:
<!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>垂直居中</title> <scriptsrc="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <scriptsrc="js/tempjs.js"></script> <script> functionajaxTest(id){ //步驟一 var xmlhttp = new XMLHttpRequest(); //步驟二 xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState==4 &&xmlhttp.status==200){ $(id).html(xmlhttp.responseText); } } //步驟三 xmlhttp.open("GET","ajax/test.txt",true); xmlhttp.send(); } </script> <styletype="text/css"> #div_parent{ margin:100px50px 0px 50px;border:2px solid black;height:400px;border-radius:15px; } #div_child{ height:60px;width:130px;border:2pxsolid black;border-radius:15px;margin:0px auto; } </style> </head> <body> <divid="div_parent" > <buttononclick="ajaxTest('#div_child')">change</button> <divid="div_child" > <p>changetext</p> </div> </div> </body> </html>
按下按鈕將會呼叫"ajax/test.txt"中的內容，原內容將被修改。
實現Ajax有幾個步驟：
1、獲取XMLHttpRequest物件(如果是上古時代的瀏覽器，如ie5，則應該獲取ActiveXObject，這裡不討論它)。
var xmlhttp =new XMLHttpRequest();2、為XMLHttpRequest物件配置屬性
XMLHttpRequest物件一共有三個屬性：onreadystatechange(全小寫)、readyState、status2.1：onreadystatechange
為onreadystatechange屬性設定方法。
xmlhttp.onreadystatechange = function(){ //方法內容 }；
每次readyState物件的改變都會觸發一次onreadystatechange屬性儲存的函式，一次有效的Ajax請求一共會觸發5次該事件。
2.2：readyState
一共有5個值，0~4分別代表不同的狀態。
0 —— 請求未初始化
1 —— 伺服器已建立了連結
2 —— 請求已被伺服器接收
3 —— 請求正在被處理
4 —— 請求完成處理，響應就緒
上面的程式中，通過以下程式碼即可判斷出當前伺服器是否已準備好響應
if(xmlhttp.readyState==4…)2.3：Status
代表著Http狀態碼，例如401，404，200……
在上面的程式中，通過以下程式碼即可判斷出伺服器是否已準備響應且響應正常。
if(xmlhttp.readyState==4&& xmlhttp.status==200)2.4：獲取伺服器響應內容
上述程式中的：$(id).html(xmlhttp.responseText)。這段程式為被傳入的元素設定了一段html資訊。
響應分為兩種：
responseText / responseXML
前者針對於一般的檔案資料，後者針對Xml檔案，獲取後需要在Js指令碼中解析一下，以抓取需要的資訊。
3、傳送請求open()/send()
對應上邊的：
xmlhttp.open("GET","ajax/test.txt",true);
xmlhttp.send();
API：
3.1 open()：
xmlhttp.open(method,url,async);
method：請求方法，分為GET/POST，具體的區別參照Http協議。
url：請求的url，可以把請求引數加進去
async：是否採用非同步模式，使用Ajax時一定要設為true。
當設定為false，務必確認該請求是一個不太耗時的小型請求，且不再需要為onreadystatechange屬性設定函式：
xmlhttp.open("POST","ajax/test.txt",false);
xmlhttp.send();
$(id).html(xmlhttp.responseText);3.2 send():
xmlhttp.send(String);
用於傳送請求資料，相當於是url中?的後面部分，在method為GET的時候一般直接在open方法裡邊修改url。
只有在method為POST的時候才能為send()傳入引數，且傳入引數時時，必須通過XMLHttpRequest.setRequestHeader為send中的資料設定型別
二、jQuery中的Ajax
這裡僅列出了三個基本的方法
1、jQuery.ajax()
$.ajax([setting]);
這是比較通用的方法。
直接給ajax傳入各種引數以設定整個ajax的行為。
2、jQuery.load() / jQuery.post() / jQuery.get()
這三個方法進行了進一步的封裝，簡化了操作2.1 jQuery.load(url[,data][,complete])
用於從伺服器載入資料併為目標元素設定返回資料
url是必選的，data可以傳入一些鍵-值對的請求引數，complete是一個回撥方法，主要可以對返回結果進行一些處理。例如：
function ajaxTest(id){
$(id).load("ajax/test.txt",function(response,status,xmlhttp){
alert("返回的文字為:"+response);
});
}其中response封裝了返回的資料，status包含了呼叫的狀態，xmlhttp封裝了該次請求的XMLHttpRequest
以上指令碼將直接對元素‘id’新增一段從test.txt中獲取的html文字url是必選的。採用GET方法請求。
data：和load()中的一樣，用於傳入一些請求引數，但實際上請求方法為GET時，一般直接在url中追加引數。
success：是成功後的回撥方法。一般寫為：function(response,status,xmlhttp){}，其引數作用和load中的complete類似。
dataType：返回資料的型別，jQuery預設進行智慧判斷。一個例項：
function ajaxTest(id){
$.get("ajax/test.txt",function(response,status,xmlhttp){
$(id).html(response);
alert("返回的文字為: "+response);
});
}以上例項和2.1中的程式碼段將實現同樣的效果
2.3 jQuery.post(url[,data][,success][,dataType])
url是必選的。採用POST方法請求。
data：傳入請求引數。
success：成功後的回撥方法，該方法和get()中的回撥方法基本相同。
datatype：同get()中的datatype。一個例項：
同樣和2.1，2.2的例項有相同的效果。function ajaxTest(id){
$.post("ajax/test.txt",{time:"2018",name:"tom"},function(response,status,xmlhttp){
$(id).html(response);
alert("返回的文字為:"+response+"status: "+status);
});
}
實際上這裡傳入的請求引數，{time:"2018",name:"tom"}，並沒有起作用，只是記錄一下該引數的格式。另外，傳入陣列的格式應該是：{ 'choices[]':[ "Jon","Susan"] }