濮阳杆衣贸易有限公司

主頁(yè) > 知識(shí)庫(kù) > Jquery Ajax請(qǐng)求方法小結(jié)(值得收藏)

Jquery Ajax請(qǐng)求方法小結(jié)(值得收藏)

熱門(mén)標(biāo)簽:硅語(yǔ)電話機(jī)器人公司 騰訊地圖標(biāo)注位置能用多久 地圖標(biāo)注項(xiàng)目怎么樣 超級(jí)大富翁地圖標(biāo)注 云呼外撥網(wǎng)絡(luò)電話系統(tǒng) ai機(jī)器人電銷(xiāo)資源 個(gè)人怎樣在百度地圖標(biāo)注地名 越南河內(nèi)地圖標(biāo)注 機(jī)器人電銷(xiāo)騙局揭秘

 jQuery確實(shí)是一個(gè)挺好的輕量級(jí)的JS框架,能幫助我們快速的開(kāi)發(fā)JS應(yīng)用,并在一定程度上改變了我們寫(xiě)JavaScript代碼的習(xí)慣。

廢話少說(shuō),直接進(jìn)入正題,我們先來(lái)看一些簡(jiǎn)單的方法,這些方法都是對(duì)jQuery.ajax()進(jìn)行封裝以方便我們使用的方法,當(dāng)然,如果要處理復(fù)雜的邏輯,還是需要用到j(luò)Query.ajax()的(這個(gè)后面會(huì)說(shuō)到).

1. load( url, [data], [callback] ) :載入遠(yuǎn)程 HTML 文件代碼并插入至 DOM 中。

url (String) : 請(qǐng)求的HTML頁(yè)的URL地址。

data (Map) : (可選參數(shù)) 發(fā)送至服務(wù)器的 key/value 數(shù)據(jù)。

callback (Callback) : (可選參數(shù)) 請(qǐng)求完成時(shí)(不需要是success的)的回調(diào)函數(shù)。

這個(gè)方法默認(rèn)使用 GET 方式來(lái)傳遞的,如果[data]參數(shù)有傳遞數(shù)據(jù)進(jìn)去,就會(huì)自動(dòng)轉(zhuǎn)換為POST方式的。jQuery 1.2 中,可以指定選擇符,來(lái)篩選載入的 HTML 文檔,DOM 中將僅插入篩選出的 HTML 代碼。語(yǔ)法形如 "url #some > selector"。

這個(gè)方法可以很方便的動(dòng)態(tài)加載一些HTML文件,例如表單。

示例代碼:

$(".ajax.load").load("[url]http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html[/url] .post",
 function (responseText, textStatus, XMLHttpRequest){
 this;//在這里this指向的是當(dāng)前的DOM對(duì)象,即$(".ajax.load")[0] 
 //alert(responseText);//請(qǐng)求返回的內(nèi)容
 //alert(textStatus);//請(qǐng)求狀態(tài):success,error
 //alert(XMLHttpRequest);//XMLHttpRequest對(duì)象
});

這里將顯示結(jié)果。

 

注:不知道為什么URL寫(xiě)絕對(duì)路徑在FF下會(huì)出錯(cuò),知道的麻煩告訴下。下面的get()和post()示例使用的是絕對(duì)路徑,所以在FF下你將會(huì)出錯(cuò)并不會(huì)看到返回結(jié)果。還有g(shù)et()和post()示例都是跨域調(diào)用的,發(fā)現(xiàn)傳上來(lái)后沒(méi)辦法獲取結(jié)果,所以把運(yùn)行按鈕去掉了。

2. jQuery.get( url, [data], [callback] ):使用GET方式來(lái)進(jìn)行異步請(qǐng)求

參數(shù):

url (String) :  發(fā)送請(qǐng)求的URL地址.

data (Map) : (可選) 要發(fā)送給服務(wù)器的數(shù)據(jù),以 Key/value 的鍵值對(duì)形式表示,會(huì)做為QueryString附加到請(qǐng)求URL中。

callback (Function) : (可選) 載入成功時(shí)回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success才是調(diào)用該方法)。

這是一個(gè)簡(jiǎn)單的 GET 請(qǐng)求功能以取代復(fù)雜 $.ajax 。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù),請(qǐng)使用 $.ajax。

