首頁 > 教學 > Js 教學

ajax全域事件引用方式以及各個事件(全域/局部)執行順序

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

本篇文章主要的介紹了關於ajax的全域事件引用方式以及各個事件執行順序，現在我們一起來閱讀本篇文章吧

jquery的ajax方法的全部全域事件：

ajaxStart：ajax請求開始前

ajaxSend：ajax請求時

ajaxSuccess：ajax擷取資料後

ajaxComplete：ajax請求完成時

ajaxError：ajax請求發生錯誤後

ajaxStop：ajax請求停止後

ajax方法的全域事件的用處

當你使用jquery的ajax方法,不管是$.ajax()、$.get()、$.load()、$.getJSON()等都會預設觸發全域事件，只是通常不綁定全域事件，但實際上這些全域事件非常有用處。

ajax全域事件，有個典型的應用場合：你的頁面存在多個甚至為數不少的ajax請求，但是這些ajax請求都有相同的訊息機制。ajax請求開始前顯示一個提示框，提示“正在讀取資料“；ajax請求成功時提示框顯示“資料擷取成功”；ajax請求結束後隱藏提示框。不使用全域事件的做法是：給$.ajax()加上beforeSend、success、complete回呼函數，在回呼函數中加上處理提示框。使用全域事件的做法是：

$(document).ajaxStart(onStart)   .ajaxComplete(onComplete)   .ajaxSuccess(onSuccess);function onStart(event) {//.....}function onComplete(event, xhr, settings) {//.....}function onSuccess(event, xhr, settings) {//.....}

jquery中各個事件執行順序如下

1.ajaxStart(全域事件)

2.beforeSend(局部事件)

3.ajaxSend(全域事件)

4.success(局部事件)

5.ajaxSuccess(全域事件)

6.error(局部事件)

7.ajaxError (全域事件)

8.complete(局部事件)

9.ajaxComplete(全域事件)

10.ajaxStop(全域事件)

樣本
<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body><input type="button" value="點擊觸發ajax請求" id="ajaxReuqestID" /><p id="ajaxStateID"></p><script type="text/javascript" src="js/jquery-3.1.0.min.js"></script><script type="text/javascript">$(function() { //點擊按鈕，並執行ajax請求$(document).ajaxStart(function() {$("#ajaxStateID").append("ajaxStart" + "<br/>");alert("ajaxStart");}).ajaxSend(function() {$("#ajaxStateID").append("ajaxSend" + "<br/>");alert("ajaxSend");}).ajaxSuccess(function() {$("#ajaxStateID").append("ajaxSuccess" + "<br/>");alert("ajaxSuccess");}).ajaxError(function() {$("#ajaxStateID").append("ajaxError" + "<br/>");alert("ajaxError");}).ajaxComplete(function() {$("#ajaxStateID").append("ajaxComplete" + "<br/>");alert("ajaxComplete");}).ajaxStop(function() {$("#ajaxStateID").append("ajaxStop" + "<br/>");alert("ajaxStop");});$("#ajaxReuqestID").click(function() {$.ajax({url: "server/ajaxtxt.txt",global: true,beforeSend: function() {$("#ajaxStateID").append("berforeSend" + "<br/>");alert("berforeSend");},success: function() {$("#ajaxStateID").append("success" + "<br/>");alert("success");},error: function() {$("#ajaxStateID").append("error" + "<br/>");alert("error");},complete: function() {$("#ajaxStateID").append("complete" + "<br/>");alert("complete");}});});});</script></body></html>

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

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
vue父子組件間如何通訊 ？vue父子組件間通訊的四種方法
js中閉包的定義是什嗎？js閉包的應用情境
js中箭頭函數的格式&this以及與普通函數的區別講解
HTTP協議中的並發限制及隊首阻塞問題
基於vue雙向繫結實現的動態列表+動態樣式（代碼）
使用echarts實現圖表項目的注意點

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： 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