jQuery - AJAX 簡介
AJAX 是與服務器交換數(shù)據(jù)的藝術漓穿,它在不重載全部頁面的情況下,實現(xiàn)了對部分網頁的更新。
jQuery AJAX 實例
點擊按鈕并闲,通過 jQuery AJAX 改變一段文本倚舀。
獲得外部的內容
親自試一試
什么是 AJAX叹哭?
AJAX = 異步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
簡短地說痕貌,在不重載整個網頁的情況下风罩,AJAX 通過后臺加載數(shù)據(jù),并在網頁上進行顯示舵稠。
使用 AJAX 的應用程序案例:谷歌地圖超升、騰訊微博入宦、優(yōu)酷視頻、人人網等等室琢。
您可以在 AJAX 教程中學到更多有關 AJAX 的知識乾闰。
關于 jQuery 與 AJAX
jQuery 提供多個與 AJAX 有關的方法。
通過 jQuery AJAX 方法盈滴,您能夠使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本涯肩、HTML、XML 或 JSON - 同時您能夠把這些外部數(shù)據(jù)直接載入網頁的被選元素中巢钓。
提示:如果沒有 jQuery病苗,AJAX 編程還是有些難度的。
編寫常規(guī)的 AJAX 代碼并不容易竿报,因為不同的瀏覽器對 AJAX 的實現(xiàn)并不相同铅乡。這意味著您必須編寫額外的代碼對瀏覽器進行測試。不過烈菌,jQuery 團隊為我們解決了這個難題阵幸,我們只需要一行簡單的代碼,就可以實現(xiàn) AJAX 功能芽世。
jQuery - AJAX load() 方法
jQuery load() 方法
jQuery load() 方法是簡單但強大的 AJAX 方法挚赊。
load() 方法從服務器加載數(shù)據(jù),并把返回的數(shù)據(jù)放入被選元素中济瓢。
語法:
$(*selector*).load(*URL*,*data*,*callback*);
必需的 URL 參數(shù)規(guī)定您希望加載的 URL荠割。
可選的 data 參數(shù)規(guī)定與請求一同發(fā)送的查詢字符串鍵/值對集合。
可選的 callback 參數(shù)是 load() 方法完成后所執(zhí)行的函數(shù)名稱旺矾。
這是示例文件("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 參數(shù)蔑鹦。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的內容,加載到指定的 <div> 元素中:
實例
$("#div1").load("demo_test.txt #p1");
親自試一試
可選的 callback 參數(shù)規(guī)定當 load() 方法完成后所要允許的回調函數(shù)箕宙『啃啵回調函數(shù)可以設置不同的參數(shù):
- responseTxt - 包含調用成功時的結果內容
- statusTXT - 包含調用的狀態(tài)
- 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);
});
});
jQuery - AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通過 HTTP GET 或 POST 請求從服務器請求數(shù)據(jù)凤跑。
HTTP 請求:GET vs. POST
兩種在客戶端和服務器端進行請求-響應的常用方法是:GET 和 POST爆安。
- GET - 從指定的資源請求數(shù)據(jù)
- POST - 向指定的資源提交要處理的數(shù)據(jù)
GET 基本上用于從服務器獲得(取回)數(shù)據(jù)。注釋:GET 方法可能返回緩存數(shù)據(jù)仔引。
POST 也可用于從服務器獲取數(shù)據(jù)扔仓。不過致扯,POST 方法不會緩存數(shù)據(jù),并且常用于連同請求一起發(fā)送數(shù)據(jù)当辐。
如需學習更多有關 GET 和 POST 以及兩方法差異的知識,請閱讀HTTP 方法 - GET 對比 POST鲤看。
jQuery $.get() 方法
$.get() 方法通過 HTTP GET 請求從服務器上請求數(shù)據(jù)缘揪。
語法:
$.get(URL,callback);
必需的 URL 參數(shù)規(guī)定您希望請求的 URL。
可選的 callback 參數(shù)是請求成功后所執(zhí)行的函數(shù)名义桂。
下面的例子使用 $.get() 方法從服務器上的一個文件中取回數(shù)據(jù):
實例
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
親自試一試
$.get() 的第一個參數(shù)是我們希望請求的 URL("demo_test.asp")找筝。
第二個參數(shù)是回調函數(shù)。第一個回調參數(shù)存有被請求頁面的內容慷吊,第二個回調參數(shù)存有請求的狀態(tài)袖裕。
提示:這個 ASP 文件 ("demo_test.asp") 類似這樣:
<%
response.write("This is some text from an external ASP file.")
%>
jQuery $.post() 方法
$.post() 方法通過 HTTP POST 請求從服務器上請求數(shù)據(jù)。
語法:
$.post(URL,data,callback);
必需的 URL 參數(shù)規(guī)定您希望請求的 URL溉瓶。
可選的 data 參數(shù)規(guī)定連同請求發(fā)送的數(shù)據(jù)急鳄。
可選的 callback 參數(shù)是請求成功后所執(zhí)行的函數(shù)名。
下面的例子使用 $.post() 連同請求一起發(fā)送數(shù)據(jù):
實例
$("button").click(function(){
$.post("demo_test_post.asp", {
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
親自試一試
$.post() 的第一個參數(shù)是我們希望請求的 URL ("demo_test_post.asp")堰酿。
然后我們連同請求(name 和 city)一起發(fā)送數(shù)據(jù)疾宏。
"demo_test_post.asp" 中的 ASP 腳本讀取這些參數(shù),對它們進行處理触创,然后返回結果坎藐。
第三個參數(shù)是回調函數(shù)。第一個回調參數(shù)存有被請求頁面的內容哼绑,而第二個參數(shù)存有請求的狀態(tài)岩馍。
提示:這個 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 - noConflict() 方法
如何在頁面上同時使用 jQuery 和其他框架抖韩?
jQuery 和其他 JavaScript 框架
正如您已經了解到的蛀恩,jQuery 使用 $ 符號作為 jQuery 的簡寫。
如果其他 JavaScript 框架也使用 $ 符號作為簡寫怎么辦帽蝶?
其他一些 JavaScript 框架包括:MooTools赦肋、Backbone、Sammy励稳、Cappuccino佃乘、Knockout、JavaScript MVC驹尼、Google Web Toolkit趣避、Google Closure、Ember新翎、Batman 以及 Ext JS程帕。
其中某些框架也使用 $ 符號作為簡寫(就像 jQuery)住练,如果您在用的兩種不同的框架正在使用相同的簡寫符號,有可能導致腳本停止運行愁拭。
jQuery 的團隊考慮到了這個問題讲逛,并實現(xiàn)了 noConflict() 方法。
jQuery noConflict() 方法
noConflict() 方法會釋放會 $ 標識符的控制岭埠,這樣其他腳本就可以使用它了盏混。
實例
當然,您仍然可以通過全名替代簡寫的方式來使用 jQuery:
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在運行惜论!");
});
});
親自試一試
實例
您也可以創(chuàng)建自己的簡寫许赃。noConflict() 可返回對 jQuery 的引用,您可以把它存入變量馆类,以供稍后使用混聊。請看這個例子:
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍在運行!");
});
});
親自試一試
實例
如果你的 jQuery 代碼塊使用 $ 簡寫乾巧,并且您不愿意改變這個快捷方式句喜,那么您可以把 $ 符號作為變量傳遞給 ready 方法。這樣就可以在函數(shù)內使用 $ 符號了 - 而在函數(shù)外卧抗,依舊不得不使用 "jQuery":
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍在運行藤滥!");
});
});