jQuery基礎整理之二

5，jQuery AjAX

5.1 AJAX簡介

AJAX 是與服務器交換數據的藝術，它在不重載所有頁面的狀況下，實現了對部分網頁的更新。

什麼是 AJAX？

AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

簡短地說，在不重載整個網頁的狀況下，AJAX 經過後臺加載數據，並在網頁上進行顯示。

使用 AJAX 的應用程序案例：谷歌地圖、騰訊微博、優酷視頻、人人網等等。

您能夠在咱們的 AJAX 教程中學到更多有關 AJAX 的知識。

關於 jQuery 與 AJAX

jQuery 提供多個與 AJAX 有關的方法。

經過 jQuery AJAX 方法，您可以使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您可以把這些外部數據直接載入網頁的被選元素中。

提示：若是沒有 jQuery，AJAX 編程仍是有些難度的。

編寫常規的 AJAX 代碼並不容易，由於不一樣的瀏覽器對 AJAX 的實現並不相同。這意味着您必須編寫額外的代碼對瀏覽器進行測試。不過，jQuery 團隊爲咱們解決了這個難題，咱們只須要一行簡單的代碼，就能夠實現 AJAX 功能。

jQuery AJAX 方法

在下面的章節，咱們將學習到最重要的 jQuery AJAX 方法。

5.2 加載

jQuery load() 方法

jQuery load() 方法是簡單但強大的 AJAX 方法。

load() 方法從服務器加載數據，並把返回的數據放入被選元素中。

語法：

$(selector).load(URL,data,callback);

必需的 URL 參數規定您但願加載的 URL。

可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。

可選的 callback 參數是 load() 方法完成後所執行的函數名稱。

這是示例文件（"demo_test.txt"）的內容：

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

下面的例子會把文件 "demo_test.txt" 的內容加載到指定的 <div> 元素中：

示例

$("#div1").load("demo_test.txt");

也能夠把 jQuery 選擇器添加到 URL 參數。

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的內容，加載到指定的 <div> 元素中：

實例

$("#div1").load("demo_test.txt #p1");

可選的 callback 參數規定當 load() 方法完成後所要容許的回調函數。回調函數能夠設置不一樣的參數：

• responseTxt - 包含調用成功時的結果內容

• statusTXT - 包含調用的狀態

• xhr - 包含 XMLHttpRequest 對象

下面的例子會在 load() 方法完成後顯示一個提示框。若是 load() 方法已成功，則顯示「外部內容加載成功！」，而若是失敗，則顯示錯誤消息：

實例

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部內容加載成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

5.3 GET/POST

jQuery get() 和 post() 方法用於經過 HTTP GET 或 POST 請求從服務器請求數據。

HTTP 請求：GET vs. POST

兩種在客戶端和服務器端進行請求-響應的經常使用方法是：GET 和 POST。

• GET - 從指定的資源請求數據

• POST - 向指定的資源提交要處理的數據

GET 基本上用於從服務器得到（取回）數據。註釋：GET 方法可能返回緩存數據。

POST 也可用於從服務器獲取數據。不過，POST 方法不會緩存數據，而且經常使用於連同請求一塊兒發送數據。

如需學習更多有關 GET 和 POST 以及兩方法差別的知識，請閱讀咱們的 HTTP 方法 - GET 對比 POST。

jQuery $.get() 方法

$.get() 方法經過 HTTP GET 請求從服務器上請求數據。

語法：

$.get(URL,callback);

必需的 URL 參數規定您但願請求的 URL。

可選的 callback 參數是請求成功後所執行的函數名。

下面的例子使用 $.get() 方法從服務器上的一個文件中取回數據：

實例

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

$.get() 的第一個參數是咱們但願請求的 URL（"demo_test.asp"）。

第二個參數是回調函數。第一個回調參數存有被請求頁面的內容，第二個回調參數存有請求的狀態。

提示：這個 ASP 文件 ("demo_test.asp") 相似這樣：

<%
response.write("This is some text from an external ASP file.")
%>

jQuery $.post() 方法

$.post() 方法經過 HTTP POST 請求從服務器上請求數據。

語法：

$.post(URL,data,callback);

必需的 URL 參數規定您但願請求的 URL。

可選的 data 參數規定連同請求發送的數據。

可選的 callback 參數是請求成功後所執行的函數名。

下面的例子使用 $.post() 連同請求一塊兒發送數據：

實例

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

$.post() 的第一個參數是咱們但願請求的 URL ("demo_test_post.asp")。

而後咱們連同請求（name 和 city）一塊兒發送數據。

"demo_test_post.asp" 中的 ASP 腳本讀取這些參數，對它們進行處理，而後返回結果。

第三個參數是回調函數。第一個回調參數存有被請求頁面的內容，而第二個參數存有請求的狀態。

提示：這個 ASP 文件 ("demo_test_post.asp") 相似這樣：

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>