從這章開始,我們將開始講解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之后頁面顯示效果:
調試技巧
接下來,我們再來看下如何調試上面的例子?,F在很多瀏覽器都有自己的調試工具,來調試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元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
