從這章開始，我們將開始講解jQuery的AJAX相關(guān)的內(nèi)容，首先需要大家自己先百度google了解下AJAX的原理，然后再來看這里的內(nèi)容，就輕松很多了。
基本方法使用
jQuery 提供了很多AJAX方法，這里主要用到以下兩個方法：
1.$.ajax(settings)：
它是一個底層方法，可以幫助我們創(chuàng)建各種類型的AJAX請求。該方法可以自定義設(shè)置多種參數(shù)類型以供AJAX調(diào)用，如可以設(shè)置HTTP請求(GET/POST)，訪問的URL，請求類型(html,json等)，成功或失敗的回調(diào)函數(shù)等。
2.$.ajaxSetup(options)：
該方法幫助我們設(shè)置頁面請求AJAX的默認(rèn)參數(shù)值，只要設(shè)置一次，其他請求AJAX都可以使用這個默認(rèn)參數(shù)值,相當(dāng)于設(shè)置全局變量。
通過下面的例子可以基本掌握以上兩個方法的使用，該例子通過jQuery AJAX方法請求Content.hml頁面，返回該頁面的內(nèi)容，并顯示在當(dāng)前請求頁面上，具體實現(xiàn)細(xì)節(jié)如下：
首先創(chuàng)建一個Content.htm頁面文件，代碼如下：
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
>
軟件書籍目錄清單
</
title
>
<
style
type
="text/css"
>
#tbooks
{
color
:
White
;
font-weight
:
bold
;
font-size
:
12pt
;
font-family
:
Arial, Sans-Serif
;
}
#tbooks tr
{
background-color
:
Gray
;
}
</
style
>
</
head
>
<
body
>
<
table
border
="0"
cellpadding
="3"
cellspacing
="3"
id
="tbooks"
>
<
tr
>
<
td
>
你就是極客！
</
td
>
<
td
>
軟件開發(fā)人員生存指南
</
td
>
</
tr
>
<
tr
>
<
td
>
人件集
</
td
>
<
td
>
人性化的軟件開發(fā)
</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
再創(chuàng)建請求頁面Recipe22.aspx，頁面結(jié)構(gòu)代碼如下：
<
body
>
<
form
id
="form1"
runat
="server"
>
<
div
align
="center"
>
<
fieldset
style
="width: 400px; height: 100px;"
>
<
div
id
="contentArea"
>
<
asp:Button
ID
="btnLoadContent"
runat
="server"
Text
="加載軟件書籍目錄"
/>
</
div
>
</
fieldset
>
</
div
>
</
form
>
</
body
>
請求AJAX之前頁面顯示效果：
實現(xiàn)AJAX請求的腳本代碼如下：
<
script
type
="text/javascript"
>
$(
function
() {
//
通過ajaxSetup設(shè)置默認(rèn)值
$.ajaxSetup({
cache:
false
,
//
關(guān)閉緩存確保瀏覽器不會緩存當(dāng)前頁面內(nèi)容
dataType:
"
html
"
,
//
設(shè)置請求服務(wù)的返回數(shù)據(jù)類型，這里我們加載一個html文件
//
請求失敗時調(diào)用此函數(shù),該函數(shù)自帶三個參數(shù)，XMLHttpRequest對象，錯誤狀態(tài)和錯誤對象
error:
function
(xhr, status, error) {
alert(
"
當(dāng)前錯誤：
"
+
error);
},
timeout:
30000
,
//
設(shè)置請求超時時間（毫秒）
type:
"
GET
"
,
//
請求方式 ("POST" 或 "GET")
beforeSend:
function
() {
//
發(fā)送請求前可修改XMLHttpRequest對象的函數(shù)
console.log(
"
AJAX請求前觸發(fā)beforeSend事件
"
);
},
complete:
function
() {
//
請求完成后回調(diào)函數(shù) (請求成功或失敗之后均調(diào)用)
console.log(
"
AJAX請求完成后觸發(fā)complete事件
"
);
}
});
$(
"
#btnLoadContent
"
).click(
function
(e) {
e.preventDefault();
//
通過AJAX調(diào)用Content.htm頁面內(nèi)容
$.ajax({
url:
"
Content.htm
"
,
//
發(fā)送請求的地址
//
定義一個返回成功的函數(shù)，data參數(shù)表示從服務(wù)器返回的數(shù)據(jù)
success:
function
(data) {
//
這里返回了Content.htm頁面的元素內(nèi)容，
//
如果不太清楚data到底傳的是什么內(nèi)容，待會兒講解調(diào)試的時候，會看到data的真實值
$(
"
#contentArea
"
).html(
""
).html(data);
}
});
});
});
</
script
>
請求AJAX之后頁面顯示效果：
調(diào)試技巧
接下來，我們再來看下如何調(diào)試上面的例子。現(xiàn)在很多瀏覽器都有自己的調(diào)試工具，來調(diào)試html,css,javascript代碼。例如現(xiàn)在IE8以上的版本，可以通過 F12 調(diào)出開發(fā)者工具來調(diào)試，Chrome瀏覽器也同樣可以通過 Control+Shift+I 調(diào)出開發(fā)者工具，然后這里我將介紹一個我經(jīng)常用到的調(diào)試工具，就是FireFox瀏覽器的Firebug調(diào)試工具插件。
首先下載并安裝該插件，訪問地址：http://getfirebug.com.
然后通過FireFox瀏覽器運行Recipe22.aspx，并通過F12調(diào)出Firebug，如下圖：
現(xiàn)在我們就可以通過Firebug一步一步來跟蹤AJAX的請求/返回。
1.點擊加載軟件書籍目錄按鈕，結(jié)果會加載顯示訪問頁面的內(nèi)容。
2.點擊Firebug窗口的 控制臺分頁 ，這個窗口會顯示AJAX事件beforeSend和complete定義的函數(shù)里面控制臺執(zhí)行l(wèi)og方法的代碼，而且還會顯示請求訪問的url.如下圖所示：
Firebug的控制臺支持以下的調(diào)用方法：
? console.log
? console.debug
? console.error
? console.info
? console.warning
3.更改$.ajaxSetup里面的complete事件定義的函數(shù)如下：
complete: function () { // 請求完成后回調(diào)函數(shù) (請求成功或失敗之后均調(diào)用)
console.log("AJAX請求完成后觸發(fā)complete事件--log消息");
console.debug("AJAX請求完成后觸發(fā)complete事件--debug消息");
console.error("AJAX請求完成后觸發(fā)complete事件--error消息");
console.info("AJAX請求完成后觸發(fā)complete事件--info消息");
console.warning("AJAX請求完成后觸發(fā)complete事件--warning消息");
}
再次跟蹤查看控制臺如下：
4.現(xiàn)在我們再來看下Firebug窗口的網(wǎng)絡(luò)分頁，這個頁面可以跟蹤查看網(wǎng)絡(luò)資源，如HTML,CSS,JS,XHR(XmlHttpRequest),圖片,Flash和媒體。現(xiàn)在我們點擊XHR子分頁欄，我們會看到URL,狀態(tài),域,請求數(shù)據(jù)大小,遠(yuǎn)程IP和請求時間。
同時打開URL，還可以看到對應(yīng)的子項目內(nèi)容:
參數(shù)
：訪問URL的鍵值參數(shù)
（注意：
_
1329150564101是$.ajax方法默認(rèn)添加的參數(shù)，
用來控制瀏覽器緩存。每一次請求，$.ajax方法都會生成一個新的默認(rèn)鍵值，保證每次用戶都是新的請求而且不需要緩存返回的內(nèi)容。）
頭信息 ：顯示請求/返回的頭信息。
響應(yīng) ：顯示AJAX請求返回的內(nèi)容，包括JSON，HTML，XML，TEXT和SCRIPT。
緩存 ：顯示緩存的一些細(xì)節(jié)。
HTML : 通過HTML顯示返回的內(nèi)容。
單擊響應(yīng)子分頁欄，將會顯示AJAX訪問Content.htm頁面返回的HTML內(nèi)容：
（注意：這里就是調(diào)用$.ajax方法success事件定義函數(shù)的data參數(shù)返回的內(nèi)容)
再來看下點擊HTML子分頁欄，將會通過HTML顯示AJAX請求返回的內(nèi)容：
好了，通過以上內(nèi)容的講解，相信你已經(jīng)對jQuery的AJAX使用有了基本的認(rèn)識，而且也學(xué)會了基本的調(diào)試技巧。
在后面的章節(jié)，將會介紹更多jQuery AJAX在ASP.NET中的使用方法。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
