【譯】jquery基礎教程（jquery fundamentals）——(第七部分)Jquery Ajax

 

Jquery 基礎教程

                                           作者Rebecca Murphey

                                           原文連結地址http://jqfundamentals.com/

With contributions by James Padolsey, Paul Irish, and others. See the GitHub repository for a complete history of contributions.

Copyright 2011 

 

 

Jquery  Ajax 一、概述

    XMLHttpRequest方法允許瀏覽器和伺服器進行交流，而無需通過整個頁面的重載。這種方法就是大家熟知的Ajax（Asynchronous Javascript and XML），它提供了豐富的使用者互動體驗的web頁面。

    Ajax請求通過javascript代碼來觸發；你打代碼給一個URL地址發送一個請求，然後當它接收到了一個響應之後，一個回呼函數就會被觸發來處理這個請求。由於請求時非同步，所以當請求被處理的時候，你的其餘的代碼仍然在繼續執行，這個時候，被用來處理響應的回呼函數就顯的很重要了。

    jquery提供了ajax的支援，它抽象了很多方法來處理瀏覽器不同的問題。它同時提供了一個包含全部特新的方法$.ajax和一些便捷打簡單方法，例如$.get(),$.getScript(),$.getJSON,$.post(),和$().load().

    儘管名字為ajax，可 大多數的jquery應用並沒有用到XML；相反，它們通過普通的HTML或者JSON（JAvascript Object Notation）來傳遞資料。

     通常來說，ajax並不支援跨域的工作。例外的是，提供了JSONP（JSON with Padding）支援，它允許有限制的跨域特性。

二、關鍵概念

     為了更好的使用jquery中ajax相關的方法，首先需要瞭解一些關鍵的概念。

• Get和Post

     Get和Post是兩個用來給伺服器發送請求常用的方法。瞭解每個方法合適的應用場合是很重要的。

     Get方法一般用於無損的操作——也就是說你僅僅是從伺服器獲得資料，而不是改變伺服器上的資料。例如，一個搜尋服務的查詢就是一個Get請求。Get請求可以被瀏覽器緩衝，所以如果你不知道它的特性就會出現一個出乎意料的事情。Get請求一般通過一個查詢字串來發送所有資料。

     Post一般用於有損操作——也就是說你改變伺服器上的資料的操作。例如，一個使用者儲存部落格的隨筆就是一個Post請求。Post請求一般不被瀏覽器緩衝；查詢字串可以是URL的一部分，不過資料一般作為post資料來發送。

• 資料類型

    jquery一般需要一些指令作為你從一個ajax請求獲得的資料的類型；在某些情況下，資料類型時候方法的名字規定的，在另一些情況下，它通過設定物件的一部分來規定。下面是一些具體的細節：

text

    用來傳輸簡單的字串

html

    用來傳輸html語句塊，並放到頁面上

script

    給頁面添加一些新的script

json

    用來傳輸json形式的資料，他可以包含字串，數組，物件類型。

註解：

在jquery1.4中，如果你的伺服器返回json形式的資料有誤，請求就會失敗。可以訪問http://json.org來瞭解正確的json形式的資料，但通常來講，還是應該在伺服器上用語言內建的方法來產生json以避免語法錯誤。

jsonp

   用來從另一個應用程式定義域傳輸資料。

xml

   用定製的xml格式傳輸資料

 

   我在大多數的情況先是用json格式傳輸資料的擁護者，因為它的靈活性很棒。尤其是在同時傳送html和資料的時候。

• A代表非同步

     ajax中的非同步是許多jquery的新使用者放鬆了警惕。因為ajax調用預設是非同步，響應並不會立即生效。響應只能通過一個回呼函數來進行處理。所以例如下面的代碼就不會工作：

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

     同時，也需要向我們的回呼函數傳遞一個請求；這個回呼函數會在請求成功後執行，在那是，我們才能夠訪問它返回的值。

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

• 相同原點策略和jsonp（Same-Origin Policy and JSONP）

    通常來講，ajax請求被限定到了和頁面請求相同的協議（http或者https），相同的連接埠，相同的域 。這種限制對通過jquery的ajax方法載入的指令碼沒有作用。

    另一個例外是面向在jsonp服務的另一個域的請求。在jsonp中，服務的提供者允許回應你通過<script>指令碼載入到頁面中的請求，通過這種方法來規避相同原點策略；那個指令碼會包含你所請求的並且包裹在你提供的回呼函數中的資料，

