使用jQuery的$.ajax方法可以更為詳細的控制AJAX請求。它在AJAX請求上施加細粒度層級的控制。
$.ajax方法文法
$.ajax(options) |
|
參數 |
|
options |
(對象)一個對象的執行個體，其屬性定義這個操作的參數。詳情見下表。 |
傳回值 |
XHR執行個體 |
options詳細範圍值
名稱 |
類型 |
描述 |
url |
字串 |
請求的url地址 |
type |
字串 |
將要使用的HTTP方法。通常是POST或GET。如果省略，則預設為GET |
data |
對象 |
一個對象，其屬性作為查詢參數而傳遞請求。如果是GET請求，則把資料作為查詢字串傳遞；如果是POST請求，則把資料作為請求體傳遞。在這兩種情況下，都是由$.ajax()工具 + 生產力函數來處理值的編碼 |
dataType |
字串 |
一個關鍵字，用來標識預期將被響應所返回的資料的類型。這個值決定再把資料傳遞給回呼函數之前(如果有)進行什麼後續處理。有效值如下： xml-響應文本被解析為XML文檔，而作為結果的XML DOM被傳遞給回呼函數 html-響應文本未經處理就被傳遞給回呼函數。在已返回HTML片段內的任何<script>塊將被求值 json-響應文本被求值為JSON字串，而作為結果的對象被傳遞給回呼函數 jsonp-與json相似，不同之處是提供遠程指令碼支援(假定遠程伺服器支援) script-響應文本被傳遞給回呼函數。在任何回呼函數被調用之前，響應被作為一個或多個JavaScript語句而進行處理 text-響應文本被假定為普通文本。伺服器資源負責設定適當的內容類型響應標題。如果省略這個屬性，則不對響應文本進行任何處理或求值就傳遞給回呼函數 |
timeout |
數值 |
設定Ajax請求的逾時值(毫秒)。如果請求在逾時值到期之前仍未完成，則中止請求並且調用錯誤回呼函數(如果已定義) |
global |
布爾型 |
啟用或禁用全域函數的觸發。這些函數可以附加到元素上，並且在Ajax調用的不同時刻或狀態下觸發。預設啟用全域函數觸發 |
contentType |
字串 |
將要在請求上指定的內容類型。預設為application/x-www-form-urlencoded(與表單提交所使用的預設類型相同) |
success |
函數 |
如果請求的響應指示成功狀態代碼，則這個函數被調用。響應體作為第一個參數被返回給這個函數，並且根據指定的dataType屬性進行。第二個參數是包含狀態代碼的字串—這種情況下永遠為成功狀態代碼 |
error |
函數 |
如果請求的響應返回錯誤狀態代碼，則這個函數被調用。三個實參被傳遞給這個函數：XHR執行個體、狀態訊息字串(在這種情況下永遠為錯誤狀態代碼)以及XHR執行個體所返回的異常對象(可選) |
complete |
函數 |
請求完成時被調用。兩個實參被傳遞：XHR執行個體和狀態訊息字串(成功狀態代碼或錯誤狀態代碼)。如果也指定了success或error回呼函數，則這個函數在success或error回呼函數調用之後被調用 |
beforeSend |
函數 |
在發起請求之前被調用。這個函數被傳遞XHR執行個體，並且可以用來設定自訂的標題或執行其他預請求操作 |
async |
布爾型 |
如果指定為false，則請求被提交為同步請求。在預設的情況下，請求是非同步 |
processData |
布爾型 |
如果設定為false，則阻止已傳遞資料被加工為URL編碼格式。預設情況下，資料被加工為URL編碼格式(適用於類型為application/x-www-form-urlencoded的請求) |
ifModified |
布爾型 |
如果設定為true，則自從上一次請求以來，只有在響應內容沒有改變的情況下(根據Last-Modified標題)才允許請求成功。如果省略，則不執行標題檢查 |
下面看個例子，儘可能多的用到options中的選項
用戶端代碼：
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script><script type="text/javascript">$().ready(function () { $('#selectNum').change(function () { var idValue = $(this).val(); var show = $('#show'); $.ajax({ url: 'Server.aspx', type: 'POST', data: { id: idValue }, //調小逾時時間會引起異常 timeout: 3000, //請求成功後觸發 success: function (data) { show.append('success invoke!' + data+'<br/>'); }, //請求失敗遇到異常觸發 error: function (xhr, errorInfo, ex) { show.append('error invoke!errorInfo:' + errorInfo+'<br/>'); }, //完成請求後觸發。即在success或error觸發後觸發 complete: function (xhr, status) { show.append('complete invoke! status:' + status+'<br/>'); }, //發送請求前觸發 beforeSend: function (xhr) { //可以設定自訂標題 xhr.setRequestHeader('Content-Type', 'application/xml;charset=utf-8'); show.append('beforeSend invoke!' +'<br/>'); }, //是否使用非同步發送 async: true }) });})</script></head><body><select id="selectNum"> <option value="0">--Select--</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option></select><div id="show"></div></body></html>
服務端主要代碼：
protected void Page_Load(object sender, EventArgs e){ if (!Page.IsPostBack) { if (Request["id"] != null && !string.IsNullOrEmpty(Request["id"].ToString())) { //啟用該句會引發ajax逾時異常 // System.Threading.Thread.Sleep(3000); Response.Write(GetData(Request["id"].ToString())); } }}protected string GetData(string id){ string str = string.Empty; switch (id) { case "1": str += "This is Number 1"; break; case "2": str += "This is Number 2"; break; case "3": str += "This is Number 3"; break; default: str += "Warning Other Number!"; break; } return str;}
運行程式，結果
Demo下載
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
