借助于 XMLHttpRequest，瀏覽器可以在整個頁面不刷新的情況下與服務端進行交互，這就是所謂的 Ajax（Asynchronous JavaScript and XML）。Ajax 可以為用戶提供更為豐富的用戶體驗。

Ajax 請求由 JavaScript 驅動，通過 JavaScript 代碼向 URL 發(fā)送一個請求，待服務端有響應時會觸發(fā)一個回調函數(shù)，可以在這里回調函數(shù)里面處理服務端返回的信息。由于整個發(fā)送請求和響應的過程是異步的，所以在此期間頁面中其它 Javascript 代碼仍然繼續(xù)執(zhí)行，不會中斷。

jQuery 對 Ajax 當然也提供了很好的支持，而且還抽象了各種瀏覽器對于 Ajax 支持方面另人痛苦的差異。它不但提供了全功能的 $.ajax() 方法，還有諸如 $.get()，$.getScript()，$.getJSON()，$.post() 和 $().load() 等更為簡便的方法。

盡管被命名為 Ajax，但是很多 Ajax 應用并沒有使用 XML，特別是 jQuery 方面的 Ajax 應用，大多數(shù)都沒有使用 XML；反而用得比較多的情況是：純文本、HTML 以及 JSON（JavaScript Object Notation）。

一般情況下，由于同源策略（同協(xié)議，同域名，同端口）的限制，Ajax 并不能跨域執(zhí)行請求，除非使用諸如 JSONP（JSON with Padding） 之類的方案，才能實現(xiàn)一些受限的跨域功能。
關于 Ajax 的一些重要概念

GET vs POST，這是兩種最常用的向服務端發(fā)送請求的方法，正確理解這兩種方法的區(qū)別對于 Ajax 開發(fā)非常重要。

GET 方法通常用于執(zhí)行一些非破壞性的操作（就是說，只從服務端獲取信息，不修改服務端上的信息）。例如，搜索查詢服務一般會使用 GET 請求。另外，GET 請求還可能會被瀏覽器緩存，這可能會導致一些不可預知的問題。一般情況下 GET 請求只能通過查詢字符串的方式向服務端發(fā)送數(shù)據(jù)。

POST 方法通常用于在服務端上執(zhí)行一些破壞性的操作（就是說，會修改服務端上的數(shù)據(jù)）。例如，當你發(fā)表一篇博客的時候，用的應該就是 POST 請求。和 GET 請求不一樣，POST 請求不存在緩存問題。POST 請求中，查詢字符串作為 URL 的一部分也能向服務端提交數(shù)據(jù)，但不推薦這種方法，所有數(shù)據(jù)應該跟 URL 分開單獨發(fā)送。

數(shù)據(jù)類型，jQuery 通常要求指明服務端返回的數(shù)據(jù)類型，某些情況寫數(shù)據(jù)類型可能已經包含在方法名稱中了，如 $.getJSON()，除此之外，它都會被作為一個可配置的對象的一部分，該對象最終會作為 $.ajax() 方法的參數(shù)。數(shù)據(jù)類型通常有以下幾種：

•     text ：純文本，用于傳輸簡單的字符串。
•     html ：用于傳輸一段 HTML。
•     script ：向頁面中添加腳本。
•     json ：傳輸已格式化的 JSON 對象，它可以包含字符串、數(shù)組或對象。
•     jsonp ：用于傳輸從其他域下返回的 JSON 數(shù)據(jù)。
•     xml ：用于傳輸自定義的 XML 格式數(shù)據(jù)。

異步執(zhí)行，Ajax 中的 A 指的是異步（Asynchronous）。說到這里可能很多 jQuery 初學者一下子很難理解什么叫異步，因為默認情況下 Ajax 請求就是異步的，服務端返回的信息并非馬上就能獲取到。所有服務端返回的信息只能在一個回調函數(shù)中處理。例如以下這段代碼，是錯誤的：

var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // undefined!