示例代碼:

 $.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){
 //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.
 this; // 在這里this指向的是Ajax請(qǐng)求的選項(xiàng)配置信息,請(qǐng)參考下圖
 alert(data);
 //alert(textStatus);//請(qǐng)求狀態(tài):success,error等等。
   當(dāng)然這里捕捉不到error,因?yàn)閑rror的時(shí)候根本不會(huì)運(yùn)行該回調(diào)函數(shù)
 //alert(this);
 });

點(diǎn)擊發(fā)送請(qǐng)求:

jQuery.get()回調(diào)函數(shù)里面的 this ,指向的是Ajax請(qǐng)求的選項(xiàng)配置信息:

 

3. jQuery.post( url, [data], [callback], [type] ) :使用POST方式來(lái)進(jìn)行異步請(qǐng)求

參數(shù):

url (String) : 發(fā)送請(qǐng)求的URL地址.

data (Map) : (可選) 要發(fā)送給服務(wù)器的數(shù)據(jù),以 Key/value 的鍵值對(duì)形式表示。

callback (Function) : (可選) 載入成功時(shí)回調(diào)函數(shù)(只有當(dāng)Response的返回狀態(tài)是success才是調(diào)用該方法)。

type (String) : (可選)官方的說(shuō)明是:Type of data to be sent。其實(shí)應(yīng)該為客戶(hù)端請(qǐng)求的類(lèi)型(JSON,XML,等等)

這是一個(gè)簡(jiǎn)單的 POST 請(qǐng)求功能以取代復(fù)雜 $.ajax 。請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù),請(qǐng)使用 $.ajax。

示例代碼:

Ajax.aspx:

Response.ContentType = "application/json";
Response.Write("{result: ''" + Request["Name"] + ",你好!(這消息來(lái)自服務(wù)器)''}");

jQuery 代碼:

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },
 function (data, textStatus){
 // data 可以是 xmlDoc, jsonObj, html, text, 等等.
 //this; // 這個(gè)Ajax請(qǐng)求的選項(xiàng)配置信息,請(qǐng)參考jQuery.get()說(shuō)到的this
 alert(data.result);
 }, "json");

點(diǎn)擊提交:

這里設(shè)置了請(qǐng)求的格式為"json":

 

如果你設(shè)置了請(qǐng)求的格式為"json",此時(shí)你沒(méi)有設(shè)置Response回來(lái)的ContentType 為:Response.ContentType = "application/json"; 那么你將無(wú)法捕捉到返回的數(shù)據(jù)。
注意一下,alert(data.result); 由于設(shè)置了Accept報(bào)頭為“json”,這里返回的data就是一個(gè)對(duì)象,并不需要用eval()來(lái)轉(zhuǎn)換為對(duì)象。

4. jQuery.getScript( url, [callback] ) : 通過(guò) GET 方式請(qǐng)求載入并執(zhí)行一個(gè) JavaScript 文件。

參數(shù)

url (String) : 待載入 JS 文件地址。

callback (Function) : (可選) 成功載入后回調(diào)函數(shù)。

jQuery 1.2 版本之前,getScript 只能調(diào)用同域 JS 文件。 1.2中,您可以跨域調(diào)用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步執(zhí)行腳本。如果通過(guò) getScript 加入腳本,請(qǐng)加入延時(shí)函數(shù)。

這個(gè)方法可以用在例如當(dāng)只有編輯器focus()的時(shí)候才去加載編輯器需要的JS文件.下面看一些示例代碼:
加載并執(zhí)行 test.js。

jQuery 代碼:

復(fù)制代碼 代碼如下:

$.getScript("test.js");

加載并執(zhí)行 AjaxEvent.js ,成功后顯示信息。

jQuery 代碼:

$.getScript("AjaxEvent.js", function(){
 alert("AjaxEvent.js 加載完成并執(zhí)行完成.你再點(diǎn)擊上面的Get或Post按鈕看看有什么不同?");
});

加載完后重新新點(diǎn)擊一下上面的 Load 請(qǐng)求看看有什么不同。

jQuery Ajax 事件

Ajax請(qǐng)求會(huì)產(chǎn)生若干不同的事件,我們可以訂閱這些事件并在其中處理我們的邏輯。在jQuery這里有兩種Ajax事件:局部事件 和 全局事件。

局部事件就是在每次的Ajax請(qǐng)求時(shí)在方法內(nèi)定義的,例如:

$.ajax({
 beforeSend: function(){
 // Handle the beforeSend event
 },
 complete: function(){
 // Handle the complete event
 }
 // ...
 });

