標籤：
【jQuery中的Ajax】
首先說說Ajax的優勢：
不需要外掛程式支援；
優秀的客戶體驗；
提高web程式的效能：在於傳輸資料的方式，它是通過XMLHttpRequest對象向伺服器提交希望提交的資料，即按需發送；
減少伺服器和頻寬的負擔。
Ajax的不足
瀏覽器對XMLHttpRequest對象的支援度不足；
破壞了瀏覽器前進、“後退”按鈕的正常功能；
對搜尋引擎支援不足：通常搜尋引擎都是通過爬蟲程式來對互連網上的資料進行搜尋整理的，但是爬蟲程式不能理解那些奇怪的javascript代碼和因此引起的頁面變化。
開發和調試工具的缺乏。
編寫第一個Ajax小例子：
這是一個傳統的javascript的例子，例子描述了，單擊一個按鈕，然後通過傳統的javascript的Ajax的方式從伺服器端取回一個“Hello Ajax”的字串顯示在頁面上。
<script type="text/javascript"> function Ajax(){ var xmlhttpreq=null; if(window.AtiveXObject){ xmlhttpreq= new Active XObject("Microsoft.XMLHTTP"); }else if{ xmlhttpreq = new XMLHttpRequest(); xmlhttpreq.open("GET","test.php",true); xmlhttpreq.onreadystatechange = RequestCallback; xmlhttpreq.send(null); } } function RequestCallback(){ if(xmlhttpreq.readystate==4){ if(xmlhttpreq.status==200){ document.getElementById("resText").innerHTML = xmlHTTPReq.responseText; } } } </script></head><body> <input type="button" value="Ajax提交" onclick="Ajax();"> <div id="resText"></div></body>//部分代碼省略
進入正題：jQuery中的Ajax
jquery對ajax操作進行了封裝，在jquery中$.ajax()方法屬於最底層的方法，第二層是load()、$.get()\$.post()方法，第三層是$.getScript()和$getJSON()方法。
先來講講第2層的方法
【load()方法】
1、載入html文檔
load()方法是jQuery中最簡單和最常用的Ajax方法，能載入遠端html代碼並插入到DOM中，結構為：load(url,data,callback);
參數說明：
url:String類型，表示請求html頁面的統一資源定位器地址；
data：Object類型，發送至伺服器的key/value資料；
callback：Function類型，請求完成後的回呼函數，無論請求成功或失敗。
例如載入一個test.html內容
$(function(){ $("#send").click(function(){ $("#restext").load("test.html"); });})
2、篩選載入html文檔：結構：$("#restext").load("test.html .para");（url與選取器之間有一個空格）
3、傳遞方式：load方法的傳遞方式是根據參數data來自動指定，如果沒有參數採用GET方式傳遞。
4、回調參數：對於必須在載入完成後才能繼續的操作。load（）方法提供了回呼函數（callback），該函數有三個參數，代表：請求返回的內容、請求狀態和XMLHttpRequest對象。
$("#restext").load("test.html", function(responseText,textStatic, XMLHttpRequest){ //responseText:請求返回的內容 //textStatic:請求狀態：success，error，notmodified，timeout4種 //XMLHttpRequest：XMLHttpRequest對象});
【$.get()和$.post()方法】
load()方法常用來從web伺服器上擷取靜態資料檔案。在項目中，如果需要傳遞一些參數給伺服器中的頁面，就可以使用$get()和$post()方法。這兩個方法都是jquery中的全域函數。
$.get()方法
結構為：$.get()(url,data,callback,type);
參數說明：其他如上，type表示伺服器端返回內容的格式，包括xml,html,json,等
下面是一個例子片段：
$("#send").click(function(){ $.get("get1.php",{/一個json片段},回呼函數); });
伺服器返回的資料格式有多種：html片段、xml文檔、json檔案。
通過這三種資料格式的優缺點分析：
可以得知不需要與其他應用程式共用資料時，使用html來提供返回資料一般是最簡單的；如果資料需要重用，json是不錯的選擇，他在效能和 檔案大小方面具有優勢；的那個遠程應用程式未知時，XML是明知的選擇，他也是web服務界的“世界語”。
$.post()方法
結構和$.get()方法相同，不過也有區別，就是一些傳遞資料的規則不同。
以上方法完成了一些常規的Ajax程式，如果需要編寫一些複雜的程式就需要用到jquery中$.ajax()方法。
下面講第三層方法：
$.getScript()方法和$.getJson()方法
$.getScript()方法：有時候頁面初次載入時就取得全部的javascript檔案是沒有必要的，雖然也有一些解決方案，但是都不理想，為此，jquery提供了$.getScript()方法來直接載入.js檔案。
$("#send").click(function(){ $.getScript("test.js"); });
$.getJson()方法:載入JSON檔案，和$.getScript()方法的用法相同。
另外jQuery還提供了一個通用的遍曆方法$.each();用於遍曆對象和數組，他不同於jquery對象的each方法，他是一個全域函數，不操作對象，而是以一個數組或對象作為第一個參
數，以一個回呼函數作為第二個參數，其中，回呼函數具有兩個參數，索引及對應變數或內容。
現在來講$.ajax()方法
它是jQuery中的最底層的方法,該方法只有一個參數，但是這個對象裡麵包括了該方法所需要的請求設定以及回呼函數等資訊，參數以key/value的形式存在，所有參數都是可選，常用參數為：
url: 要求為String類型的參數，（預設為當前頁地址）發送請求的地址。
type: 要求為String類型的參數，請求方式（post或get）預設為get。注意其他http要求方法，例如put和delete也可以使用，但 僅部分瀏覽器支援。
timeout: 要求為Number類型的參數，佈建要求逾時時間（毫秒）。此設定將覆蓋$.ajaxSetup()方法的全域設定。
data: 要求為Object或String類型的參數，發送到伺服器的資料。如果已經不是字串，將自動轉換為字串格式。get請求中將附加在url後。防止這種自動轉換，可以查看processData選項。對象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組，JQuery將自動為不同值對應同一個名稱。例如
{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。
dataType: 要求為String類型的參數，預期伺服器返回的資料類型。如果不指定，JQuery將自動根據http包mime資訊返回responseXML或responseText，並作為回呼函數參數傳遞。
可用的類型如下：xml：返回XML文檔，可用JQuery處理。
html：返回純文字HTML資訊；包含的script標籤會在插入DOM時執行。
script：返回純文字JavaScript代碼。不會自動緩衝結果。除非設定了cache參數。注意在遠程請求時（不在同一個域下），所有post請求都將轉為get請求。
json：返回JSON資料。
jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後“?”為正確的函數名，以執行回呼函數。
text：返回純文字字串。
beforeSend：要求為Function類型的參數，發送請求前可以修改XMLHttpRequest對象的函數，例如添加自訂HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。
XMLHttpRequest對象是惟一的參數。
function(XMLHttpRequest){ this; //調用本次ajax請求時傳遞的options參數 }
complete：要求為Function類型的參數，請求完成後調用的回呼函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字串。
function(XMLHttpRequest, textStatus){ this; //調用本次ajax請求時傳遞的options參數 }
success：要求為Function類型的參數，請求成功後調用的回呼函數，有兩個參數。
(1)由伺服器返回，並根據dataType參數進行處理後的資料。
(2)描述狀態的字串。
function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 this; //調用本次ajax請求時傳遞的options參數 }；
error：要求為Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤資訊、捕獲的錯誤對象(可選)。
ajax事件函數如下：
function(XMLHttpRequest, textStatus, errorThrown){ //通常情況下textStatus和errorThrown只有其中一個包含資訊 this; //調用本次ajax請求時傳遞的options參數 }
global：要求為Boolean類型的參數，預設為true。表示是否觸發全域ajax事件。設定為false將不會觸發全域 ajax事件，ajaxStart或ajaxStop可用於控制各種ajax事件。
【序列化元素】
1、serialize()方法
它能將DOM元素內容序列化為字串，用於Ajax的請求，解決了表單內容很複雜，再提交表單的時候就會等待整個頁面重新整理，使得表單缺乏彈性。
$("#send").click(function(){ $.get("get1.php",$("#form1").serialize() ,回呼函數); });
2、serializeArray()方法:該方法不是返回字串，而是將DOM序列化後，返回JSON格式的資料。
3、$.param()方法
它是serialize()方法的核心，用來對一個數組或對象按照key/value進行序列化。例如：
var obj={a:1,b:2,c:3};var k = $.param(obj);alert(k);//a=1&b=2&c=3
【jQuery中的Ajax全域事件】
jquery簡化ajax操作不僅體現在調用ajax方法和處理回應程式面，而且還體現在對ajax請求中http的控制，jquery通過自訂一些全域函數，能夠為各種與ajax相關的事件註冊回調
函數。
【基於jquery的ajax聊天室程式】
當作自行練習，可查閱相關資料。
jQuery與Ajax的應用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