• ajax和Firebug

    firebug對於開發ajax請求非常重要。在ajax請求發生的時候，你可以在Firebug  的Console欄中

看到它們，你可以點擊一個請求展開它，看一看它的細節，例如要求標頭，回應標頭，響應內容，還有更多。如果ajax請求沒有達到你的預期效果，這你第一個應該追蹤的地方，來尋找那裡出錯了。

三、jquery的ajax相關方法

    雖然jquery提供了許多方便的ajax相關的方法，但是核心的$.ajax方法總體來說是最重要的，所要對於它的掌握是非常必要的。我們先回顧下這個方法，然後對其他的方法做個簡略的描述。

     我大多的時候都在用$.ajax方法，而不是用那些小方法。就像你看到的那樣，它提供了很多那些小方法所不具有的特性，同時我覺著它的文法也易於理解。

    $.ajax

  jquery的核心$.ajax方法是一個強大和直接的建立ajax請求的方法。它接收一個包含所有jquery需要完成請求的說明資訊的對象。$.ajax一般情況下都是有值得，因為它在回調成功或者失敗的都會給出確認的。同時，它接收能夠被單獨定義的設定物件的特性，也為代碼重用提供了很好的基礎。想要進一步的來瞭解配置資訊，請訪問http://api.jquery.com/jQuery.ajax/.

     例7.1：核心$.ajax的運用