全局事件是每次的Ajax請(qǐng)求都會(huì)觸發(fā)的,它會(huì)向DOM中的所有元素廣播,在上面 getScript() 示例中加載的腳本就是全局Ajax事件。全局事件可以如下定義:

 $("#loading").bind("ajaxSend", function(){
 $(this).show();
 }).bind("ajaxComplete", function(){
 $(this).hide();
 });

或者:

 $("#loading").ajaxStart(function(){
 $(this).show();
 }); 

我們可以在特定的請(qǐng)求將全局事件禁用,只要設(shè)置下 global 選項(xiàng)就可以了:

 $.ajax({
 url: "test.html",
 global: false,// 禁用全局Ajax事件.
 // ...
 });

下面是jQuery官方給出的完整的Ajax事件列表:

ajaxStart (Global Event)
This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.
beforeSend (Local Event)
This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
ajaxSend (Global Event)
This global event is also triggered before the request is run.
success (Local Event)
This event is only called if the request was successful (no errors from the server, no errors with the data).
ajaxSuccess (Global Event)
This event is also only called if the request was successful.
error (Local Event)
This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
ajaxError (Global Event)
This global event behaves the same as the local error event.
complete (Local Event)
This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
ajaxComplete (Global Event)
This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
ajaxStop (Global Event)
This global event is triggered if there are no more Ajax requests being processed.

具體的全局事件請(qǐng)參考API文檔。

好了,下面開(kāi)始說(shuō)jQuery里面功能最強(qiáng)的Ajax請(qǐng)求方法 $.ajax(); 

jQuery.ajax( options ) : 通過(guò) HTTP 請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)

這個(gè)是jQuery 的底層 AJAX 實(shí)現(xiàn)。簡(jiǎn)單易用的高層實(shí)現(xiàn)見(jiàn) $.get, $.post 等。

$.ajax() 返回其創(chuàng)建的 XMLHttpRequest 對(duì)象。大多數(shù)情況下你無(wú)需直接操作該對(duì)象,但特殊情況下可用于手動(dòng)終止請(qǐng)求。
注意: 如果你指定了 dataType 選項(xiàng),請(qǐng)確保服務(wù)器返回正確的 MIME 信息,(如 xml 返回 "text/xml")。錯(cuò)誤的 MIME 類(lèi)型可能導(dǎo)致不可預(yù)知的錯(cuò)誤。見(jiàn) Specifying the Data Type for AJAX Requests 。

當(dāng)設(shè)置 datatype 類(lèi)型為 ''script'' 的時(shí)候,所有的遠(yuǎn)程(不在同一個(gè)域中)POST請(qǐng)求都回轉(zhuǎn)換為GET方式。

$.ajax() 只有一個(gè)參數(shù):參數(shù) key/value 對(duì)象,包含各配置及回調(diào)函數(shù)信息。詳細(xì)參數(shù)選項(xiàng)見(jiàn)下。

jQuery 1.2 中,您可以跨域加載 JSON 數(shù)據(jù),使用時(shí)需將數(shù)據(jù)類(lèi)型設(shè)置為 JSONP。使用 JSONP 形式調(diào)用函數(shù)時(shí),如 "myurl?callback=?" jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。數(shù)據(jù)類(lèi)型設(shè)置為 "jsonp" 時(shí),jQuery 將自動(dòng)調(diào)用回調(diào)函數(shù)。(這個(gè)我不是很懂)

參數(shù)列表:

