jQuery - AJAX 簡介

AJAX 是與服務(wù)器交換數(shù)據(jù)的藝術(shù)，它在不重載全部頁面的情況下，實(shí)現(xiàn)了對(duì)部分網(wǎng)頁的更新。

jQuery AJAX 實(shí)例
點(diǎn)擊按鈕，通過 jQuery AJAX 改變一段文本。
獲得外部的內(nèi)容
親自試一試

什么是 AJAX？
AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
簡短地說，在不重載整個(gè)網(wǎng)頁的情況下，AJAX 通過后臺(tái)加載數(shù)據(jù)，并在網(wǎng)頁上進(jìn)行顯示。
使用 AJAX 的應(yīng)用程序案例：谷歌地圖、騰訊微博、優(yōu)酷視頻、人人網(wǎng)等等。
您可以在 AJAX 教程中學(xué)到更多有關(guān) AJAX 的知識(shí)。

關(guān)于 jQuery 與 AJAX
jQuery 提供多個(gè)與 AJAX 有關(guān)的方法。

通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠(yuǎn)程服務(wù)器上請(qǐng)求文本、HTML、XML 或 JSON - 同時(shí)您能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中。

提示：如果沒有 jQuery，AJAX 編程還是有些難度的。

編寫常規(guī)的 AJAX 代碼并不容易，因?yàn)椴煌臑g覽器對(duì) AJAX 的實(shí)現(xiàn)并不相同。這意味著您必須編寫額外的代碼對(duì)瀏覽器進(jìn)行測試。不過，jQuery 團(tuán)隊(duì)為我們解決了這個(gè)難題，我們只需要一行簡單的代碼，就可以實(shí)現(xiàn) AJAX 功能。

jQuery - AJAX load() 方法

jQuery load() 方法
jQuery load() 方法是簡單但強(qiáng)大的 AJAX 方法。
load() 方法從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中。
語法：
$(*selector*).load(*URL*,*data*,*callback*);
必需的 URL 參數(shù)規(guī)定您希望加載的 URL。
可選的 data 參數(shù)規(guī)定與請(qǐng)求一同發(fā)送的查詢字符串鍵/值對(duì)集合。
可選的 callback 參數(shù)是 load() 方法完成后所執(zhí)行的函數(shù)名稱。
這是示例文件（"demo_test.txt"）的內(nèi)容：

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

下面的例子會(huì)把文件 "demo_test.txt" 的內(nèi)容加載到指定的 <div> 元素中：
示例

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

親自試一試
也可以把 jQuery 選擇器添加到 URL 參數(shù)。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的內(nèi)容，加載到指定的 <div> 元素中：
實(shí)例

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

親自試一試
可選的 callback 參數(shù)規(guī)定當(dāng) load() 方法完成后所要允許的回調(diào)函數(shù)?；卣{(diào)函數(shù)可以設(shè)置不同的參數(shù)：

• responseTxt - 包含調(diào)用成功時(shí)的結(jié)果內(nèi)容
• statusTXT - 包含調(diào)用的狀態(tài)
• xhr - 包含 XMLHttpRequest 對(duì)象

下面的例子會(huì)在 load() 方法完成后顯示一個(gè)提示框。如果 load() 方法已成功，則顯示“外部內(nèi)容加載成功！”，而如果失敗，則顯示錯(cuò)誤消息：
實(shí)例

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

親自試一試

jQuery AJAX 參考手冊(cè)。

jQuery - AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用于通過 HTTP GET 或 POST 請(qǐng)求從服務(wù)器請(qǐng)求數(shù)據(jù)。

HTTP 請(qǐng)求：GET vs. POST
兩種在客戶端和服務(wù)器端進(jìn)行請(qǐng)求-響應(yīng)的常用方法是：GET 和 POST。

• GET - 從指定的資源請(qǐng)求數(shù)據(jù)
• POST - 向指定的資源提交要處理的數(shù)據(jù)

GET 基本上用于從服務(wù)器獲得（取回）數(shù)據(jù)。注釋：GET 方法可能返回緩存數(shù)據(jù)。
POST 也可用于從服務(wù)器獲取數(shù)據(jù)。不過，POST 方法不會(huì)緩存數(shù)據(jù)，并且常用于連同請(qǐng)求一起發(fā)送數(shù)據(jù)。
如需學(xué)習(xí)更多有關(guān) GET 和 POST 以及兩方法差異的知識(shí)，請(qǐng)閱讀HTTP 方法 - GET 對(duì)比 POST。

jQuery $.get() 方法
$.get() 方法通過 HTTP GET 請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)。
語法：
$.get(URL,callback);
必需的 URL 參數(shù)規(guī)定您希望請(qǐng)求的 URL。
可選的 callback 參數(shù)是請(qǐng)求成功后所執(zhí)行的函數(shù)名。
下面的例子使用 $.get() 方法從服務(wù)器上的一個(gè)文件中取回?cái)?shù)據(jù)：
實(shí)例

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

