首頁 > web前端 > js教程 > 主體

jQuery學習筆記之 Ajax操作篇(三) - 過程處理_jquery

WBOY
發布: 2016-05-16 16:43:12
原創
1293 人瀏覽過

觀察函數

ajaxStart 和 ajaxStop 函數可以用來作為觀察函數,我們可以使用觀察函數的回呼函數來做對應的處理。

當 Ajax 要求開始且尚未進行其他傳輸時,會觸發 ajaxStart 的回呼函數。
當最後一次活動請求終止時,則會執行透過 ajaxStop 註冊的回呼函數。
由於觀察函數具備全域性,所以需要使用 $(document) 來呼叫。我們透過使用 Ajax 方法取得一個圖片的例子來測試兩個函數:
目前頁為:

<div></div>
<button>load</button>
登入後複製

同目錄下的 test.html 內容為:

<img src="avatar.jpg" />
登入後複製

點選按鈕後希望載入圖片:

 $('button').click(function() {
  $('div').load('test.html');
 });
登入後複製

此時我們可以使用 ajaxStart 和 ajaxStop 函數來增加提示:

 $(document).ajaxStart(function() {//
  alert('load a picture');
 }).ajaxStop(function() {
  alert('show a picture');
 });
 $('button').click(function() {
  $('div').load('test.html');
 });
登入後複製

此時點選按鈕後,再圖片載入前先提示 load a picture,載入後提示 show a picture。

錯誤處理

最常用的方式是全域的 ajaxError 方法,以上例為例,如果我們像一個不存在的頁面發送資料請求:

 $(document).ajaxError(function() {//
  alert('load failed!');
 });
 $('button').click(function() {
  $('div').load('noexsited.html');
 });
登入後複製

此時點選按鈕後:

對於非 load 方法,也可以使用 fail 方法來連綴處理:

 $('button').click(function() {
  $.get('noexsited.html', function(data) {

  }).fail(function(jqXHR) {
   alert('status is ' + jqXHR.status);
  });
 });
登入後複製

JSONP

JSONP 即 JSON with padding,填充式 JSON,利用的是

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板