AJAX請求全域函數的使用

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

我們可以把AJAX全域函數附加到特定的DOM元素。這些函數在AJAX請求處理的不同階段或在請求最終成功或失敗時將被觸發

AJAX全域函數的任何一個命令文法都是一致的，所以統一在下表中說明。

ajaxStart(callback) ajaxSend(callback) ajaxSuccess(callback) ajaxError(callback) ajaxComplete(callback) ajaxStop(callback)
把傳入的回呼函數附加到所有匹配元素上，一旦到達AJAX請求處理的指定時刻就觸發回呼函數。
參數
callback	(函數)將被附加的回呼函數。參照下表瞭解何時回呼函數被觸發以及什麼參數將被傳遞。
傳回值	封裝集

AJAX全域回呼函數(按觸發順序排列)

全域函數類型	何時被觸發	參數
ajaxStart	在jQuery AJAX函數或命令發起時，但在XHR執行個體被建立之前	類型被設定為ajaxStart的全域回調資訊對象
ajaxSend	在XHR執行個體被建立之後，但在XHR執行個體被發送給伺服器之前	類型被設定為ajaxSend的全域回調資訊對象；XHR執行個體；$.ajax()函數使用的屬性
ajaxSuccess	在請求已從伺服器返回之後，並且響應包含成功狀態代碼	類型被設定為ajaxSuccess的全域回調資訊對象；XHR執行個體；$.ajax()函數使用的屬性
ajaxError	在請求已從伺服器返回之後，並且響應包含失敗狀態代碼	類型被設定為ajaxError的全域回調資訊對象；XHR執行個體；$.ajax()函數使用的屬性；被XHR執行個體返回的異常對象(如果有的話)
ajaxComplete	在請求已從伺服器返回之後，並且在任何已聲名的ajaxSuccess或ajaxError回呼函數已被調用之後	類型被設定為ajaxComplete的全域回調資訊對象；XHR執行個體；$.ajax()函數使用的屬性
ajaxStop	在所有其他AJAX處理完成以及任何其他適用的全域回呼函數已被調用之後	類型被設定為ajaxStop的全域回調資訊對象

看個例子

用戶端代碼：

<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();　　　　$('#show').html('');　　　　//這裡可以把url地址改成一個錯誤地址如Server1.aspx測試錯誤情況?　　　　$.post('Server1.aspx', { id: idValue }, function (data) { $('#show').html('success callback!<br/>' + data + '<br/>' + (new Date()).toLocaleTimeString() + ' ' + (new Date()).getMilliseconds())+'<br/>' })　　});　　$('#ajaxStart').ajaxStart(function () {　　　　$(this).html('ajaxStart!<br/>'　　　　+ (new Date()).toLocaleTimeString() + ' ' + (new Date()).getMilliseconds())　　})　　$('#ajaxSend').ajaxSend(function (o, xhr, property) {　　　　$(this).html('ajaxSend!<br/>'　　　　+ (new Date()).toLocaleTimeString() + ' ' + (new Date()).getMilliseconds())　　})　　$('#ajaxSuccess').ajaxSuccess(function (o, xhr, property) {　　　　$(this).html('ajaxSuccess!<br/>'　　　　+ 'status:' + xhr.status + ' status info:' + xhr.statusText + '<br/>'　　　　+ (new Date()).toLocaleTimeString() + ' ' + (new Date()).getMilliseconds())　　})　　$('#ajaxError').ajaxError(function (o, xhr, property, err) {　　　　$(this).html('ajaxError!<br/>'　　　　+ 'status:' + xhr.status + ' status info:' + xhr.statusText + '<br/>'　　　　+ (new Date()).toLocaleTimeString() + ' ' + (new Date()).getMilliseconds())　　})　　$('#ajaxComplete').ajaxComplete(function (o, xhr, property) {　　　　$(this).html('ajaxComplete!<br/>'　　　　+ 'status:' + xhr.status + ' status info:' + xhr.statusText + '<br/>'　　　　+ (new Date()).toLocaleTimeString() + ' ' + (new Date()).getMilliseconds())　　})　　$('#ajaxStop').ajaxStop(function () {　　　　$(this).html('ajaxStop!<br/>'　　　　+ (new Date()).toLocaleTimeString() + ' ' + (new Date()).getMilliseconds())　　})})</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><fieldset>　　<legend>ajaxStart</legend>　　<div id="ajaxStart"></div></fieldset><fieldset>　　<legend>ajaxSend</legend>　　<div id="ajaxSend"></div></fieldset><fieldset>　　<legend>ajaxSuccess</legend>　　<div id="ajaxSuccess"></div></fieldset><fieldset>　　<legend>ajaxError</legend>　　<div id="ajaxError"></div></fieldset><fieldset>　　<legend>ajaxComplete</legend>　　<div id="ajaxComplete"></div></fieldset><fieldset>　　<legend>ajaxStop</legend>　　<div id="ajaxStop"></div></fieldset></body></html>

服務端主要代碼：

protected void Page_Load(object sender, EventArgs e){　　if (!Page.IsPostBack)　　{　　　　if (Request["id"] != null && !string.IsNullOrEmpty(Request["id"].ToString()))　　　　{　　　　　　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下載

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More