[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請求成功時執行的函數。