參數(shù)名 類(lèi)型 描述
url String (默認(rèn): 當(dāng)前頁(yè)地址) 發(fā)送請(qǐng)求的地址。
type String (默認(rèn): "GET") 請(qǐng)求方式 ("POST" 或 "GET"), 默認(rèn)為 "GET"。注意:其它 HTTP 請(qǐng)求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支持。
timeout Number 設(shè)置請(qǐng)求超時(shí)時(shí)間(毫秒)。此設(shè)置將覆蓋全局設(shè)置。
async Boolean (默認(rèn): true) 默認(rèn)設(shè)置下,所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求,請(qǐng)將此選項(xiàng)設(shè)置為 false。注意,同步請(qǐng)求將鎖住瀏覽器,用戶(hù)其它操作必須等待請(qǐng)求完成才可以執(zhí)行。
beforeSend Function 發(fā)送請(qǐng)求前可修改 XMLHttpRequest 對(duì)象的函數(shù),如添加自定義 HTTP 頭。XMLHttpRequest 對(duì)象是唯一的參數(shù)。
function (XMLHttpRequest) {
 this; // the options for this ajax request
}
cache Boolean (默認(rèn): true) jQuery 1.2 新功能,設(shè)置為 false 將不會(huì)從瀏覽器緩存中加載請(qǐng)求信息。
complete Function 請(qǐng)求完成后回調(diào)函數(shù) (請(qǐng)求成功或失敗時(shí)均調(diào)用)。參數(shù): XMLHttpRequest 對(duì)象,成功信息字符串。
function (XMLHttpRequest, textStatus) {
 this; // the options for this ajax request
}
contentType String (默認(rèn): "application/x-www-form-urlencoded") 發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類(lèi)型。默認(rèn)值適合大多數(shù)應(yīng)用場(chǎng)合。
data Object,
String
發(fā)送到服務(wù)器的數(shù)據(jù)。將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式。GET 請(qǐng)求中將附加在 URL 后。查看 processData 選項(xiàng)說(shuō)明以禁止此自動(dòng)轉(zhuǎn)換。必須為 Key/Value 格式。如果為數(shù)組,jQuery 將自動(dòng)為不同值對(duì)應(yīng)同一個(gè)名稱(chēng)。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 ''foo=bar1foo=bar2''。
dataType String
預(yù)期服務(wù)器返回的數(shù)據(jù)類(lèi)型。如果不指定,jQuery 將自動(dòng)根據(jù) HTTP 包 MIME 信息返回 responseXML 或 responseText,并作為回調(diào)函數(shù)參數(shù)傳遞,可用值:
"xml": 返回 XML 文檔,可用 jQuery 處理。
"html": 返回純文本 HTML 信息;包含 script 元素。
"script": 返回純文本 JavaScript 代碼。不會(huì)自動(dòng)緩存結(jié)果。
"json": 返回 JSON 數(shù)據(jù) 。
"jsonp": JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時(shí),如 "myurl?callback=?" jQuery 將自動(dòng)替換 ? 為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。
error Function (默認(rèn): 自動(dòng)判斷 (xml 或 html)) 請(qǐng)求失敗時(shí)將調(diào)用此方法。這個(gè)方法有三個(gè)參數(shù):XMLHttpRequest 對(duì)象,錯(cuò)誤信息,(可能)捕獲的錯(cuò)誤對(duì)象。
function (XMLHttpRequest, textStatus, errorThrown) {
 // 通常情況下textStatus和errorThown只有其中一個(gè)有值 
 this; // the options for this ajax request
}
global Boolean (默認(rèn): true) 是否觸發(fā)全局 AJAX 事件。設(shè)置為 false 將不會(huì)觸發(fā)全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified Boolean (默認(rèn): false) 僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)。使用 HTTP 包 Last-Modified 頭信息判斷。
processData Boolean (默認(rèn): true) 默認(rèn)情況下,發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對(duì)象(技術(shù)上講并非字符串) 以配合默認(rèn)內(nèi)容類(lèi)型 "application/x-www-form-urlencoded"。如果要發(fā)送 DOM 樹(shù)信息或其它不希望轉(zhuǎn)換的信息,請(qǐng)?jiān)O(shè)置為 false。
success Function 請(qǐng)求成功后回調(diào)函數(shù)。這個(gè)方法有兩個(gè)參數(shù):服務(wù)器返回?cái)?shù)據(jù),返回狀態(tài)
function (data, textStatus) {
 // data could be xmlDoc, jsonObj, html, text, etc...
 this; // the options for this ajax request
}

這里有幾個(gè)Ajax事件參數(shù):beforeSend ,success ,complete ,error 。我們可以定義這些事件來(lái)很好的處理我們的每一次的Ajax請(qǐng)求。注意一下,這些Ajax事件里面的 this 都是指向Ajax請(qǐng)求的選項(xiàng)信息的(請(qǐng)參考說(shuō) get() 方法時(shí)的this的圖片)。
請(qǐng)認(rèn)真閱讀上面的參數(shù)列表,如果你要用jQuery來(lái)進(jìn)行Ajax開(kāi)發(fā),那么這些參數(shù)你都必需熟知的。
示例代碼,獲取博客園首頁(yè)的文章題目:

