jquery的ajax傳遞資料過程中的資料處理

通過Ajax方式傳遞資料時，我們還可以在過程中進行一定的處理，以便達到我們的需求。

ajaxStart和ajaxStop函式可以用來作為觀察函式，我們可以使用觀察函式的回撥函式來做相應的處理。

當Ajax請求開始且尚未進行其他傳輸時，會觸發ajaxStart的回撥函式。

當最後一次活動請求終止時，則會執行通過ajaxStop註冊的回撥函式。

由於觀察函式具備全域性性，所以需要使用 $(document) 來呼叫。

通過使用 Ajax 方法取得一個圖片的例子來測試兩個函式:

當前頁面為:

[HTML] 純文字檢視 複製程式碼
<div></div>
<button>load</button>

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

[HTML] 純文字檢視 複製程式碼
<img src="avatar.jpg" />

點選按鈕後希望載入影像:

[JavaScript] 純文字檢視 複製程式碼
$('button').click(function() {
  $('div').load('test.html');
});

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

[JavaScript] 純文字檢視 複製程式碼
$(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方法，以上例為例，如果向一個不存在的頁面傳送資料請求:

[JavaScript] 純文字檢視 複製程式碼
$(document).ajaxError(function(){
  alert('load failed!');
});
$('button').click(function() {
  $('div').load('noexsited.html');
});

此時點選按鈕後:

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

[JavaScript] 純文字檢視 複製程式碼
$('button').click(function(){
  $.get('noexsited.html',function(data){
  }).fail(function(jqXHR){
  alert('status is ' + jqXHR.status);
 });
});

JSONP

JSONP即JSON with padding，填充式JSON利用的是<script>可以跨域獲取Javascript檔案的思路，故可以跨域獲取JSON資料。

JSONP的格式是把標準JSON檔案包裝在一對圓括號中，圓括號又前置一個任意字串。這個字串，即所謂的P，由請求資料的客戶端來決定。

同樣是上例的按鈕，首先將外域頁面otherdomain.com/index.php內容設定為:

[PHP] 純文字檢視 複製程式碼
<?php
$data = '{ "name": "stephenlee", "sex": "male" }';
echo $_GET['callback'] .'('. $data .')';

使用特殊的佔位符 ? 來實現跨域獲取JSON資料:

[JavaScript] 純文字檢視 複製程式碼
$('button').click(function() {
  $.getJSON('otherdomain.com/index.php?callback=?',function(data) {
    console.log(data);
  });
});