【jQuery】之Ajax相關方法簡單介紹

AJAX 是與伺服器交換資料的藝術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。jQuery作為一個優秀的前端架構，也完美的支援了Ajax功能。通過 jQuery AJAX 方法，能夠使用 HTTP Get 和 HTTP Post 從遠程伺服器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部資料直接載入網頁的被選元素中。編寫常規的 AJAX 代碼並不容易，因為不同的瀏覽器對 AJAX 的實現並不相同。這意味著你必須編寫額外的代碼對瀏覽器進行測試。不過，jQuery 團隊為我們解決了這個難題，我們只需要一行簡單的代碼，就可以實現 AJAX 功能。

jQuery提供的Ajax方法主要有：

• ajaxStart()
• ajaxStop()
• ajaxSend()
• ajaxComplete()
• ajaxError()
• ajaxSuccess()

load()方法

load()方法可以方便的擷取非同步資料，url是指伺服器上的檔案地址，data是發送到伺服器的資料，callback是指載入成功後調用的回呼函數。

舉例：

$(“button1”).click(function(){    $(“#divTip”).load(“b.html”);})

這樣就把b.html中的資料直接賦值給名為divTip的div。

getJSON方法

getJSON()方法可以直接調用JSON格式資料，載入後可以直接進行遍曆JSON資料，進行相應的處理。

舉例：

$.getJSON( "ajax/test.json",function( data ) {  varitems = []; $.each( data, function( key,val ) {    items.push( "<li id='" + key + "'>" + val +"</li>" );  }); });

在擷取到test.json後，通過each()方法對data進行遍曆，擷取JSON中的資料，然後進行相應的處理。

getScript()方法

通過getScript()方法擷取.js檔案，不但可以輕鬆的注入指令碼，並且注入的指令碼自動執行，大大提高了頁面的執行效率。

舉例：

 $("button").click(function(){   $.getScript("/example/jquery/demo_ajax_script.js");  });

demo_ajax_script.js檔案內容

alert("This JavaScript alert wasloaded by AJAX");

當調用getScript()方法後，會彈出一個對話方塊，如下所示：

get()方法

之前的幾個方法分別處理了html、JSON、JS格式的檔案，但我們也經常需要載入XML格式的資料。

我們大家都知道，兩種在用戶端和伺服器端進行要求-回應的常用方法是：GET 和 POST。

l  GET - 從指定的資源請求資料

l  POST - 向指定的資源提交要處理的資料

GET 基本上用於從伺服器獲得（取回）資料。注釋：GET方法可能返回快取資料。

get()文法：

$(selector).get(url,data,success(response,status,xhr),dataType)

參數	描述
url	必需。規定將請求發送的哪個 URL。
data	可選。規定連同請求發送到伺服器的資料。
success(response,status,xhr)	可選。規定當請求成功時啟動並執行函數。 額外的參數： ·         response - 包含來自請求的結果資料 ·         status - 包含請求的狀態 ·         xhr - 包含 XMLHttpRequest 對象
dataType	可選。規定預計的伺服器響應的資料類型。 預設地，jQuery 將智能判斷。 可能的類型： ·         "xml" ·         "html" ·         "text" ·         "script" ·         "json" ·         "jsonp"

 

舉例：

$.get("test.xml", { name:"John", time: "2pm" }, function(data){   alert("Data Loaded: " + data);});

post()方法

post()方法本質上與get()方法本質上沒有太大區別，但是GET方式不適合傳遞資料量較大的資料，同時，其請求的曆史資訊會儲存在瀏覽器的緩衝裡，有一定風險。而以POST方式向伺服器發送資料請求，則不存在這兩個方面的不足。

文法

$.post(url,data,success(data, textStatus,jqXHR),dataType)

舉例：

$.post("demo_ajax_gethint.asp",{suggest:txt},function(result){   $("span").html(result);  });

serialize()方法

serialize()方法也是一個非常有用的函數，它可以直接將表單中的資料轉化為能隨Ajax傳遞的字串，即序列化所選的DOM元素，作為發送ajax請求時發送的資料。

文法

$(selector).serialize()

舉例

$.post(“User_Info.aspx”, $(“#frmUserInfo”).serialize(),function(data){      $(“#divTip”).html(data);});

ajax()方法

除了以上像get()、post()、load()等方法以外，jQuery還提供了更為強悍的底層函數ajax()，該方法不僅可以很方便地實現上述三個全域函數完成的功能，還更多的關注實現過程中的細節。

ajax()文法：

$.ajax([options])

options參數如下所示：

		}
		}
	String
		和errorThown只有其中一個有值 }
		}

 

舉例，擷取部落格園首頁的文章題目：

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

ajaxSetup()方法

用來設定全域的Ajax。在使用$.ajax()時，有時需要調用多個$.ajax()方法，如果每個方法都設定其中的請求細節，將會是一件十分麻煩的事，這就需要ajaxSetup的輔助。

舉例：

$.ajaxSetup({type:”GET”,url:”UserInfo.xml”,dataType:”xml”})

設定了ajax()方法請求的方式為GET，資料地質為UserInfo.xml，返回資料類型為xml

ajax事件

jQuery中提供了6個全域的ajax事件，詳細如下所述：

ajaxStart 全域事件

開始新的Ajax請求，並且此時沒有其他ajax請求進行中。

ajaxSend 全域事件

請求開始前觸發的全域事件

ajaxSuccess 全域事件

全域的請求成功

ajaxError 全域事件

全域的發生錯誤時觸發

ajaxComplete 全域事件

全域的請求完成時觸發

ajaxStop 全域事件

當沒有Ajax進行中中的時候，觸發。

舉例

$(“#divTip”).ajaxStart(function(){     $(this).show();});