Jquery Ajax 学習例 7 Ajax 全プロセス イベント分析 Example_jquery

一、Ajax所有过程事件分析

   JQuery在执行Ajax的过程中会触发很多事件。
   这些事件可以分为两种事件，一种是局部事件(Local)，一种是全局事件(Global)。
   局部事件：可以通过$.ajax来调用,你某一个Ajax请求不希望产生全局的事件，则可以设置global:false。
   全局事件：跟click等事件类似,可以绑定到到每一个DOM元素上。
   这些事件的按照事件的触发顺序如下介绍：

 

局部事件(Local)	全局事件(Global)
	ajaxStart 全局事件 开始新的Ajax请求，并且此时没有其他ajax请求正在进行。
beforeSend 局部事件 当一个Ajax请求开始时触发。如果需要，你可以在这里设置XHR对象。	ajaxSend 全局事件 请求开始前触发的全局事件。
success 局部事件 请求成功时触发。即服务器没有返回错误，返回的数据也没有错误。	ajaxSuccess 全局事件 全局的请求成功。
error 局部事件 仅当发生错误时触发。你无法同时执行success和error两个回调函数。	ajaxError 全局事件 全局的发生错误时触发。
complete 局部事件 不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件。	ajaxComplete 全局事件 全局的请求完成时触发。
	ajaxStop 全局事件 当没有Ajax正在进行中的时候，触发。
注：除了ajaxStart和ajaxStop之外，其他的事件都有3个参数 event, XMLHttpRequest, ajaxOptions 第一个是事件，第二个是XHR对象，第三个参数最有用，是当时调用这个ajax的时候的参数。 对于ajaxError,还有第四个参数thrownError，只有当异常发生时才会被传递。

 

二、Ajax所有过程事件示例

2.1、HTML代码

     

            
           

     

       

Result

      

Process

2.2、Jquery Ajax脚本 

局部事件(Local)实例

全局事件(Global)实例

人気のチュートリアル 詳細> 関連するチュートリアル 人気のおすすめ 最新のコース 最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース) 1407851 PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ 4240032 JAVA 初心者向けビデオチュートリアル 2437168 Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル 500293 PHP ゼロベースの入門チュートリアル 838673 最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース) 1407851 回の学習 JAVA 初心者向けビデオチュートリアル 2437168 回の学習 Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル 500293 回の学習 Web フロントエンド開発の簡単な紹介 214578 回の学習 PSビデオチュートリアルをゼロからマスターする 865561 回の学習 [Web フロントエンド] Node.js クイック スタート 5233 回の学習 海外のWeb開発フルスタックコースの完全なコレクション 4033 回の学習 Go言語実践GraphQL 3450 回の学習 550W ファンマスターが JavaScript をゼロから段階的に学習します 575 回の学習 Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる 17692 回の学習 最新のダウンロード 詳細> ウェブエフェクト 公式サイト サイト素材 フロントエンドテンプレート [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果 [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果 [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果 [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG) [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG) [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS） [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG） [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG) [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG） [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS) [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG） [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート 私たちについて 免責事項 Sitemap PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！