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