[jQuery]Ajax的應用

1. load()方法

load()方法是jQuery中最為簡單和常用的Ajax方法，能載入遠程HTML代碼並插入DOM中，它的結構為：

load(url[, data][, callback])

url參數表示請求HTML頁面的URL地址，data參數表示發送至伺服器的key/value資料，callback參數表示請求完成時的回呼函數，例如：

$(function(){  $("#send").click(function(){    $("#resText").load("test.html");  });});

load()方法的URL參數的文法結構為"url selector"，比如只需載入test.html頁面中class為"para"的內容，例如：

$("#resText").load("test.html .para");

load()方法的傳遞方式根據參數data來自動指定，如果沒有參數傳遞，則採用GET方式，反之則自動轉換為POST方式，例如：

$("#resText").load("test.php", {name:"rain", age:"22"}, function(){});

load()方法的回呼函數有3個參數，分別代表請求返回的內容、請求狀態和XMLHttpRequest對象，例如：

$("#resText").load("test.html", function(  responseText, textStatus, XMLHttpRequest)) {}

2. $.get()方法和$.post()方法

load()方法通常用來從Web伺服器上擷取靜態資料檔案，如果需要傳遞一些參數給伺服器上的頁面，那麼可以使用$.get()或$.post()方法。

$.get()方法使用GET方式來進行非同步請求，它的結構為：

$.get(url[, data][, callback][, type])

url參數代表請求的HTML頁的URL地址，data參數代表發送至伺服器的key/value資料會作為QueryString附加到請求URL中，callback參數代表載入成功時回呼函數，type參數代表格服務器端返回內容的格式，包括xml、html、script、josn、text和_default，例如：

$("#send").click(function(){  $.get("get1.php", {        username: $("#username").val(),        content: $("#content").val()  }, callback);});

$.get()方法的回呼函數只有兩個參數，例如：

function(data, textStatus) {}

data參數代表請求返回的內容，textStatus參數代表請求狀態，而且回呼函數只有當資料成功返回後才被調用，這與load()方法不同。

$.post()方法與$.get()方法的結構和使用方法相同。

3. $.getScript()方法和$.getJson()方法

有時候在頁面初次載入時擷取所需的全部JavaScript檔案是沒有必要的，jQuery提供了$.getScript()方法來直接載入.js檔案，與載入一個HTML片段一樣簡單方法，例如：

$(function(){  $("#send").click(function(){    $.getScript("test.js");  });});

與其他Ajax方法一樣，$.getScript()方法也有回呼函數，它會在JavaScript檔案成功載入後運行。

$.getJSON()方法用於載入JSON檔案，與$.getScript()方法的用法相同，例如：

$(function(){  $("#send").click(function(){    $.getJSON("test.josn");  });});

4. $.ajax()方法

$.ajax()方法是jQuery最底層的Ajax實現，它的結構為：

$.ajax(options)

該方法只有1個參數，但在這個對象裡包含了$.ajax()方法所需的請求設定以及回呼函數等資訊，參數以key/value的形式存在，所有參數都是可選的，常見的參數如下：

參數名稱	類型	說明
url	String	發送請求的地址。
type	String	請求方式GET或POST），預設為GET。
timeout	Number	佈建要求逾時時間毫秒）。
data	Object或String	發送到伺服器的資料。
dataType	String	預期伺服器返回的資料類型。
beforeSend	Function	發送請求前可以修改XMLHttpRequest對象的函數。
complete	Function	請求完成後調用的回呼函數。
success	Function	請求成功後調用的回呼函數。
error	Function	請求失敗時被調用的函數。
global	Boolean	預設為true，表示是否觸發全域Ajax事件。

5. Ajax全域事件

通過jQuery提供的一些自訂全域函數，能夠為各種 與Ajax相關的事件註冊回呼函數。例如當Ajax請求開始時，會觸發ajaxStart()方法的回呼函數，當Ajax請求結束時，會觸發ajaxStop()方法的回呼函數，這些方法都是全域方法，因此無論建立它們的代碼位於何處，只要有Ajax請求發生時，就會觸發它們，例如：

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

jQuery的Ajax全域事件還有幾個方法，也可以在使用Ajax方法的過程中為其帶來方便，如下表：

方法名稱	說明
ajaxComplete(callback)	Ajax請求完成時執行的函數。
ajaxError(callback)	Ajax請求發生錯誤時執行的函數。
ajaxSend(callback)	Ajax請求發送前執行的函數。
ajaxSuccess(callback)	Ajax請求成功時執行的函數。

本文出自 “方圓之間” 部落格，謝絕轉載！