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