$.ajax({    // the URL for the request    url : 'post.php',    // the data to send    // (will be converted to a query string)    data : { id : 123 },    // whether this is a POST or GET request    type : 'GET',    // the type of data we expect back    dataType : 'json',    // code to run if the request succeeds;    // the response is passed to the function    success : function(json) {        $('<h1/>').text(json.title).appendTo('body');        $('<div class="content"/>')            .html(json.html).appendTo('body');    },    // code to run if the request fails;    // the raw request and status codes are    // passed to the function    error : function(xhr, status) {        alert('Sorry, there was a problem!');    },    // code to run regardless of success or failure    complete : function(xhr, status) {        alert('The request is complete!');    }});

註解：

關於資料類型設定的記錄：如果伺服器返回的資料形式與你所期望的不同，你的代碼就會失敗，而原因有時候會令人很費解，因為http響應代碼並不會報錯。當你進行ajax請求工作的時候，一定要確保你的伺服器會返回你所期望的值，並且確定Content—type頭對於資料類型是精確的。例如，對於json資料，Content-type頭是application/json。

   $.ajax 的可選項

     對於$.ajax方法有許多的可選項，這就是它的強大之處。想要獲得一個完全的可選項列表，請訪問http://api.jquery.com/jQuery.ajax/;下面是幾個常用的：

  async

    如果請求時同步發出的把它設定為false.預設情況下市true。注意，如果你把這個選項設定為false，你的請求會阻塞其他代碼的執行，直到響應返回被接受。

cache

     在允許的情況下確定是否用被緩衝的響應。預設情況下對於除了“script”和“jsonp”之外的所有的其他資料類型是true，當被設定為false的時候，url會有個簡單的緩衝附加到它的上面。

complete

    無論成功還是失敗，當請求結束的時候回呼函數開始運行。這個函數接收未加工的請求對象和請求的文本狀態。

context

     在回呼函數啟動並執行域內（也即是當this指的時候函數回呼函數內部的時候）。預設情況下，回呼函數內部的this指向最初傳遞給$.ajax的對象。

data

    即將被傳遞到伺服器的資料。它既可以是一個對象也可以是一個查詢字串。例如foo=bar&baz=bim

dataType

    你期望從伺服器返回的資料類型。預設情況下，如果dataType沒有被指定，jquery會參照響應的MIME類型。

error

    如果請求結果是一個錯誤，回呼函數就會執行。這個函數接收未加工的請求對象和請求的文本狀態。

jsonp

     當你進行一個jsonp請求的時候，回呼函數的名字被封裝到一個查詢字串中進行傳送。預設是“callback”。

success

   如果請求成功了，回呼函數就會執行。這個函數接收響應資料（如果資料類型是json，則把它強制轉換成一個javascript對象），同時也接受請求的文本狀態和未加工的請求對象。

timeout

     在認為請求失敗之前所等待的時間的毫秒錶示形式。
traditional

    在使用的jquery1.4版本之前，將它設定為true來使用參數的序列化。細節請看：http://api.jquery.com/jQuery.param/.

type

     請求的類型，“post”或者“get”。預設是“get”。其他請求類型，例如“put”和“delete”也可以。但是並不是所有瀏覽器都支援它們。

url

    請求的url

     url這個選項是唯一一個在$.ajax設定物件中的必須屬性；其他的都是可選的。

便利的小方法

     如果你不喜歡用可配置的$.ajax,也大可不必擔心，jquery提供的ajax便利小方法在實現ajax請求的時候也是一個利器。這些方法圍繞個核心的$.ajax方法來實現的，並且簡單的設定了一下$.ajax方法的可選項。

如下：

$.get

      提供一個Get請求給提供的url

$.post

    提供一個POST請求給提供的url

$.getScript

   給頁面添加一段指令碼

$.getJSON

   提供一個GET請求，並期望返回一個json類型的資料。

 

   在每種情況下，方法都會接受如下參數：

  URL 

          請求的URL地址——必須的

Data

         傳遞給伺服器的資料——可選。它既可以是一個對象也可以是一個查詢字串。例如foo=bar&baz=bim。

註解：

這個選項不適用與$.geScirpt.

success callback

     如果請求成功了發生的回呼函數——可選。這個函數接收響應資料（如果資料類型是json，則把它強制轉換成一個javascript對象），同時也接受請求的文本狀態和未加工的請求對象。

datatype

     你希望從伺服器返回資料的類型——可以選。

註解：

這個選項只適用於那些從名字上無法確認資料類型的方法。

例7.2：用小方法的jquery的ajax

// get plain text or html$.get('/users.php', { userId : 1234 }, function(resp) {    console.log(resp);});// add a script to the page, then run a function defined in it$.getScript('/static/js/myScript.js', function() {    functionFromMyScript();});// get JSON-formatted data from the server$.getJSON('/details.php', function(resp) {    $.each(resp, function(k, v) {        console.log(k + ' : ' + v);    });});

 

$.fn.load

   $.fn.load 方法在jquery的ajax方法中是獨一無二的——它被一個選擇結果來調用。$.fn.load方法從一個url獲得html，然後用得到的html來構建被選中的元素。除了提供一個url給方法外，你也可以選擇性的提供一個選取器；jqueyr會從返回的html中尋找匹配的的內容。

例7.3：用$.fn.load構建元素

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

例7.4：用$.fn.load 構建基於選取器的元素

$('#newContent').load('/foo.html #myDiv h1:first', function(html) {  alert('Content updated!');});

四、ajax和表單

     在處理表單問題的時候，jquery的ajax能力得到了很好的發揮。jquery表單外掛程式（jQuery Form Plugin）對於給表單添加ajax能力有很好的支援，所以你應該儘可能的用這個外掛程式而不是去重複的造輪子。但是簡單的兩個jquery方法你還是應該掌握的：$.fn.serialize和$.fn.serializeArray

例7.5：將資料轉換成一個查詢字串

$('#myForm').serialize();

例7.6：建立一個對象數組來包含表單資料

$('#myForm').serializeArray();// creates a structure like this:[    { name : 'field1', value : 123 },    { name : 'field2', value : 'hello world' }]

五、運用jsonp

    jsonp的出現——本質上是一個相關瞭解的誇張指令碼駭客——為強有力的內容傳輸提供了支援。許多知名的網站都提供jsonp服務，允許你通過一個api來訪問它們的內容。Yahoo! Query 是一個廣受歡迎的jsonp形式資料的代碼，下面例子我們就會用它來獲得關於貓的新聞。

裡7.7：運用YQL和JSONP

$.ajax({    url : 'http://query.yahooapis.com/v1/public/yql',    // the name of the callback parameter,    // as specified by the YQL service    jsonp : 'callback',    // tell jQuery we're expecting JSONP    dataType : 'jsonp',    // tell YQL what we want and that we want JSON    data : {        q : 'select title,abstract,url from search.news where query="cat"',        format : 'json'    },    // work with the response    success : function(response) {        console.log(response);    }});

    jquery在幕後處理是jsonp的所有複雜操作——我們需要做的就是告訴jquery被YQL確定參數的jsonp回呼函數的名字，因而整個過程開起來就像一個普通的ajax請求一樣。

六、ajax事件

    無論一個ajax請求的開始還是結束，我們經常會想要執行一個特定的操作，例如展示或者隱藏一個登入指標。這個時候，你可以綁定一個ajax事件到元素上，就像綁定其他事件一樣，而不是為每個ajax請求內部定義一個行為。想要進一步瞭解ajax事件，請訪問：http://docs.jquery.com/Ajax_Events.

例7.8：用ajax事件啟動一個登入指標。

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

七、練習

   (略)