????:前端對(duì)于頁面的一些特效、驗(yàn)證、交互等等,都是通過Javascript語言進(jìn)行完成的,是前臺(tái)最基礎(chǔ)的語言,而JQuery則是對(duì)js代碼的封裝,方便我們前臺(tái)代碼的編寫,而且它還有一個(gè)非常大的優(yōu)勢(shì)就是解決了瀏覽器的兼容問題,這也是我們使用它非常重要的原因之一,關(guān)于JQuery的優(yōu)點(diǎn)寫半天不一定能寫完,在這里就不一一贅述了?! 《F(xiàn)在為了滿足用戶的需求,AJAX(Asynchronous Javascri
前端對(duì)于頁面的一些特效、驗(yàn)證、交互等等,都是通過Javascript語言進(jìn)行完成的,是前臺(tái)最基礎(chǔ)的語言,而JQuery則是對(duì)js代碼的封裝,方便我們前臺(tái)代碼的編寫,而且它還有一個(gè)非常大的優(yōu)勢(shì)就是解決了瀏覽器的兼容問題,這也是我們使用它非常重要的原因之一,關(guān)于JQuery的優(yōu)點(diǎn)寫半天不一定能寫完,在這里就不一一贅述了。
而現(xiàn)在為了滿足用戶的需求,AJAX(Asynchronous Javascript + XML)異步刷新起到了無可比擬的作用。當(dāng)然AJAX的作用不僅僅只是刷新頁面那么單一。這里只是拿異步刷新頁面來說一說。其中AJAX實(shí)現(xiàn)異步刷新頁面的基礎(chǔ)原理就是在內(nèi)部調(diào)用了JS的 XMLHttpRequest 對(duì)象,然后發(fā)送了HTTP請(qǐng)求,從而拿到后臺(tái)的數(shù)據(jù),更新頁面。
JQuery也對(duì)AJAX異步操作進(jìn)行了封裝,這里看一下幾種常用的方式: $.ajax、$.post、$.get、$.getJSON。下面來看一下他們的使用方法,其實(shí)很簡單的。我這里只是簡單的列舉了一下,非常的基礎(chǔ),如果有對(duì)AJAX感興趣的園友,那就再好好的查下資料研究一下。
一、$.ajax
這個(gè)是JQuery對(duì)AJAX封裝的最基礎(chǔ)步驟,通過使用這個(gè)函數(shù)可以完成異步通訊的所有功能。也就是說什么情況下我們都可以通過此方法進(jìn)行異步刷新的操作。但是它的參數(shù)較多,有的時(shí)候可能會(huì)麻煩一些??匆幌鲁S玫膮?shù):
var Obj = { method //數(shù)據(jù)的提交方式:get和post 默認(rèn)的是get url //數(shù)據(jù)請(qǐng)求的路徑 async //是否支持異步刷新,默認(rèn)是true data //需要提交的數(shù)據(jù)參數(shù),是一個(gè)對(duì)象 dataType //服務(wù)器返回?cái)?shù)據(jù)的類型,一般采用json格式,可以設(shè)置為“json” success //請(qǐng)求成功后的回調(diào)函數(shù),傳入返回后的數(shù)據(jù),以及包含成功代碼的字符串 error //請(qǐng)求失敗后的回調(diào)函數(shù) } $.ajax(Obj);//通過$.ajax函數(shù)進(jìn)行調(diào)用。
好,看一個(gè)實(shí)際的例子吧,看一個(gè)進(jìn)行異步刪除的例子:
$.ajax({ type : "POST", //提交方式 url : "xxxxxxxxx",//路徑 data : { "id" : "xxx" },//數(shù)據(jù),這里使用的是Json格式進(jìn)行傳輸 success : function(result) {//返回?cái)?shù)據(jù)根據(jù)結(jié)果進(jìn)行相應(yīng)的處理 if ( result.success ) { $("xxxx).text("刪除數(shù)據(jù)成功"); tree.deleteItem("xxx", true); } else { $("xxxx").text("刪除數(shù)據(jù)失敗"); } } });
二、$.post
這個(gè)函數(shù)其實(shí)就是對(duì)$.ajax進(jìn)行了更進(jìn)一步的封裝,減少了參數(shù),簡化了操作,但是運(yùn)用的范圍更小了。$.post簡化了數(shù)據(jù)提交方式,只能采用POST方式提交。只能是異步訪問服務(wù)器,不能同步訪問,不能進(jìn)行錯(cuò)誤處理。在滿足這些情況下,我們可以使用這個(gè)函數(shù)來方便我們的編程,它的主要幾個(gè)參數(shù),像method,async等進(jìn)行了默認(rèn)設(shè)置,我們不可以改變的。例子不再介紹。
url:發(fā)送請(qǐng)求地址。
data:待發(fā)送 Key/value 參數(shù)。
callback:發(fā)送成功時(shí)回調(diào)函數(shù)。
type:返回內(nèi)容格式:xml、html、 script、 json、 text等。
三、$.get
$.get和$.post一樣,這個(gè)函數(shù)是對(duì)get方法的提交數(shù)據(jù)進(jìn)行封裝,只能使用在get提交數(shù)據(jù)解決異步刷新的方式上,使用方式和上邊的也差不多。這里不再演示。
四、$.getJSON
這個(gè)是進(jìn)一步的封裝,也就是對(duì)返回?cái)?shù)據(jù)類型為Json進(jìn)行操作。里邊就三個(gè)參數(shù)需要我們?cè)O(shè)置也非常簡單:url、data、callback。
其實(shí)會(huì)了$.ajax方法,其它的就都會(huì)使用了,其實(shí)非常簡單。學(xué)習(xí)編程,其實(shí)就是學(xué)習(xí)對(duì)數(shù)據(jù)的流轉(zhuǎn)處理,如何從后臺(tái)獲取,服務(wù)器進(jìn)行相應(yīng)的處理然后返回,瀏覽器在進(jìn)行解析及渲染出來,在通過其它的技術(shù),將客戶的需求完美呈現(xiàn),給用戶更好的體驗(yàn),就完成了網(wǎng)頁的開發(fā),感覺還是非常有意思的。