第6章 jQuery與Ajax的應用

jQuery對Ajax操作進行了封裝，在jQuery中$.ajax()方法屬于最底層的方法，第2層是load()、$.get()和$.post()方法，第3層是$.getScript()和$.getJSON()方法。

1、load()方法

（1）載入HTML文檔

load()方法是jQuery中最簡單和常用的Ajax方法，能載入遠程HTML代碼并插入DOM中。它的結構為：

load(url [, data] [, callback])

?????? 參數說明：

?????? url：請求HTML頁面的URL地址；

?????? data（可選）：發送至服務器的key/value數據，Object類型；

?????? callback（可選）：請求完成時的回調函數，無論請求成功或失敗。?

（2）篩選載入的HTML文檔

通過為URL參數指定選擇符，可以很方便地從加載過來的HTML文檔里篩選出所需要的內容。load()方法的URL參數的語法結構為：?”url selector”?。注意，URL和選擇器之間有一個空格。

（3）傳遞方式

load()方法的傳遞方式根據參數data來自動指定。如果沒有參數傳遞，則采用GET方式傳遞；反之，則會自動轉換為POST方式。

（4）回調函數

對于必須在加載完成后才能繼續的操作，load()方法提供了回調函數（callback），該函數有3個參數，分別代表請求返回的內容、請求狀態和XMLHttpRequest對象。

2、$.get()方法和$.post()方法?

load()方法通常用來從Web服務器上獲取靜態的數據文件。在項目中，如果需要傳遞一些參數給服務器中的頁面，那么可以使用$.get()或者$.post()方法（或者是$.ajax()方法）。

?

$.get()方法使用GET方式來進行異步請求。它的結構為：

$.get(url [, data] [, callback] [, type])

?????? 參數說明：

url:請求的HTML頁的的URL地址

data:發送至服務器的 key/value 數據會作為QueryString附加到請求url中。

callback:載入成功時回調函數。

type:服務器端返回內容格式，包括xml, html, script, json, text, _default。

?

?????? 如果服務器端接收到傳遞的data數據并成功返回，那么就可以通過回調函數將返回的數據顯示到頁面上。

?????? $.get()方法的回調函數只有兩個參數，代碼如下：

?????? function (data, textStatus){

????????????? //data??? 返回的內容，可以是XML文檔、JSON文件、HTML片段等等

????????????? //textStatus???? 請求狀態：success、error、notmodified、timeout 4種

?????? }

?????? 在不需要與其他應用程序共享數據的時候，使用HTML片段來提供返回數據一般來說是最簡單的；如果數據需要重用，那么JSON文件是不錯的選擇，它在性能和文件大小方面具有優勢；而當遠程應用程序未知時i，XML文檔是明智的選擇，它是Web服務域的“世界語”。

?

?????? $.post()方法和$.get()方法的結構和使用方式相同，不過它們之間仍有些區別。

?

3、$.getScript()方法和$.getJson()方法

?????? jQuery提供了$. getScript()方法來直接加載.js文件。

?????? $.getJSON()方法用于加載JSON文件。

4、$.ajax()方法

?????? $.ajax()方法是jQuery最底層的Ajax實現。

????? 它的結構為：

????????????? $.ajax(options)

?????? 該方法只有1個參數，但在這個對象里包含了$.ajax()方法所需要的請求設置以及回調函數等信息，參數key/value的形式存在，所有參數都是可選的。

5、序列化元素

serialize()方法作用于一個jQuery對象，它能夠將DOM元素內容序列化為字符串，用于Ajax請求。

serializeArray()方法也作用于一個jQuery對象，不同的是，它是將DOM元素序列化后，返回JSON格式的數據，然后可以使用$.each()函數對數據進行迭代輸出。

$.param()方法用來對一個數組或對象按照key/value進行序列化。

6、jQuery中的Ajax全局事件

• ajaxComplete(callback) ?Ajax請求完成時執行的函數；
• ajaxError(callback) ?Ajax請求發生錯誤時執行的函數，捕捉到的錯誤可以作為最后一個參數傳遞；
• ajaxSend(callback) ?Ajax請求發送前執行的函數；
• ajaxStart(callback) ?Ajax請求開始時執行的函數；
• ajaxStop(callback) ?Ajax請求結束時執行的函數；
• ajaxSuccess(callback) ?Ajax請求成功時執行的函數。

這些方法都是全局的方法，因此無論創建它們的代碼位于何處，只要有Ajax請求發生，就會觸發它們。

?

轉載于:https://www.cnblogs.com/ww03/p/5349018.html

總結

以上是生活随笔為你收集整理的jQuery与Ajax的应用——《锋利的jQuery》（第2版）读书笔记3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。