jQuery的AJAX

1.了解AJAX

? AJAX是一種異步技術(shù)，AJAX = 異步 JavaScript 和 XML。也就是說，在不重載整個(gè)網(wǎng)頁的情況下，AJAX 通過后臺(tái)加載數(shù)據(jù)，并在網(wǎng)頁上進(jìn)行顯示。

? 如果使用同步請求會(huì)出現(xiàn)以下問題，任何請求調(diào)轉(zhuǎn)將會(huì)重新刷新頁面，也就是說客戶端發(fā)出的request，要等服務(wù)端返回response，并重新加載response的頁面。這就導(dǎo)致我看視頻，點(diǎn)個(gè)贊，頁面也會(huì)刷新，我的視頻將重新從零開始，這是十分不現(xiàn)實(shí)的事情。

? 而異步請求有以下好處，在不重載整個(gè)網(wǎng)頁的情況下，對頁面進(jìn)行數(shù)據(jù)更新，并在網(wǎng)頁上進(jìn)行顯示。客戶端在發(fā)出的request后，無需再重新等待response，也可以繼續(xù)其他的頁面操作，也就是非同步的形式，不需要request和response一前一后同步。當(dāng)服務(wù)端response時(shí)，AJAX根據(jù)response更改頁面改變的數(shù)據(jù)。

2.AJAX 方法

2.1執(zhí)行ajax請求

在一個(gè)button上click事件捆綁ajax請求。一些重要參數(shù)如下：

• url：服務(wù)器資源
• data：規(guī)定要發(fā)送到服務(wù)器的數(shù)據(jù)，可以是"text"，“json”，“html”，"xml"等格式
• contentType：內(nèi)容的類型，默認(rèn)是：“application/x-www-form-urlencoded”（表單等非文件）。如果使用的是文件形式使用”multipart/form-data“（post形式提交的文件），json格式的用“application/json”。
• dataType：預(yù)期的服務(wù)器響應(yīng)的數(shù)據(jù)類型,如"text"，“json”，“html”，"xml"等格式
• type：規(guī)定請求的類型（GET 或 POST）。
• success(result,status,xhr)：當(dāng)請求成功時(shí)運(yùn)行的函數(shù)。其中result為服務(wù)器返回的結(jié)果，status為狀態(tài)碼
• error(xhr,status,error)：如果請求失敗要運(yùn)行的函數(shù)。error返回的錯(cuò)誤原因，status為狀態(tài)碼

其他的參數(shù)可以上網(wǎng)查，不過用得比較多的就這幾個(gè)了。

<script>$("button").click(function(){$.ajax({url:"checkServlet", //服務(wù)器中的checkServletdata:"butt=check", //"text"格式的數(shù)據(jù)（key=value）type："get" //請求方式success:function(result){ //成功后執(zhí)行的函數(shù)（回調(diào)函數(shù)）$("#div1").html(result);}});}); </script>

2.2用$.get()發(fā)起get形式的ajax請求

$.get()是用來發(fā)送get形式的ajax請求，其實(shí)跟上面的$.ajax指定的get形式的請求。

語法格式如下：

$.get(URL,data,function(data,status,xhr),dataType)

只有如下4個(gè)參數(shù)：

• URL：服務(wù)器資源
• data：數(shù)據(jù)，可以是"text"，“json”，“html”，"xml"等格式
• function(data,status,xhr)：對應(yīng)$.ajax()中的success(result,status,xhr)
• dataType：服務(wù)端預(yù)期返回?cái)?shù)據(jù)類型

使用同樣的例子，注意這里的json_object使用的是json格式的數(shù)據(jù)

<script>$("button").click(function(){$.get("checkServlet", //服務(wù)器中的checkServlet代碼json_object, //json格式的數(shù)據(jù)（這種數(shù)據(jù)格式比較流行）function(data,status){ //對應(yīng)success函數(shù)，$.get只有這種形式的寫法alert("Data: " + data + "Status: " + status);});}); </script>

2.3用$.post()發(fā)起post形式的ajax請求

請求形式：post

語法：

$.post(URL,data,function(data,status,xhr),dataType)

參數(shù)同上：

• URL：服務(wù)器資源
• data：數(shù)據(jù)
• function(data,status,xhr)：對應(yīng)$.ajax()中的success(result,status,xhr)
• dataType：服務(wù)端預(yù)期返回?cái)?shù)據(jù)類型

因?yàn)楦?*$.get()**一樣使用，這里就不重復(fù)例子了。

2.4 使用$.load()

load() 方法從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中。

語法：

$(selector).load(URL,data,callback);

參數(shù)：

• URL：服務(wù)器資源
• data：數(shù)據(jù)，可以是"text"，“json”，“html”，"xml"等格式
• callback：對應(yīng)$.ajax()中的success(result,status,xhr)一樣使用。（回調(diào)函數(shù)）

<script>$(".myspan").click(function(){$.load("checkServlet", //服務(wù)器中的checkServlet代碼json_object, //json格式的數(shù)據(jù)（這種數(shù)據(jù)格式比較流行）}); </script>

可以連callback也省略掉，返回的結(jié)果將直接打印到span

3.請求的數(shù)據(jù)格式

除了注意請求方式：get，post外，我們還應(yīng)該注意請求的數(shù)據(jù)格式，數(shù)據(jù)格式如下：

• “xml” - 一個(gè) XML 文檔
• “html” - HTML 作為純文本
• “text” - 純文本字符串
• “script” - 以 JavaScript 運(yùn)行響應(yīng)，并以純文本返回
• “json” - 以 JSON 運(yùn)行響應(yīng)
• “jsonp” - 使用 JSONP 加載一個(gè) JSON 塊

其中我們比較常用的是"json" 和"text" ，“xml” 。

• 其中"json"為JavaScript原生格式（用得最多的），而且很輕便
• ”text“一般以key，value對（?wd=JavaScript&user=zhangsan）形式，也就地址欄里面的k=v形式。
• 而"xml"先對與"json"來說數(shù)據(jù)結(jié)構(gòu)更嚴(yán)密，但用的空間比較大，一般使用"json"而不使用"xml"，空間較小就意味這傳送跟快。

在jQuery中可以這樣使用"json"格式的數(shù)據(jù)：

var json_str = '{"user":"zhangsan","pwd":"123456"}' var json_object = jQuery.parseJSON(json_str);

然后使用$.post或者$.ajax把數(shù)據(jù)post到服務(wù)端。這樣就可以實(shí)現(xiàn)異步請求啦。

總結(jié)

以上是生活随笔為你收集整理的jQuery的AJAX的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。