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

觀察函數

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，利用的是 <script> 標籤可以跨域擷取 Javascript 檔案的思路，故可以跨域擷取 JSON 資料。
JSONP 的格式是把標準 JSON 檔案封裝在一對圓括弧中，圓括弧又前置一個任一字元串。這個字串，即所謂的 P，由請求資料的用戶端來決定。
同樣是上例的按鈕，首先我們將外域頁面 otherdomain.com/index.php 內容設定為：

<?php$data = '{ "name": "stephenlee", "sex": "male" }';echo $_GET['callback'] .'('. $data .')';

我們使用特殊的預留位置 ? 來實現跨域擷取 JSON 資料：

 $('button').click(function() {  $.getJSON('otherdomain.com/index.php?callback=?', function(data) {   console.log(data);  }); });

資料擷取成功。