天天看點

jQuery的ajax學習(二)事件監聽

繼續為ajax主體學習鋪墊一下吧,本次講的事件監聽主要是全局監聽和ajax設定回調項兩點,然後鍊式操作在ajax的應用也會講到。ps 昨天晚上發的yii架構學習高效篇gii工具學習的圖居然全沒了,這個編輯器也太不好用了。

1.全局監聽

通過jQuery提供的一些自定義全局函數,能夠為各種與jQuery有關的事件注冊回調函數。例如當ajax請求開始時,會觸發alaxStart()方法的回調函數;當ajax請求結束時,會觸發ajaxStop()方法的回調函數。待會兒的例子都會寫入的

在$ajax()方法裡面有全局Ajax事件的開關,global。

2.ajax設定回調項

$ajax()可以設定回調函數,在相應的事件可以執行。廢話不多說了,看例子吧。

<script src="../../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
      //點選按鈕,并執行ajax請求
      $("#ajaxReuqestID").click(function(){
              $.ajax({
                   url: "http://blog.csdn.net/m0_37645820",
				   global: true,
                   beforeSend:function(){
                       $("#ajaxStateID").text("berforeSend");
                        alert("berforeSend");
                  },//發送前回調函數
                   success: function(){
                       $("#ajaxStateID").text("success");
                       alert("success");    
                  },//成功的回調函數
                  error:function(){
                      $("#ajaxStateID").text("error");
                       alert("error");
                  },//失敗的回調函數
                  complete:function(){
                      $("#ajaxStateID").text("complete");
                       alert("complete");
                  }//完成後回調函數
                 });
          });
          
          $("#ajaxStateID").ajaxStart(function(){//ajax開始全局函數
              $(this).text("ajaxStart");
              alert("ajaxStart");
          }).ajaxSend(function(){//ajax發送全局函數
              $(this).text("ajaxSend");
              alert("ajaxSend");
          }).ajaxSuccess(function(){//ajax成功全局函數
              $(this).text("ajaxSuccess");
              alert("ajaxSuccess");
          }).ajaxError(function(){//ajax失敗全局函數
              $(this).text("ajaxError");
              alert("ajaxError");
          }).ajaxComplete(function(){//ajax完成全局函數
              $(this).text("ajaxComplete");
              alert("ajaxComplete");
          }).ajaxStop(function(){//ajax停止全局函數
              $(this).text("ajaxStop");
              alert("ajaxStop");
          });
      })
</script>
</head>
<body>
<input type="button" value="點選觸發ajax請求" id="ajaxReuqestID"/>
  <div id="ajaxStateID"></div>

</body>
           

繼續閱讀