jQuery系列 第八章 jQuery框架Ajax模塊

第八章 jQuery框架Ajax模塊

8.1 jQuery框架中的Ajax簡介

Ajax技術的核心是XMLHTTPRequest對象，該對象是Ajax實現的關鍵，發送異步請求、接收服務器端的響應以及執行回調等操做都是經過XMLHTTPRequest對象來完成的。

jQuery框架對Ajax操做進行了封裝，在jQuery框架的Ajax模塊中提供了不少方法用於網絡編程。咱們主要從Ajax網絡請求、Ajax事件以及序列化等方面講解。

8.2 jQuery框架中的Ajax網絡請求

jQuery框架中爲咱們提供的發送網絡請求方法主要有：

• load方法
• ajax方法
• get方法
• post方法
• getScript方法
• getJSON方法

① load方法

語法 jQ.load(url,[data],[callback])
參數

• url 資源的請求路徑
• data 發送請求時提交的參數，支持查詢字符串和JSON對象格式
• callback 加載完成的回調函數，3形參爲：響應體 + 狀態 + 請求對象

說明該方法請求遠程的資源，並插入到選中的jQ實例對象中。

注意

• 默認發送GET請求，若是傳遞參數(JSON對象)則發送POST請求。
• 支持對返回的數據進行篩選

代碼示例

1 //01 直接加載文件中的數據
2 //默認發送的是GET請求
3 //$("#demo").load("php/test.html");
4 //02 加載文件中的數據，獲取其中的某一部分（進行篩選）
5 //$("#demo").load("php/test.html span");
6 //參數在請求體中進行傳遞
7 $("#demo").load("php/test.html span",{"namme":"zs"});

② ajax方法

語法 $.ajax(url,[settings]) | $.ajax(settings)

經常使用參數說明

• url 資源的請求路徑
• data 發送請求時提交的參數，支持查詢字符串和JSON對象格式
• async 是否異步發送網絡請求
• cache 是否進行緩存處理
• context 指定回調函數中的this指針
• dataType 預期服務器返回的數據類型
• timeout 請求的超時時間
• beforeSend 請求發送前執行的回調函數
• complete 請求完成後執行的回調函數
• error 請求失敗執行的回調函數
• success 請求成功執行的回調函數

說明該方法是jQuery框架中最底層的Ajax實現，用於發送網絡請求。
注意

• 最簡單的狀況下，$.ajax()能夠不帶任何參數直接使用。
• 全部的選項均可以經過$.ajaxSetup()函數來進行全局設置。

代碼示例

 1 $.ajax({
 2             "url":"php/03-ajax.php",  //設置請求路徑
 3             "type":"get", //設置請求方法，不區分大小寫
 4             "success":function (res,status,xhr) {  
 5                 //請求成功的回調
 6                 $("#demo").html(res); //獲取響應狀態碼
 7                 console.log(status);  //獲取請求的狀態
 8                 console.log(xhr);     //獲取請求對象自己
 9                 console.log(this);    //獲取上下文
10             },
11             "error":function (res) {
12                 //請求失敗的回調函數
13                 console.log("失敗");
14                 console.log(res);
15             },  
16             //"data":"name=ls"    //參數：查詢字符串形式
17             "data":{"name":"ls"}, //參數：JSON對象形式
18             "timeout":10，        //設置請求超時的時間 
19             statusText：timeout
20             "context":obj,    //設置回調函數中this的指向
21             "complete":function (res) {
22                 console.log("請求完成");
23                 console.log(res);
24             }
25         });

 

③ get和post方法

語法
[1]$.get(url,[data],[callback]，[type])
[2]$.post(url,[data],[callback]，[type])

參數

• url 資源的請求路徑
• data 發送請求時提交的參數
• callback 請求成功的回調函數
• type 服務器端返回內容的格式：包括xml、html、json、script等

GET和POST對比

• GET請求參數跟在URL後，POST請求參數做爲請求體發送。
• GET請求對參數大小有限制，而POST請求理論上不受限制。
• GET請求的數據會被瀏覽器緩存，存在嚴重的安全性問題。
• 服務器端讀取數據的方式不一樣。在PHP中，區分爲\$_GET和\$_POST。

代碼示例

 1  //發送請求獲取服務器返回的文本,把div的內容替換掉
 2  //第一個參數:url請求路徑(必傳)
 3  //第二個參數:參數 支持兩種形式[查詢字符串][JSON對象]
 4  //第三個參數:success(response,status,xhr)
 5  //         請求成功的回調
 6  //         response:服務器返回的響應體
 7  //         status:狀態說明[success-error]
 8  //         xhr:請求對象
 9  //第四個參數:預期返回的數據類型:json|script|jsonP等