正確的做法應該是在回調函數(shù)中處理服務端返回的數(shù)據(jù)，回調函數(shù)在 Ajax 請求成功完成時才被執(zhí)行，這個時候才能獲取到來自服務端的數(shù)據(jù)：

$.get('foo.php', function(response) { console.log(response); });

同源策略及 JSONP，前面已經說過，一般情況下 Ajax 的請求會被限制在相同協(xié)議（http 或 https）、相同端口、相同域名下才能正確執(zhí)行，但是 HTML 的 <script> 標簽卻無此限制，它可以載入任何域下的腳本，jQuery 正是利用了這一點才得以擁有跨域執(zhí)行 Ajax 的能力。

所謂 JSONP，就是其它域的服務端返回給我們的是 JavaScript 代碼，這段代碼可以被加載到 HTML 中的 <script> 標簽中，這段 JavaScript 代碼中包含有從其它域下的服務端返回的 JSON 數(shù)據(jù)，并以回調函數(shù)的形式提供。這樣一來 jQuery 就回避了同源策略的限制，曲線擁有了跨域執(zhí)行 Ajax 的能力。

Ajax 調試工具，現(xiàn)在比較新的瀏覽器如 Chrome 和 Safari，甚至 IE 都內置了調試工具，F(xiàn)irefox 也有無比強大 FireBug 插件，借助于這些調試工具，可以非常詳細的查看 Ajax 的執(zhí)行過程。
和 Ajax 相關的一些方法

jQuery 提供了好多種簡便的 Ajax 方法，但是它們的核心都是 $.ajax，所以必須正確理解 $.ajax。

jQuery 的 $.ajax 是創(chuàng)建 Ajax 請求中最直接也是最有效的方法，它的參數(shù)是一個 JavaScript 對象，我們可以在這個對象中對 Ajax 作非常詳細的配置。另外，$.ajax 方法還可以分別定義 Ajax 請求成功和失敗時的回調函數(shù)；而且它以一個可配置的對象作為參數(shù)的特性，使得我們可以在 Ajax 方法外配置這個對象，然后再傳進來，這非常有助于實現(xiàn)代碼復用。關于這個方法的詳細文檔：http://api.jquery.com/jQuery.ajax/

一個典型的示例如下：

$.ajax({
  // 要請求的 URL
  url : 'post.php',

  // 要發(fā)給服務端的數(shù)據(jù)
  // （將會轉化為查詢字符串，如：?id=123）
  data : { id : 123 },

  // 定義此 Ajax 請求是 POST 還是 GET
  type : 'GET',

  // 服務端返回的數(shù)據(jù)類型
  dataType : 'json',

  // Ajax 成功執(zhí)行時的回調函數(shù)；
  // 回調函數(shù)的參數(shù)即為服務端返回的數(shù)據(jù)
  success : function(json) {
    $('<h1/>').text(json.title).appendTo('body');
    $('<div class="content"/>')
      .html(json.html).appendTo('body');
  },

  // 如果 Ajax 執(zhí)行失?。?
  // 將返回原始錯誤信息以及狀態(tài)碼
  // 傳入這個回調函數(shù)中
  error : function(xhr, status) {
    alert('Sorry, there was a problem!');
  },

  // 這里是無論 Ajax 是否成功執(zhí)行都會觸發(fā)的回調函數(shù)
  complete : function(xhr, status) {
    alert('The request is complete!');
  }
});

    備注：

    關于 dataType ：如果這里定義的 dataType 跟服務端返回的數(shù)據(jù)格式不一樣，我們的代碼就可能會執(zhí)行失敗，并且很難查出原因，因為 HTTP 返回的狀態(tài)碼并沒有顯示出錯。所以在執(zhí)行 Ajax 請求的時候，一定要確保服務端返回的數(shù)據(jù)格式跟事先定義定義的一致。通常情況下驗證 HTTP 頭信息中的 Content-type 是行之有效的辦法，對于 JSON 而言，對應的 Content-type 應該是 application/json。

$.ajax 的一些自定義選項

