jQuery Ajax執行個體各種使用方法詳解

 jQuery.get( url, [data], [callback] )：使用GET方式來進行非同步請求

這是一個簡單的 GET 請求功能以取代複雜 $.ajax 。請求成功時可調用回呼函數。如果需要在出錯時執行函數，請使用 $.ajax。

樣本
請求 test.php 網頁，忽略傳回值：

代碼如下	複製代碼
$.get("test.php");

例子 1

請求 test.php 網頁，傳送2個參數，忽略傳回值：

代碼如下	複製代碼
$.get("test.php", { name: "John", time: "2pm" } );

例子 2

顯示 test.php 傳回值(HTML 或 XML，取決於傳回值)：

代碼如下	複製代碼
$.get("test.php", function(data){   alert("Data Loaded: " + data); });

例子 3
顯示 test.cgi 傳回值(HTML 或 XML，取決於傳回值)，添加一組請求參數：

代碼如下	複製代碼
$.get("test.cgi", { name: "John", time: "2pm" },   function(data){     alert("Data Loaded: " + data);   });

例子 4

代碼如下	複製代碼
$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){ //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等. this; // 在這裡this指向的是Ajax請求的選項配置資訊，請參考下圖 alert(data); //alert(textStatus);//請求狀態：success，error等等。 當然這裡捕捉不到error，因為error的時候根本不會運行該回呼函數 //alert(this); });

jQuery.post( url, [data], [callback], [type] ) ：使用POST方式來進行非同步請求

參數：

url (String) : 發送請求的URL地址.

data (Map) : (可選) 要發送給伺服器的資料，以 Key/value 的索引值對形式表示。

callback (Function) : (可選) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)。

type (String) : (可選)官方的說明是：Type of data to be sent。其實應該為用戶端請求的類型(JSON,XML,等等)

這是一個簡單的 POST 請求功能以取代複雜 $.ajax 。請求成功時可調用回呼函數。如果需要在出錯時執行函數，請使用 $.ajax。範例程式碼：

Ajax.aspx：

代碼如下	複製代碼
Response.ContentType = "application/json"; Response.Write("{result: '" + Request["Name"] + ",你好！(這訊息來自伺服器)'}");jQuery 代碼： $.post("Ajax.aspx", { Action: "post", Name: "lulu" }, function (data, textStatus){ // data 可以是 xmlDoc, jsonObj, html, text, 等等. //this; // 這個Ajax請求的選項配置資訊，請參考jQuery.get()說到的this alert(data.result); }, "json");

1. load( url, [data], [callback] ) ：載入遠程 HTML 檔案代碼並插入至 DOM 中。

•url：是指要匯入檔案的地址。
•data：選擇性參數；因為Load不僅僅可以匯入靜態html檔案，還可以匯入動態指令碼，例如PHP檔案，所以要匯入的是動態檔案時，我們可以把要傳遞的參數放在這裡。
•callback：選擇性參數；是指調用load方法並得到伺服器響應後，再執行的另外一個函數。

一：如何使用data

1.載入一個php檔案，該php檔案不含傳遞參數

代碼如下	複製代碼
$("#myID").load("test.php");

//在id為#myID的元素裡匯入test.php運行後的結果
2. 載入一個php檔案，該php檔案含有一個傳遞參數

代碼如下	複製代碼
$("#myID").load("test.php",{"name" : "Adam"});

//匯入的php檔案含有一個傳遞參數，類似於：test.php?name=Adam
3. 載入一個php檔案，該php檔案含有多個傳遞參數。註：參數間用逗號分隔

代碼如下	複製代碼
$("#myID").load("test.php",{"name" : "Adam" ，"site":"61dh.com"});

//匯入的php檔案含有一個傳遞參數，類似於：test.php?name=Adam&site=61dh.com
4. 載入一個php檔案，該php檔案以數組作為傳遞參數

代碼如下	複製代碼
$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});

//匯入的php檔案含有一個數組傳遞參數。
注意：使用load，這些參數是以POST的方式傳遞的，因此在test.php裡，不能用GET來擷取參數。

二：如何使用callback

比如我們要在load方法得到伺服器響應後，慢慢地顯示載入的內容，就可以使用callback函數。代碼如下：