10  $.get("php/03-get.php",{"param1":"value1"},
11      function (response,status,xhr) {
12      console.log(response);
13      console.log(status);
14      console.log(xhr);
15  })
16 //注意點:GET請求請求路徑同樣會緩存,POST請求不會緩存
17  $.post("php/04-post.php",{"param1":"value1"},
18      function (response,status,xhr) {
19      console.log(response);
20      console.log(status);
21      console.log(xhr);
22  }) 

④ getScript和getJson方法

jQuery框架提供了getScript和getJson方法來直接加載js文件和JSON數據

語法

[1] $.getScript(url,[callBack])
[2] $.getJson(url,[callBack])

說明

• getScript方法用於加載js文件，並自動執行。
• getJson方法用於加載JSON數據。

代碼示例

1 $.getScript("test.js", function(){
2      //加載完成後執行的回調函數
3       alert("加載並執行JS文件");
4 });

8.3 jQuery框架中的Ajax事件方法

jQuery框架中除了提供上述方法來發送網絡請求外，還提供了一些事件方法來對調用Ajax方法過程當中的HTTP請求進行精細控制。經過jQuery提供的一些自定義全局函數，可以爲各類與Ajax相關的事件註冊回調函數。jQuery的Ajax全局事件方法以下：

[1] ajaxStart(callBack) =>檢測到網絡請求開始發送會觸發，1次
[2] ajaxStop(callBack) =>檢測到網絡請求結束會觸發，1次
[3] ajaxSend(callBack) =>檢測到網絡請求開始發送會觸發，N次
[4] ajaxComplete(callBack)=>檢測到網絡請求結束會觸發，N次
[5] ajaxError(callBack) => 網絡請求失敗會觸發
[6] ajaxSuccess(callBack) => 網絡請求成功會觸發

 1 $(document).ajaxStart(function () {
 2      console.log("第一個已經開始+++++");
 3      $("#demoID").show(1000);
 4 })
 5 $(document).ajaxStop(function () {
 6      console.log("最後一個已經結束+++++");
 7      $("#demoID").hide(1000);
 8 })
 9 $(document).ajaxSend(function () {
10      console.log("開始發送網絡請求___");
11 })
12 $(document).ajaxComplete(function () {
13     console.log("發送網絡請求完成___");
14 })
15 $.ajax({ //發送網絡請求--A
16     "url":"php/06-other.php",
17     "type":"GET",
18     "success":function (res,status,xhr) {
19           console.log("網絡請求成功--1");
20       }
21 })
22 $.ajax({  //發送網絡請求--B
23     "url":"php/06-other.php",
24     "type":"GET",
25     "success":function (res,status,xhr) {
26           console.log("網絡請求成功--2");
27       }
28 })
29 $(document).ajaxError(function () {
30     console.log("請求失敗");
31 })
32 $(document).ajaxSuccess(function () {
33     console.log("請求成功");
34 })

8.4 jQuery框架中的序列化方法

在開發的時候，常常須要把表單中的數據做爲網絡請求的參數，若是一個一個的獲取再拼接成查詢字符串那麼至關的麻煩，jQuery框架中爲咱們提供了兩個對應的方法，能夠方便解決該需求。

serialize方法可以將DOM元素內容序列化爲查詢字符串。
serializeArray方法能夠將DOM元素序列化後返回JSON格式的數據。

代碼示例

 1 <body>
 2 <form>
 3     <input type="text" name="username" id="demo1">
 4     <input type="text" name="password" id="demo2">
 5 </form>
 6 <button>按鈕</button>
 7 <script>
 8     $("button").click(function () {
 9         $.ajax({
10             "url":"php/07-get.php",
11             //"data":"username="+$("#demo1").val()+"&password=" +$("#demo2").val(),
12             "data":$("form").serialize(),
13             "success":function (res) {
14                 console.log(res);
15             }
16         })
17         //把表單中的key-value按照固定的格式拼接爲查詢字符串:username=lisi&password=abcd
18         console.log($("form").serialize());
19         console.log($("form").serializeArray());
20         //[{"username":"zhangsan"},{"password":"123"}];
21     })
22 </script>
23 </body>

 

 

---

• Posted by 博客園·文頂頂 ~ 文頂頂的我的博客_花田半畝
• 聯繫做者 簡書·文頂頂 新浪微博·文頂頂
• 原創文章，版權聲明：自由轉載-非商用-非衍生-保持署名 | 文頂頂