jQuery的AJAX

1.了解AJAX

? AJAX是一種異步技術，AJAX = 異步 JavaScript 和 XML。也就是說，在不重載整個網頁的情況下，AJAX 通過后臺加載數據，并在網頁上進行顯示。

? 如果使用同步請求會出現以下問題，任何請求調轉將會重新刷新頁面，也就是說客戶端發出的request，要等服務端返回response，并重新加載response的頁面。這就導致我看視頻，點個贊，頁面也會刷新，我的視頻將重新從零開始，這是十分不現實的事情。

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

2.AJAX 方法

2.1執行ajax請求

在一個button上click事件捆綁ajax請求。一些重要參數如下：

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

其他的參數可以上網查，不過用得比較多的就這幾個了。

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

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

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

語法格式如下：

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

只有如下4個參數：

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

使用同樣的例子，注意這里的json_object使用的是json格式的數據

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

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

請求形式：post

語法：

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

參數同上：

• URL：服務器資源
• data：數據
• function(data,status,xhr)：對應$.ajax()中的success(result,status,xhr)
• dataType：服務端預期返回數據類型

因為跟**$.get()**一樣使用，這里就不重復例子了。

2.4 使用$.load()

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

語法：

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

參數：

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

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

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

3.請求的數據格式

除了注意請求方式：get，post外，我們還應該注意請求的數據格式，數據格式如下：

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

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

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

在jQuery中可以這樣使用"json"格式的數據：

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

然后使用$.post或者$.ajax把數據post到服務端。這樣就可以實現異步請求啦。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。