代碼如下	複製代碼
$("#go").click(function(){   $("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){     $("#myID").fadeIn('slow');}   ); });

 

備忘：

在load的url裡加上空格後面就可以跟選取器了。

例如：

代碼如下	複製代碼
$("body").load("test.html #a");

這個方法可以很方便的動態載入一些HTML檔案，例如表單。

範例程式碼：

代碼如下	複製代碼
$(".ajax.load").load("1500682.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在這裡this指向的是當前的DOM對象，即$(".ajax.load")[0] //alert(responseText);//請求返回的內容 //alert(textStatus);//請求狀態：success，error //alert(XMLHttpRequest);//XMLHttpRequest對象 });

jQuery.getScript( url, [callback] ) : 通過 GET 方式請求載入並執行一個 JavaScript 檔案。

參數
url (String) : 待載入 JS 檔案地址。

callback (Function) : (可選) 成功載入後回呼函數。

通過 HTTP GET 請求載入並執行一個 JavaScript 檔案。

jQuery 1.2 版本之前，getScript 只能調用同域 JS 檔案。 1.2中，您可以跨域調用 JavaScript 檔案。注意：Safari 2 或更早的版本不能在全域範圍中同步執行指令碼。如果通過 getScript 加入指令碼，請加入延時函數。

參數
url,[callback]String,FunctionV1.0url:待載入 JS 檔案地址。

callback:成功載入後回呼函數。

樣本
描述:
載入 <a title="/color" class="external text" href="h/color">jQuery 官方顏色動畫外掛程式</a> 成功後綁定顏色變化動畫。

代碼如下	複製代碼
HTML 程式碼: <button id="go">» Run</button> <div class="block"></div>jQuery 代碼: jQuery.getScript("/jquery.color.js", function(){   $("#go").click(function(){     $(".block").animate( { backgroundColor: 'pink' }, 1000)       .animate( { backgroundColor: 'blue' }, 1000);   }); });

描述:

載入並執行 test.js。

jQuery 代碼:

$.getScript("test.js");

描述:

載入並執行 test.js ，成功後顯示資訊。

jQuery 代碼:

代碼如下	複製代碼
$.getScript("test.js", function(){   alert("Script loaded and executed."); });

jQuery Ajax 事件

Ajax會觸發很多事件。
有兩種事件，一種是局部事件，一種是全域事件：

局部事件：通過$.ajax來調用並且分配。

代碼如下	複製代碼
$.ajax({     beforeSend: function(){      // Handle the beforeSend event     },     complete: function(){      // Handle the complete event     }     // ... });

全域事件，可以用bind來綁定，用unbind來取消綁定。這個跟click/mousedown/keyup等事件類別似。但他可以傳遞到每一個DOM元素上。

代碼如下	複製代碼
$("#loading").bind("ajaxSend", function(){ //使用bind     $(this).show(); }).ajaxComplete(function(){  //直接使用ajaxComplete     $(this).hide(); });

當然，你某一個Ajax請求不希望產生全域的事件，則可以設定global:false

代碼如下	複製代碼
$.ajax({    url: "test.html",    global: false,    // ...  });

事件的順序如下：
ajaxStart 全域事件
開始新的Ajax請求，並且此時沒有其他ajax請求進行中。
beforeSend 局部事件
當一個Ajax請求開始時觸發。如果需要，你可以在這裡設定XHR對象。
ajaxSend 全域事件
請求開始前觸發的全域事件
success 局部事件
請求成功時觸發。即伺服器沒有返回錯誤，返回的資料也沒有錯誤。
ajaxSuccess 全域事件
全域的請求成功
error 局部事件
僅當發生錯誤時觸發。你無法同時執行success和error兩個回呼函數。
ajaxError 全域事件
全域的發生錯誤時觸發
complete 局部事件
不管你請求成功還是失敗，即便是同步請求，你都能在請求完成時觸發這個事件。
ajaxComplete 全域事件
全域的請求完成時觸發
ajaxStop 全域事件
當沒有Ajax進行中中的時候，觸發。

局部事件回調的參數在文檔中寫的很清楚了，這裡就不累述了。

全域事件中，除了ajaxStart和ajaxStop之外，其他的事件都有3個參數
event, XMLHttpRequest, ajaxOptions
第一個是事件，第二個是XHR對象，第三個參數最有用，是當時調用這個ajax的時候的參數。
對於ajaxError,還有第四個參數thrownError，只有當異常發生時才會被傳遞。
我們可以利用ajaxOptions來寫一個全域的ajax事件。
比如

代碼如下	複製代碼
$("#msg").beforeSend(function(e,xhr,o) {     $(this).html("正在請求"+o.url); }).ajaxSuccess(function(e,xhr,o) {     $(this).html(o.url+"請求成功"); }).ajaxError(function(e,xhr,o) {     $(this).html(o.url+"請求失敗"); });

對於這個例子，
這樣我們就可以很方便的全域地在某個地方顯示當前的ajax狀態。
當然，之前說了，第三個參數實際上是傳遞給ajax的參數。get/post/load/getScript/getJSON等方法本質上都是調用ajax方法的，所以ajaxOptions.url屬性總是有效。

還有更豐富的例子。
如果你用ajax調用，還可以傳遞自訂參數。下面的例子我就自訂了一個msg參數給了ajax調用

代碼如下

複製代碼

//自訂參數msg $.ajax({url:"test1.html",type:"get",msg:"頁面一"}); $.ajax({url:"test2.html",type:"get",msg:"頁面二"}); $.ajax({url:"test3.html",type:"get",msg:"頁面三"}); $.ajax({url:"test4.html",type:"get",msg:"頁面四"});   //這裡就能擷取到自訂參數msg。 //這可以用來區別對待不同的ajax請求。 $("#msg").beforeSend(function(e,xhr,o) {     $(this).html("正在請求"+o.msg); }).ajaxSuccess(function(e,xhr,o) {     $(this).html(o.msg+"請求成功"); }).ajaxError(function(e,xhr,o) {     $(this).html(o.msg+"請求失敗"); });