使用Ajax的三種方式

時間 2019-11-10

標籤使用 ajax 三種方式欄目 Ajax 简体版

原文原文鏈接

Ajax原生XmlHttpRequest的使用html

1. XmlHttpRequest對象的主要方法ajax

 1 a. void open(String method,String url,Boolen async)
 2    用於建立請求
 3     
 4    參數：
 5        method： 請求方式（字符串類型），如：POST、GET、DELETE...
 6        url：    要請求的地址（字符串類型）
 7        async：  是否異步（布爾類型）
 8  
 9 b. void send(String body)
10     用於發送請求
11  
12     參數：
13         body： 要發送的數據（字符串類型）
14  
15 c. void setRequestHeader(String header,String value)
16     用於設置請求頭
17  
18     參數：
19         header： 請求頭的key（字符串類型）
20         vlaue：  請求頭的value（字符串類型）
21  
22 d. String getAllResponseHeaders()
23     獲取全部響應頭
24  
25     返回值：
26         響應頭數據（字符串類型）
27  
28 e. String getResponseHeader(String header)
29     獲取響應頭中指定header的值
30  
31     參數：
32         header： 響應頭的key（字符串類型）
33  
34     返回值：
35         響應頭中指定的header對應的值
36  
37 f. void abort()
38  
39     終止請求

View Code

2. XmlHttpRequest對象的主要屬性json

 1 a. Number readyState
 2    狀態值（整數）
 3  
 4    詳細：
 5       0-未初始化，還沒有調用open()方法；
 6       1-啓動，調用了open()方法，未調用send()方法；
 7       2-發送，已經調用了send()方法，未接收到響應；
 8       3-接收，已經接收到部分響應數據；
 9       4-完成，已經接收到所有響應數據；
10  
11 b. Function onreadystatechange
12    當readyState的值改變時自動觸發執行其對應的函數（回調函數）
13  
14 c. String responseText
15    服務器返回的數據（字符串類型）
16  
17 d. XmlDocument responseXML
18    服務器返回的數據（Xml對象）
19  
20 e. Number states
21    狀態碼（整數），如：200、404...
22  
23 f. String statesText
24    狀態文本（字符串），如：OK、NotFound...

View Code

3. XmlHttpRequest對象的完整使用代碼服務器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <input type="button" value="AjaxGet" onclick="AjaxClickGet();">
10 <input type="button" value="AjaxPost" onclick="AjaxClickPost();">
11 
12 <script>
13     function AjaxClickGet() {
14         var xhr = new XMLHttpRequest();
15         xhr.open("GET", "/ajax/ajax_get.html/", true);
16         xhr.setRequestHeader("key1", "value1");  //設置請求頭
17         xhr.send("name=root;pwd=123"); //注意send函數參數的固定格式
18         xhr.onreadystatechange = function (ev) {
19             if(xhr.readyState == 4){
20                 //接受數據完畢
21                 console.log(xhr.responseText);
22                 obj = JSON.parse(xhr.responseText); //字符串轉爲json對象
23                 console.log(obj)
24             }
25         }
26     }
27 
28     function AjaxClickPost() {
29         var xhr = new XMLHttpRequest();
30         xhr.open("POST", "/ajax/ajax_post.html/", true);
31         //以 POST 方式發出請求時, 必須包含下面的 "請求頭"
32         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset-UTF-8");
33         xhr.send("name=to2bage;pwd=123");
34         xhr.onreadystatechange = function (ev) {
35             if(xhr.readyState == 4){
36                 obj = JSON.parse(xhr.responseText);
37                 console.log(obj)
38             }
39         }
40     }
41 </script>
42 </body>
43 </html>

View Code

jQuery的使用app

1. jQuery 的Ajax的方法異步

 1 jQuery.get(...)
 2                 全部參數：
 3                      url: 待載入頁面的URL地址
 4                     data: 待發送 Key/value 參數。
 5                  success: 載入成功時回調函數。
 6                 dataType: 返回內容格式，xml, json,  script, text, html
 7 
 8 
 9             jQuery.post(...)
10                 全部參數：
11                      url: 待載入頁面的URL地址
12                     data: 待發送 Key/value 參數
13                  success: 載入成功時回調函數
14                 dataType: 返回內容格式，xml, json,  script, text, html
15 
16 
17             jQuery.getJSON(...)
18                 全部參數：
19                      url: 待載入頁面的URL地址
20                     data: 待發送 Key/value 參數。
21                  success: 載入成功時回調函數。
22 
23 
24             jQuery.getScript(...)
25                 全部參數：
26                      url: 待載入頁面的URL地址
27                     data: 待發送 Key/value 參數。
28                  success: 載入成功時回調函數。
29 
30 
31             jQuery.ajax(...)
32 
33                 部分參數：
34 
35                         url：請求地址
36                        type：請求方式，GET、POST（1.9.0以後用method）
37                     headers：請求頭
38                        data：要發送的數據
39                 contentType：即將發送信息至服務器的內容編碼類型(默認: "application/x-www-form-urlencoded; charset=UTF-8")
40                       async：是否異步
41                     timeout：設置請求超時時間（毫秒）
42 
43                  beforeSend：發送請求前執行的函數(全局)
44                    complete：完成以後執行的回調函數(全局)
45                     success：成功以後執行的回調函數(全局)
46                       error：失敗以後執行的回調函數(全局)
47                 
48 
49                     accepts：經過請求頭髮送給服務器，告訴服務器當前客戶端課接受的數據類型
50                    dataType：將服務器端返回的數據轉換成指定類型
51                                    "xml": 將服務器端返回的內容轉換成xml格式
52                                   "text": 將服務器端返回的內容轉換成普通文本格式
53                                   "html": 將服務器端返回的內容轉換成普通文本格式，在插入DOM中時，若是包含JavaScript標籤，則會嘗試去執行。
54                                 "script": 嘗試將返回值看成JavaScript去執行，而後再將服務器端返回的內容轉換成普通文本格式
55                                   "json": 將服務器端返回的內容轉換成相應的JavaScript對象
56                                  "jsonp": JSONP 格式
57                                           使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數
58 
59                                   若是不指定，jQuery 將自動根據HTTP包MIME信息返回相應類型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string
60 
61                  converters： 轉換器，將服務器端的內容根據指定的dataType轉換類型，並傳值給success回調函數
62                          $.ajax({
63                               accepts: {
64                                 mycustomtype: 'application/x-some-custom-type'
65                               },
66                               
67                               // Expect a `mycustomtype` back from server
68                               dataType: 'mycustomtype'
69 
70                               // Instructions for how to deserialize a `mycustomtype`
71                               converters: {
72                                 'text mycustomtype': function(result) {
73                                   // Do Stuff
74                                   return newresult;
75                                 }
76                               },
77                             });
78 
79 jQuery Ajax 方法列表