jQuery - AJAX (附加:noConflict()方法)

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 參考手冊


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 AJAX 參考手冊


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 仍在運行藤滥!"); 
  });
});

親自試一試


jQuery 核心參考手冊

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末社裆,一起剝皮案震驚了整個濱河市拙绊,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌泳秀,老刑警劉巖标沪,帶你破解...
    沈念sama閱讀 223,126評論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異嗜傅,居然都是意外死亡金句,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評論 3 400
  • 文/潘曉璐 我一進店門吕嘀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來违寞,“玉大人,你說我怎么就攤上這事偶房〕寐” “怎么了?”我有些...
    開封第一講書人閱讀 169,941評論 0 366
  • 文/不壞的土叔 我叫張陵棕洋,是天一觀的道長挡闰。 經常有香客問我,道長,這世上最難降的妖魔是什么摄悯? 我笑而不...
    開封第一講書人閱讀 60,294評論 1 300
  • 正文 為了忘掉前任赞季,我火速辦了婚禮,結果婚禮上奢驯,老公的妹妹穿的比我還像新娘申钩。我一直安慰自己,他們只是感情好瘪阁,可當我...
    茶點故事閱讀 69,295評論 6 398
  • 文/花漫 我一把揭開白布典蜕。 她就那樣靜靜地躺著,像睡著了一般罗洗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上钢猛,一...
    開封第一講書人閱讀 52,874評論 1 314
  • 那天伙菜,我揣著相機與錄音,去河邊找鬼命迈。 笑死贩绕,一個胖子當著我的面吹牛,可吹牛的內容都是我干的壶愤。 我是一名探鬼主播淑倾,決...
    沈念sama閱讀 41,285評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼征椒!你這毒婦竟也來了娇哆?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,249評論 0 277
  • 序言:老撾萬榮一對情侶失蹤勃救,失蹤者是張志新(化名)和其女友劉穎碍讨,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蒙秒,經...
    沈念sama閱讀 46,760評論 1 321
  • 正文 獨居荒郊野嶺守林人離奇死亡勃黍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,840評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了晕讲。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片覆获。...
    茶點故事閱讀 40,973評論 1 354
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖瓢省,靈堂內的尸體忽然破棺而出弄息,到底是詐尸還是另有隱情,我是刑警寧澤净捅,帶...
    沈念sama閱讀 36,631評論 5 351
  • 正文 年R本政府宣布疑枯,位于F島的核電站,受9級特大地震影響蛔六,放射性物質發(fā)生泄漏荆永。R本人自食惡果不足惜废亭,卻給世界環(huán)境...
    茶點故事閱讀 42,315評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望具钥。 院中可真熱鬧豆村,春花似錦、人聲如沸骂删。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽宁玫。三九已至粗恢,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間欧瘪,已是汗流浹背眷射。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評論 1 275
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留佛掖,地道東北人妖碉。 一個月前我還...
    沈念sama閱讀 49,431評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像芥被,于是被迫代替她去往敵國和親欧宜。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,982評論 2 361

推薦閱讀更多精彩內容