親自試一試
$.get() 的第一個(gè)參數(shù)是我們希望請(qǐng)求的 URL（"demo_test.asp"）。
第二個(gè)參數(shù)是回調(diào)函數(shù)。第一個(gè)回調(diào)參數(shù)存有被請(qǐng)求頁面的內(nèi)容，第二個(gè)回調(diào)參數(shù)存有請(qǐng)求的狀態(tài)。
提示：這個(gè) ASP 文件 ("demo_test.asp") 類似這樣：

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

jQuery $.post() 方法
$.post() 方法通過 HTTP POST 請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)。
語法：
$.post(URL,data,callback);
必需的 URL 參數(shù)規(guī)定您希望請(qǐng)求的 URL。
可選的 data 參數(shù)規(guī)定連同請(qǐng)求發(fā)送的數(shù)據(jù)。
可選的 callback 參數(shù)是請(qǐng)求成功后所執(zhí)行的函數(shù)名。
下面的例子使用 $.post() 連同請(qǐng)求一起發(fā)送數(shù)據(jù)：
實(shí)例

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

親自試一試
$.post() 的第一個(gè)參數(shù)是我們希望請(qǐng)求的 URL ("demo_test_post.asp")。
然后我們連同請(qǐng)求（name 和 city）一起發(fā)送數(shù)據(jù)。
"demo_test_post.asp" 中的 ASP 腳本讀取這些參數(shù)，對(duì)它們進(jìn)行處理，然后返回結(jié)果。
第三個(gè)參數(shù)是回調(diào)函數(shù)。第一個(gè)回調(diào)參數(shù)存有被請(qǐng)求頁面的內(nèi)容，而第二個(gè)參數(shù)存有請(qǐng)求的狀態(tài)。
提示：這個(gè) 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 & ".")
%>

jQuery AJAX 參考手冊(cè)。

jQuery - noConflict() 方法

如何在頁面上同時(shí)使用 jQuery 和其他框架？

jQuery 和其他 JavaScript 框架
正如您已經(jīng)了解到的，jQuery 使用 $ 符號(hào)作為 jQuery 的簡寫。
如果其他 JavaScript 框架也使用 $ 符號(hào)作為簡寫怎么辦？

其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符號(hào)作為簡寫（就像 jQuery），如果您在用的兩種不同的框架正在使用相同的簡寫符號(hào)，有可能導(dǎo)致腳本停止運(yùn)行。

jQuery 的團(tuán)隊(duì)考慮到了這個(gè)問題，并實(shí)現(xiàn)了 noConflict() 方法。

jQuery noConflict() 方法
noConflict() 方法會(huì)釋放會(huì) $ 標(biāo)識(shí)符的控制，這樣其他腳本就可以使用它了。
實(shí)例
當(dāng)然，您仍然可以通過全名替代簡寫的方式來使用 jQuery：

$.noConflict();
jQuery(document).ready(function(){ 
  jQuery("button").click(function(){ 
    jQuery("p").text("jQuery 仍在運(yùn)行！"); 
  });
});

親自試一試
實(shí)例
您也可以創(chuàng)建自己的簡寫。noConflict() 可返回對(duì) jQuery 的引用，您可以把它存入變量，以供稍后使用。請(qǐng)看這個(gè)例子：

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){ 
    jq("p").text("jQuery 仍在運(yùn)行！"); 
  });
});

親自試一試
實(shí)例
如果你的 jQuery 代碼塊使用 $ 簡寫，并且您不愿意改變這個(gè)快捷方式，那么您可以把 $ 符號(hào)作為變量傳遞給 ready 方法。這樣就可以在函數(shù)內(nèi)使用 $ 符號(hào)了 - 而在函數(shù)外，依舊不得不使用 "jQuery"：

$.noConflict();
jQuery(document).ready(function($){ 
  $("button").click(function(){ 
    $("p").text("jQuery 仍在運(yùn)行！"); 
  });
});

親自試一試

jQuery 核心參考手冊(cè)。