$.ajax 方法的自定義選項非常多，這也是此方法功能強大的原因所在。若要查閱所有自定義選項，可參考官方文檔：http://api.jquery.com/jQuery.ajax/，下面只列出一些常用的選項：

    async ：默認值是 true，如果需要 Ajax 的執(zhí)行方式為同步，可將其設為 false。請注意，如果把這個值設為 false 了，那么你的其它 JavaScript 代碼將會被中斷執(zhí)行，直到此次 Ajax 請求完畢，接受到服務端返回的數(shù)據(jù)為止才會恢復。所以，請慎用此選項。
    cache ：設定是否緩存服務端發(fā)回的數(shù)據(jù)。對于 “script” 和 “jsonp” 之外的其它格式的數(shù)據(jù)而言，默認值是 true。如果被設置為 false，向服務器發(fā)送請求的時候，URL 中會被加入一個查詢字符串，字符串的值是當前的時間戳，以確保每次請求的 URL 都是不同的，當然也就不存在緩存問題了。JavaScript 中獲取時間戳的方法為 new Date().getTime()。
    complete ：Ajax 請求執(zhí)行完成時觸發(fā)的回調函數(shù)，無論此次執(zhí)行成功與否，該回調函數(shù)都會被觸發(fā)。該回調函數(shù)可以接受服務端返回的原始信息及狀態(tài)碼。
    context ：定義回調函數(shù)執(zhí)行時的作用域（回調函數(shù) function(s) {alert(this)} 中的 this 指向誰？）。默認情況下，回調函數(shù)中的 this 指向傳遞給 $.ajax 方法的參數(shù)，也就是那個大對象。
    data ：要發(fā)送給服務端的數(shù)據(jù)，其值可以是一個對象或者查詢字符串，如 foo=bar&baz=bim。
    dataType ：服務端返回數(shù)據(jù)的類型。如果不設置這個選項，jQuery 會根據(jù)服務端返回數(shù)據(jù)的 MIME 類型自行判斷。
    error ：當 Ajax 執(zhí)行錯誤時將會觸發(fā)的回調函數(shù)，該函數(shù)接受原始的請求信息及狀態(tài)碼。
    jsonp ：執(zhí)行 JSONP 請求時需要制定的回調函數(shù)名稱，默認值是“callback”。
    success ：Ajax 成功執(zhí)行時將會觸發(fā)的回調函數(shù)。在函數(shù)中可獲取服務端返回的信息（如果 dataType 被設置成 JSON，返回的數(shù)據(jù)應該是一個 JavaScript 對象），當然也可獲取服務端返回的原始數(shù)據(jù)信息及狀態(tài)碼。
    timeout ：給 Ajax 請求設置一個超時是時間，單位是毫秒。
    type ：指定請求的方式，GET 或者 POST，默認值是 GET。其它如 PUT 和 DELETE 方式也可以用，但并不是所有瀏覽器都支持。
    url ：要請求的 URL。

其中 url 選項是所有選項中唯一的一個必選項，其它選項都是可選的。
一些簡便方法

如果你不需要那么多可配置的選項，也不關心 Ajax 執(zhí)行錯誤時候的相關處理，jQuery 同樣提供了一些非常有用的簡便方法，以更簡潔的方式完成 Ajax 請求。其實這些簡便寫法只是封裝了 $.ajax，并把某些選項預先設定好。

jQuery 提供的簡便方法如下：

•     $.get ：對給定的 URL 執(zhí)行 GET 請求。
•     $.post ：對給定的 URL 執(zhí)行 POST 請求。
•     $.getScript ：向頁面中添加腳本。
•     $.getJSON ：執(zhí)行一個 GET 請求，服務端返回的信息應為 JSON。

以上每種簡便方法中都可傳遞如下參數(shù)：

    url ：所請求的 URL，必須提供。
    data ：向服務端發(fā)送的數(shù)據(jù)，可選?？梢允且粋€對象，亦或查詢字符串，如 foo=bar&baz=bim。

