第6章 jQuery與Ajax的應(yīng)用

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

1、load()方法

（1）載入HTML文檔

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

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

?????? 參數(shù)說明：

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

?????? data（可選）：發(fā)送至服務(wù)器的key/value數(shù)據(jù)，Object類型；

?????? callback（可選）：請求完成時的回調(diào)函數(shù)，無論請求成功或失敗。?

（2）篩選載入的HTML文檔

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

（3）傳遞方式

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

（4）回調(diào)函數(shù)

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

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

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

?

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

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

?????? 參數(shù)說明：

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

data:發(fā)送至服務(wù)器的 key/value 數(shù)據(jù)會作為QueryString附加到請求url中。

callback:載入成功時回調(diào)函數(shù)。

type:服務(wù)器端返回內(nèi)容格式，包括xml, html, script, json, text, _default。

?

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

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

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

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

????????????? //textStatus???? 請求狀態(tài)：success、error、notmodified、timeout 4種

?????? }

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

?

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

?

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

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

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

4、$.ajax()方法

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

????? 它的結(jié)構(gòu)為：

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

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

5、序列化元素

serialize()方法作用于一個jQuery對象，它能夠?qū)OM元素內(nèi)容序列化為字符串，用于Ajax請求。

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

$.param()方法用來對一個數(shù)組或?qū)ο蟀凑誯ey/value進行序列化。

6、jQuery中的Ajax全局事件

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

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/ww03/p/5349018.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。