亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

ASP.NET jQuery 食譜22 (jQuery AJAX 基本方法

系統 2052 0

從這章開始,我們將開始講解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之前頁面顯示效果:

ASP.NET jQuery 食譜22 (jQuery AJAX 基本方法使用和調試技巧)_第1張圖片

實現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之后頁面顯示效果:

ASP.NET jQuery 食譜22 (jQuery AJAX 基本方法使用和調試技巧)_第2張圖片

調試技巧

接下來,我們再來看下如何調試上面的例子?,F在很多瀏覽器都有自己的調試工具,來調試html,css,javascript代碼。例如現在IE8以上的版本,可以通過 F12 調出開發者工具來調試,Chrome瀏覽器也同樣可以通過 Control+Shift+I 調出開發者工具,然后這里我將介紹一個我經常用到的調試工具,就是FireFox瀏覽器的Firebug調試工具插件。

首先下載并安裝該插件,訪問地址:http://getfirebug.com.

然后通過FireFox瀏覽器運行Recipe22.aspx,并通過F12調出Firebug,如下圖:

ASP.NET jQuery 食譜22 (jQuery AJAX 基本方法使用和調試技巧)_第3張圖片

現在我們就可以通過Firebug一步一步來跟蹤AJAX的請求/返回。

1.點擊加載軟件書籍目錄按鈕,結果會加載顯示訪問頁面的內容。

2.點擊Firebug窗口的 控制臺分頁 ,這個窗口會顯示AJAX事件beforeSend和complete定義的函數里面控制臺執行log方法的代碼,而且還會顯示請求訪問的url.如下圖所示:

ASP.NET jQuery 食譜22 (jQuery AJAX 基本方法使用和調試技巧)_第4張圖片

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消息");
}

再次跟蹤查看控制臺如下:

ASP.NET jQuery 食譜22 (jQuery AJAX 基本方法使用和調試技巧)_第5張圖片

4.現在我們再來看下Firebug窗口的網絡分頁,這個頁面可以跟蹤查看網絡資源,如HTML,CSS,JS,XHR(XmlHttpRequest),圖片,Flash和媒體。現在我們點擊XHR子分頁欄,我們會看到URL,狀態,域,請求數據大小,遠程IP和請求時間。

同時打開URL,還可以看到對應的子項目內容:

參數 :訪問URL的鍵值參數 (注意: _ 1329150564101是$.ajax方法默認添加的參數, 用來控制瀏覽器緩存。每一次請求,$.ajax方法都會生成一個新的默認鍵值,保證每次用戶都是新的請求而且不需要緩存返回的內容。)

頭信息 :顯示請求/返回的頭信息。

響應 :顯示AJAX請求返回的內容,包括JSON,HTML,XML,TEXT和SCRIPT。

緩存 :顯示緩存的一些細節。

HTML : 通過HTML顯示返回的內容。

ASP.NET jQuery 食譜22 (jQuery AJAX 基本方法使用和調試技巧)_第6張圖片

單擊響應子分頁欄,將會顯示AJAX訪問Content.htm頁面返回的HTML內容:

(注意:這里就是調用$.ajax方法success事件定義函數的data參數返回的內容)

ASP.NET jQuery 食譜22 (jQuery AJAX 基本方法使用和調試技巧)_第7張圖片

再來看下點擊HTML子分頁欄,將會通過HTML顯示AJAX請求返回的內容:

ASP.NET jQuery 食譜22 (jQuery AJAX 基本方法使用和調試技巧)_第8張圖片


好了,通過以上內容的講解,相信你已經對jQuery的AJAX使用有了基本的認識,而且也學會了基本的調試技巧。

在后面的章節,將會介紹更多jQuery AJAX在ASP.NET中的使用方法。





ASP.NET jQuery 食譜22 (jQuery AJAX 基本方法使用和調試技巧)


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦?。?!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 337p日本欧洲亚洲大胆艺术 | 国产中文在线观看 | 欧美激情二区 | 精品国产日韩久久亚洲 | 日本久久中文字幕精品 | 国产精品久久久久久影视 | 国产美女午夜精品福利视频 | 九九在线免费视频 | 国产亚洲欧美一区二区 | 中国欧美日韩一区二区三区 | 91视频亚洲 | 天天射天天干天天色 | 亚洲免费成人网 | 日产精品一二三四区国产 | 黄色日比视频 | 久久精品国产影库免费看 | 日本黄色不卡视频 | 亚洲精品高清国产麻豆专区 | 国产精品久久久久久久久kt | 欧美久在线观看在线观看 | 97国产精品国产品国语字幕 | 国产成人精品本亚洲 | 美国美女一级毛片免费全 | 成人免费视频视频在线观看 免费 | 午夜aaaaaaaaa视频在线 | 欧洲色网 | 亚洲区一 | 久操小视频 | 美国一级毛片片aa久久综合 | 视频一区视频二区在线观看 | 91精品国产高清久久久久 | 2020亚洲欧美日韩在线观看 | 日本a毛片在线播放 | 亚洲国产欧洲 | 人人鲁免费播放视频人人香蕉 | 欧美日韩免费在线观看 | 天天干天天在线 | 久久99亚洲精品久久 | 日本大胆一区免费视频 | 一级免费看片 | 狠狠一区 |