•         備注：此選項不適用于 $.getScript。

    一個回調函數(shù) ：此回調函數(shù)在請求成功執(zhí)行后被觸發(fā)?？蛇x。該回調函數(shù)接受服務端返回的數(shù)據(jù)，也包括請求的狀態(tài)碼及原始對象。
    數(shù)據(jù)類型 ：服務端返回數(shù)據(jù)的類型?？蛇x。

•         備注：此選項只適用于那些在其名稱中沒指定數(shù)據(jù)類型的方法。

下面是三個簡便方法的示例：

// 獲取純文本或者 html
$.get('/users.php', { userId : 1234 }, function(resp) {
  console.log(resp);
});

// 向頁面中添加腳本，然后執(zhí)行腳本中定義的函數(shù)。
$.getScript('/static/js/myScript.js', function() {
  functionFromMyScript();
});

// 從服務端獲取 JSON 格式的數(shù)據(jù)。
$.getJSON('/details.php', function(resp) {
  $.each(resp, function(k, v) {
    console.log(k + ' : ' + v);
  });
});

$.fn.load

$.fn.load 方法是 jQuery 所有 Ajax 方法中唯一在選擇器結果集上調用的方法。$.fn.load 方法從給定的 URL 上獲取信息，然后填充到選擇器結果集包含的元素中。另外，在 URL 后面還可以附加一些選擇器，jQuery 最終只會把跟選擇器相匹配的內容填充到對應的 HTML 元素中。

下面是示例：

$('#newContent').load('/foo.html');

// 或
$('#newContent').load('/foo.html #myDiv h1:first', function(html) {
 alert('加載完畢！');
});

Ajax 和 表單

在跟表單打交道方面，jQuery 的 Ajax 更顯神威。最為有用的兩個方法就是 $.fn.serialize 和 $.fn.serializeArray，下面是它們的用法：

// 將表單中數(shù)據(jù)轉化為查詢字符串
$('#myForm').serialize();

$('#myForm').serializeArray();
// 將表單中數(shù)據(jù)轉化為對象數(shù)組，如：
[
  { name : 'field1', value : 123 },
  { name : 'field2', value : 'hello world' }
]

使用 JSONP

JSON 的本質其實是一種跨站點腳本注入。現(xiàn)在有很多比較好的網站都提供了 JSONP 服務，允許我們用他們預先定義好的 API 獲取他們的數(shù)據(jù)。下面是一個示例，來源于 http://www.giantflyingsaucer.com/blog/?p=2682

服務端代碼：

<?php
  header("content-type: text/javascript");

  if(isset($_GET['name']) && isset($_GET['callback'])) {
    $obj->name = $_GET['name'];
    $obj->message = "Hello " . $obj->name;

    echo $_GET['callback']. '(' . json_encode($obj) . ');';
  }
?>

客戶端代碼：

$.ajax({
  url: 'http://otherDomail.com:8080/JSONP/jsonp-demo.php',
  data: {name: 'Super man'},
  dataType: 'jsonp',
  jsonp: 'callback',
  success: function( response ) {
    console.log( response.message );
  }
});

jQuery 把 JSONP 的實現(xiàn)細節(jié)隱藏在幕后，我們要做的就是告訴 jQuery 服務端定義好的函數(shù)名以及我們請求的數(shù)據(jù)類型是 JSONP，其它方面和普通的 Ajax 請求沒什么區(qū)別。
Ajax 事件

很多時候我們都需要在 Ajax 請求開始或結束時做一些操作，例如顯示或隱藏一個 loading… 圖片。這些工作本可以在每個 Ajax 請求中各自實現(xiàn)，但是 jQuery 提供了更好的方法，你可以像綁定普通事件一樣綁定 Ajax 事件。若要參閱全部事件列表，可訪問 http://docs.jquery.com/Ajax_Events。下面是簡單示例：

$('#loading_indicator')
  .ajaxStart(function() { $(this).show(); })
  .ajaxStop(function() { $(this).hide(); });

最新評論