1. 程式人生 > >jQuery——通過Ajax傳送資料

jQuery——通過Ajax傳送資料

Ajax(Asynchronous JavaScript and XML,非同步JavaScript和XML),一個Ajax解決方案涉及如下技術:

  1. JavaScript:處理與使用者及其他瀏覽器相關事件的互動,解釋來自伺服器的資料,並將其呈現在頁面上。
  2. XMLHttpRequest:這個物件可以在不中斷其他瀏覽器任務的情況下向伺服器傳送請求。
  3. 文字檔案:伺服器提供的XML、HTML或JSON格式的文字資料。

基於請求載入資料

Ajax是一種無需重新整理頁面即可從伺服器(或客戶端)上載入資料的手段。

Ajax應用程式通常只不過是一個針對HTML程式碼塊的請求。

操作JavaScript物件

(1)取得JSON
JavaScript物件是由一些“鍵-值”對組成的,而且還可以方便地使用花括號({})來定義。另一方面,JavaScript的陣列則可以使用方括號([])和隱式宣告的逐漸遞增的鍵進行動態定義。

JSON(JavaScript Object Notation,JavaScript物件表示法),通過這種表示法能夠方便地取代資料量龐大的XML格式:

{
  "key":"value",
  "key 2": [
      "array",
      "of",
      "items"
           ]
}

在物件字面量和陣列字面量的基礎上,JSON格式的語法具有很強的表達能力,但對其中的值也有一定的限制。如,JSON規定所有物件鍵以及所有字串值,都必須包含在雙引號中。而且,函式也不是有效的JSON值,所以開發人員最好不要手工編輯JSON,而應該用伺服器端語言來生成。

要取得JSON中的資料,可以使用.getJSON()方法,這個方法會在取得相應檔案後對檔案進行處理。在資料從伺服器返回後偶,它只是一個簡單的JSON格式的文字字串。$.getJSON()方法會解析這個字串,並將處理得到的JavaScript物件提供給呼叫程式碼。

(2)使用全域性jQuery函式
.getJSON()是作為全域性jQuery物件(由jQuery庫定義的jQuery或$物件)的方法定義的,也就是說,它不是個別jQuery物件例項(即通過$()函式建立的物件)的方法。

.getJSON()函式可以接受2個引數,這個引數是當載入完成時呼叫的函式。

Ajax請求都是非同步的,回撥函式提供了一種等待資料返回的方式,而不是立即執行程式碼。回撥函式也需要一個引數,該引數中儲存著返回的資料。

(3)執行指令碼
有時候,在頁面初次載入時就取得所需的全部JavaScript也是沒有必要的。具體需要取得哪個指令碼,要視使用者的操作而定。雖然可以在需要時動態地引入script標籤,但注入所需程式碼的更優雅的方式則是通過jQuery直接載入.js檔案。

向頁面中注入指令碼與載入HTML片段一樣簡單。但需要使用全域性函式$.getScript,這個全域性函式與它的同輩函式類似,接受一個URL引數以查詢指令碼檔案。

載入XML文件

通過$.get()函式載入XML文件,通常這個函式只是取得由URL指定的檔案,然後將純文字格式的資料提供給回撥函式。但是,在根據伺服器提供的MIME型別知道響應的是XML的情況下,提供給回撥函式的將是XML DOM樹。

遍歷XML文件的方式同HTML文件一樣,也可以使用.find()、.filter()及其他遍歷方法。

向伺服器傳遞資料

Ajax的價值只有當伺服器能夠基於瀏覽器的輸入動態 形成資料時才能得到充分體現。

執行GET請求

$.get()函式的物件來構建查詢查詢字串。

執行POST請求

使用POST方法與使用GET方法的HTTP請求你幾乎都是一樣的。從視覺上來看,它們之間一個最大的區別就是GET請求把引數放在URL一部分的查詢字串中,而POST請求則不是。

序列化表單

.serialize()方法,這個方法作用於一個jQuery物件,將匹配的DOM元素轉換成能夠隨Ajax請求傳遞的查詢字串。

為Ajax請求提供不同的內容

為了給沒有JavaScript使用者提供更好地體驗,可以有條件的載入包含html、head和body以及其他所有內容的完整的頁面。為此,就要利用jQuery隨同Ajax請求一起傳送的請求頭部。

關注請求

jQuery提供了一組函式,通過它們能夠為各種為Ajax相關的事件註冊回撥函式。

其中,.ajaxStart()和.ajaxStop()可以把它們新增給任何jQuery物件。當Ajax請求開始且尚未進行其他傳輸時,會觸發.ajaxStart()的回撥函式。相反,當最後一次活動請求終止時,則會執行通過.ajaxStop()註冊的回撥函式。

.ajaxError(),會向它們的回撥函式傳送一個隊XMLHttpRequest物件的引用。這樣就可以做到區別不同的請求來提供不同的行為。

錯誤處理

.status屬性中包含著伺服器返回的狀態碼,這些程式碼由HTTP規範定義,當觸發.fail()處理程式時,可以根據表解讀錯誤。

400——————請求語法錯誤
401——————未授權
403——————禁止訪問
404——————未發現請求的URL
500——————伺服器內部錯誤

安全限制

使用iframe這個標籤來載入遠端資料,可以為iframe元素指定任何URL作為其獲取資料的來源,包括與提供頁面的伺服器不匹配的URL。因此,第三方伺服器上的資料能夠輕易地載入到iframe中,並在當前頁面上顯示出來。然而,要操作iframe中的資料,仍然存在同使用script標籤時一樣的協作需求;位於iframe中的指令碼需要明確地向父文件中的物件提供資料。

使用JSONP載入遠端資料

使用script標籤從遠端獲取JavaScript檔案的思路,可以變通為從其他伺服器取得JSON檔案。

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

而且,由於有一對圓括號,因此返回的資料在客戶端可能會導致一次函式呼叫,或者是為某個變數賦值——取決於客戶端請求中傳送的填充字串。

其他工具

Ajax方法

使用低階的$.ajax()函式時,可以獲得下列特殊的好處:

避免瀏覽器快取來自伺服器的響應。非常適合伺服器動態生成資料的情況。
抑制正常情況下所有Ajax互動都可以觸發的全域性處理程式(例如$.ajaxStart()註冊的處理程式)。
在遠端主機需要認證的情況下,可以提供使用者名稱和密碼。

修改預設選項

使用$.ajaxSetup()函式可以修改呼叫Ajax方法時每個選項的預設值。這個函式與$.ajax()接受相同的選項物件引數,之後的所有Ajax請求都將使用傳遞給該函式的選項——除非明確覆蓋。

部分載入HTML頁面

要去掉頁面中多餘的內容,可以利用.load()的一些新特性——在指定要載入文件的URL時,也可以提供一個jQuery選擇符表示式。如果指定了這個表示式,.load()方法就會利用 它查詢載入文件的匹配部分。最終,只有匹配的部分才會被插入到頁面中。