欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Jquery Ajax學習實例7 Ajax所有過程事件分析示例

 更新時間:2010年03月23日 00:13:13   作者:  
JQuery在執(zhí)行Ajax的過程中會觸發(fā)很多事件。

一、Ajax所有過程事件分析

   JQuery在執(zhí)行Ajax的過程中會觸發(fā)很多事件。
   這些事件可以分為兩種事件,一種是局部事件(Local),一種是全局事件(Global)。
   局部事件:可以通過$.ajax來調用,你某一個Ajax請求不希望產生全局的事件,則可以設置global:false。
   全局事件:跟click等事件類似,可以綁定到到每一個DOM元素上。
   這些事件的按照事件的觸發(fā)順序如下介紹:

 

局部事件(Local) 全局事件(Global)
ajaxStart 全局事件
開始新的Ajax請求,并且此時沒有其他ajax請求正在進行。
beforeSend 局部事件
當一個Ajax請求開始時觸發(fā)。如果需要,你可以在這里設置XHR對象。
ajaxSend 全局事件
請求開始前觸發(fā)的全局事件。
success 局部事件
請求成功時觸發(fā)。即服務器沒有返回錯誤,返回的數據也沒有錯誤。
ajaxSuccess 全局事件
全局的請求成功。
error 局部事件
僅當發(fā)生錯誤時觸發(fā)。你無法同時執(zhí)行success和error兩個回調函數。
ajaxError 全局事件
全局的發(fā)生錯誤時觸發(fā)。
complete 局部事件
不管你請求成功還是失敗,即便是同步請求,你都能在請求完成時觸發(fā)這個事件。
ajaxComplete 全局事件
全局的請求完成時觸發(fā)。
ajaxStop 全局事件
當沒有Ajax正在進行中的時候,觸發(fā)。
注:除了ajaxStart和ajaxStop之外,其他的事件都有3個參數
event, XMLHttpRequest, ajaxOptions
第一個是事件,第二個是XHR對象,第三個參數最有用,是當時調用這個ajax的時候的參數。
對于ajaxError,還有第四個參數thrownError,只有當異常發(fā)生時才會被傳遞。

 

二、Ajax所有過程事件示例

2.1、HTML代碼

      <div>

            <input type="button" onclick="BtnSpareClick();" value="PartEvents" />
            <input type="button" onclick="BtnGlobalClick();" value="GlobalEvents" />

      </div>

       <div id="Result">Result</div>
       <div id="Process">Process</div>

2.2、Jquery Ajax腳本 

局部事件(Local)實例 全局事件(Global)實例

  <script language="javascript" type="text/javascript">
            $.ready(function BtnSpareClick() {
                $.ajax({
                    type: "get",
                    url: "http://www.dbjr.com.cn/windy2008/rss",
                    data: {},
                    global: false,
                    beforeSend: function(data, status, settings) {
                        $("#Process").text("Part請求開始前");
                        alert($("#Process").text());
                    },
                    success: function(data, status, settings) {
                        $("item", data).each(function(i, domEle) {
                            $("#Result").append("<div>" + $(domEle).children("title").text() + "</div>");
                        });
                        $("#Process").text("Part請求成功時");
                        alert($("#Process").text());
                    },
                    complete: function(data, status, settings) {
                        $("#Process").text("Part請求完成時");
                        alert($("#Process").text());
                    },
                    error: function(data, status, settings) {
                        $("#Process").text("Part請求錯誤時");
                        alert($("#Process").text());
                    }
                });
            });

</script>

 <script language="javascript" type="text/javascript">

 $.ready(function BtnGlobalClick() {
                $.get("http://www.dbjr.com.cn/windy2008/rss", {}, function(data, status, settings)

{
                    $("item", data).each(function(i, domEle) {
                        $("#Result").append("<div>" + $(domEle).children("title").text() + "</div>");
                    });
                });
                $("#Process").ajaxStart(function() {
                    alert($(this).text());
                    $(this).text("開始新的Ajax請求");
                });
                $("#Process").ajaxStop(function() {
                    $(this).text("當沒有Ajax正在進行中的時候");
                    alert($(this).text());
                });
                $("#Process").ajaxSend(function() {
                    $(this).text("請求開始前");
                    alert($(this).text());
                });
                $("#Process").ajaxSuccess(function() {
                    $(this).text("請求成功");
                    alert($(this).text());
                });
                $("#Process").ajaxComplete(function() {
                    $(this).text("請求完成時");
                    alert($(this).text());
                });
                $("#Process").ajaxError(function() {
                    $(this).text("請求錯誤時");
                    alert($(this).text());
                });
            });
        </script>

相關文章

  • jquery多行滾動/向左或向上滾動/響應鼠標實現思路及代碼

    jquery多行滾動/向左或向上滾動/響應鼠標實現思路及代碼

    多行滾動jQuery循環(huán)新聞列表代碼包括以下功能:鼠標滑上焦點圖時停止自動播放/滑出時開始自動播放以及判斷執(zhí)行橫向或縱向滾動,感興趣的朋友可以了解下哦
    2013-01-01
  • Jquery Ajax xmlhttp請求成功問題

    Jquery Ajax xmlhttp請求成功問題

    這篇文章主要介紹了Jquery Ajax xmlhttp請求成功問題,需要的朋友可以參考下
    2015-02-02
  • 基于jquery實現日歷簽到功能

    基于jquery實現日歷簽到功能

    這篇文章主要介紹了基于jquery實現日歷簽到功能,我們在玩游戲的時候或者登錄某手機軟件時都會有一個簽到功能,記錄大家的登錄日期,這個日歷簽到如何實現?本文為大家進行揭曉。
    2015-11-11
  • PHP+jquery+ajax實現分頁

    PHP+jquery+ajax實現分頁

    這篇文章主要為大家詳細介紹了PHPjquery+ajax實現分頁的代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • jquery圖片輪播插件仿支付寶2013版全屏圖片幻燈片

    jquery圖片輪播插件仿支付寶2013版全屏圖片幻燈片

    這篇文章主要介紹了jquery圖片輪播插件,仿支付寶2013版全屏圖片幻燈片功能,需要的朋友可以參考下
    2014-04-04
  • jQuery制作圖片旋轉效果

    jQuery制作圖片旋轉效果

    本文主要介紹了jQuery制作圖片旋轉效果的示例代碼。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-02-02
  • jquery.Ajax()方法調用Asp.Net后臺的方法解析

    jquery.Ajax()方法調用Asp.Net后臺的方法解析

    本篇文章主要是對jquery.Ajax()方法調用Asp.Net后臺的方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-02-02
  • jQuery實現的精美平滑二級下拉菜單效果代碼

    jQuery實現的精美平滑二級下拉菜單效果代碼

    這篇文章主要介紹了jQuery實現的精美平滑二級下拉菜單效果代碼,通過響應鼠標事件動態(tài)修改頁面元素屬性實現二級下拉菜單效果,需要的朋友可以參考下
    2016-03-03
  • 如何使用jQuery操作Cookies方法解析

    如何使用jQuery操作Cookies方法解析

    這篇文章主要介紹了如何使用jQuery操作Cookies方法解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-09-09
  • jQuery實現的放大鏡效果示例

    jQuery實現的放大鏡效果示例

    這篇文章主要介紹了jQuery實現的放大鏡效果,結合實例形式分析了jQuery插件zoom.js實現放大鏡功能的相關操作技巧,需要的朋友可以參考下
    2016-09-09

最新評論