$.ajax({
 type: "get",
 url: "[url]http://www.cnblogs.com/rss[/url]",
 beforeSend: function(XMLHttpRequest){
 //ShowLoading();
 },
 success: function(data, textStatus){
 $(".ajax.ajaxResult").html("");
 $("item",data).each(function(i, domEle){
 $(".ajax.ajaxResult").append("
 "+$(domEle).children("title").text()+"");
 });
 },
 complete: function(XMLHttpRequest, textStatus){
 //HideLoading();
 },
 error: function(){
 //請(qǐng)求出錯(cuò)處理
 }
});

其他

jQuery.ajaxSetup( options ) : 設(shè)置全局 AJAX 默認(rèn)選項(xiàng)。

設(shè)置 AJAX 請(qǐng)求默認(rèn)地址為 "/xmlhttp/",禁止觸發(fā)全局 AJAX 事件,用 POST 代替默認(rèn) GET 方法。其后的 AJAX 請(qǐng)求不再設(shè)置任何選項(xiàng)參數(shù)。

jQuery 代碼:

$.ajaxSetup({
 url: "/xmlhttp/",
 global: false,
 type: "POST"
});
$.ajax({ data: myData });

serialize() 與 serializeArray()

serialize() : 序列表表格內(nèi)容為字符串。

serializeArray() : 序列化表格元素 (類(lèi)似 ''.serialize()'' 方法) 返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)。

示例:

HTML代碼:

p id="results">b>Results: b> p>
form>
 select name="single">
 option>Singleoption>
 option>Single2option>
 select>
 select name="multiple" multiple="multiple">
 option selected="selected">Multipleoption>
 option>Multiple2option>
 option selected="selected">Multiple3option>
 select>br/>
 input type="checkbox" name="check" value="check1"/> check1
 input type="checkbox" name="check" value="check2" 
checked="checked"/> check2
 input type="radio" name="radio" value="radio1" 
checked="checked"/> radio1
 input type="radio" name="radio" value="radio2"/> radio2
form> 

 

serializeArray() 結(jié)果為:

下面給大家介紹為什么一般請(qǐng)求可以下載文件,Ajax 請(qǐng)求就不能下載

那是因?yàn)閞esponse原因,一般請(qǐng)求瀏覽器是會(huì)處理服務(wù)器輸出的 response,例如生成png,文件下載等,ajax請(qǐng)求只是個(gè)“字符性”的請(qǐng)求,可以讀取到返回的response,但只是讀取而已,是無(wú)法執(zhí)行的,說(shuō)白點(diǎn)就是js無(wú)法調(diào)用到瀏覽器的下載處理機(jī)制和程序。

您可能感興趣的文章:
  • jquery中AJAX請(qǐng)求 $.post方法的使用
  • jquery+ajax請(qǐng)求且?guī)Х祷刂档拇a
  • jQuery取消ajax請(qǐng)求的方法
  • jQuery調(diào)用ajax請(qǐng)求的常見(jiàn)方法匯總
  • 封裝了jQuery的Ajax請(qǐng)求全局配置
  • JQuery的Ajax請(qǐng)求實(shí)現(xiàn)局部刷新的簡(jiǎn)單實(shí)例
  • jquery教程ajax請(qǐng)求json數(shù)據(jù)示例
  • jquery的ajax請(qǐng)求全面了解
  • jquery ajax請(qǐng)求實(shí)例深入解析
  • Jquery 一次處理多個(gè)ajax請(qǐng)求的代碼
  • jQuery實(shí)現(xiàn)監(jiān)控頁(yè)面所有ajax請(qǐng)求的方法

標(biāo)簽:遼源 海南 鄭州 林芝 舟山 邢臺(tái) 洛陽(yáng) 內(nèi)蒙古

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Jquery Ajax請(qǐng)求方法小結(jié)(值得收藏)》,本文關(guān)鍵詞  Jquery,Ajax,請(qǐng)求,方法,小結(jié),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Jquery Ajax請(qǐng)求方法小結(jié)(值得收藏)》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于Jquery Ajax請(qǐng)求方法小結(jié)(值得收藏)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    芜湖市| 毕节市| 平利县| 邯郸县| 逊克县| 黄冈市| 遂平县| 鲁山县| 盘锦市| 垣曲县| 绵阳市| 龙泉市| 故城县| 重庆市| 常宁市| 克什克腾旗| 新泰市| 轮台县| 新沂市| 会泽县| 高碑店市| 玉山县| 封开县| 包头市| 江陵县| 临颍县| 舞钢市| 沅陵县| 溧水县| 渑池县| 南城县| 电白县| 卢湾区| 平阳县| 大渡口区| 马关县| 宁德市| 桐梓县| 玉树县| 托克托县| 大新县|