AJAX基礎

內容：

1.什麼是AJAX

2.如何使用AJAX

3.將AJAX封裝成函數

4.AJAX其餘封裝

5.AJAX同步與異步

6.jQuery中Ajax方法的使用

 

 

 

1.什麼是AJAX

AJAX 是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術

AJAX = Asynchronous JavaScript and XML，意思就是用JavaScript執行異步網絡請求

AJAX 是一種用於建立快速動態網頁的技術，經過在後臺與服務器進行少許數據交換，使網頁實現異步更新。這意味着能夠在不重載整個頁面的狀況下，對網頁的某些部分進行更新。

而傳統的網頁（不使用 AJAX）若是須要更新內容，必須重載整個頁面。

AJAX 最大的優勢是在不從新加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容。（這一特色給用戶的感覺是在不知不覺中完成請求和響應過程）

 

 

2.如何使用AJAX

用JavaScript寫一個完整的AJAX代碼並不複雜，可是須要注意：AJAX請求是異步執行的，也就是說，要經過回調函數得到響應

在現代瀏覽器上寫AJAX主要依靠XMLHttpRequest對象：

 1 // GET
 2 // 1.建立 AJAX 對象
 3 var r = new XMLHttpRequest()
 4 // 2.鏈接 - 設置請求方法和請求地址
 5 r.open('GET', '/login', true)
 6 // 3.發送請求
 7 r.send()
 8 // 4.接受響應
 9 r.onreadystatechange = function() {
10     console.log('state change: ', r)
11 }
12 
13 
14 // POST
15 // 1.建立 AJAX 對象
16 var r = new XMLHttpRequest()
17 // 2.鏈接 - 設置請求方法和請求地址
18 r.open('POST', '/login', true)
19 // 3.設置發送的數據的格式
20 r.setRequestHeader('Content-Type', 'application/json')
21 // 4.發送請求
22 var account = {
23     username: 'gua',
24     password: '123',
25 }
26 var data = JSON.stringify(account)
27 r.send(data)
28 // 5.接受響應
29 r.onreadystatechange = function() {
30     if (r.readyState === 4) {
31         console.log('state change: ', r, r.status, r.response)
32         // 轉換格式
33         var response = JSON.parse(r.response)
34         console.log('response', response)
35     } else {
36         console.log('change')
37     }
38 }

 

固然咱們也能夠把上述過程封裝一下：

1 var ajax = function(method, path, data, responseCallback) {
2     // method是請求方法(GET or POST) path是請求路徑 
3     // data是發送的數據(對象類型) responseCallback是響應函數
4 
5 
6 }

注意：

• method是請求方法，通常是GET or POST
• path是請求路徑，通常不能跨域請求
• data是發送到服務端的數據，是字符串或列表格式
• responseCallback是回調函數，此回調函數將在服務器響應後調用，通常給此回調函數傳入服務器響應數據，而後回調函數中的代碼其實是前端操做頁面(增刪改查)的代碼

 

 

3.將AJAX封裝成函數

 1 /*
 2  ajax 函數
 3 */
 4 var ajax = function(method, path, data, reseponseCallback) {
 5     var r = new XMLHttpRequest();
 6     // 設置請求方法和請求地址
 7     r.open(method, path, true);
 8     // 設置發送的數據的格式爲 application/json
 9     // 這個不是必須的
10     r.setRequestHeader('Content-Type', 'application/json');
11     // 註冊響應函數
12     r.onreadystatechange = function() {
13         if(r.readyState === 4) {
14             // r.response 存的就是服務器發過來的放在 HTTP BODY 中的數據
15             reseponseCallback(r.response);
16         }
17     };
18     // 把數據轉換爲 json 格式字符串
19     data = JSON.stringify(data);
20     // 發送請求
21     r.send(data);
22 };

 

 

4.AJAX其餘封裝

AJAX其餘封裝方法以下：

 1 // AJAX的GET方法 
 2 var ajaxGet = function(url, callback) {
 3     /*
 4         實現 ajaxGet 函數, 用 GET 方法請求一個 URL
 5         url 是一個 URL
 6         callback 是一個函數, 在接受服務器響應後調用並傳遞參數給它
 7     */
 8     var r = new XMLHttpRequest()
 9     r.open('GET', url, true)
10     // 設置發送的數據的格式爲 application/json (API要求就要設置 不要求就不用設置)
11     r.setRequestHeader('Content-Type', 'application/json');
12     r.onreadystatechange = function(event) {
13         if(r.readyState === 4) {
14             // r.response是服務端響應的數據
15             callback(r.response)
16         }
17     }
18     r.send()
19 }
20 
21 
22 // AJAX的POST方法 
23 var ajaxPost = function(url, data, callback) {
24     /*
25         實現 ajaxPost 函數, 用 POST 方法向一個 URL 提交數據
26         url 是一個 URL  data 是提交到服務器的數據
27         callback 是一個函數, 在接受服務器響應後調用並傳遞參數給它
28     */
29     var r = new XMLHttpRequest()
30     r.open('GET', url, true) 
31     // 設置發送的數據的格式爲 application/json (API要求就要設置 不要求就不用設置)
32     r.setRequestHeader('Content-Type', 'application/json');
33     r.onreadystatechange = function(event) {
34         if(r.readyState === 4) {
35             // r.response是服務端響應的數據
36             callback(r.response)
37         }
38     }
39     // 把數據轉換爲 json 格式字符串 -> 字典轉換成字符串
40     data = JSON.stringify(data)
41     r.send(data)
42 }
43 
44 
45 // AJAX參數所有封裝成一個request對象
46 var ajax = function(request) {
47     /*
48     request 是一個 object, 有以下屬性
49         method, 請求的方法, string
50         url, 請求的路徑, string
51         data, 請求發送的數據, 若是是 GET 方法則沒這個值, string
52         callback, 響應回調, function
53         contentType , 提交數據的類型, API要求就要指定
54     */
55     var r = new XMLHttpRequest()
56     r.open(request.method, request.url, true)
57     if (request.contentType !== undefined) {
58         r.setRequestHeader('Content-Type', request.contentType)
59     }
60     r.onreadystatechange = function(event) {
61         if(r.readyState === 4) {
62             request.callback(r.response)
63         }
64     }
65     if (request.method === 'GET') {
66         r.send()
67     } else {
68         r.send(request.data)
69     }
70 }
71 
72 // ajax函數的使用實例
73 var account = {
74     'username': 'xiaogua',
75     password: '123'
76 }
77 var data = JSON.stringify(account)
78 var r = {
79     method: 'POST',
80     url: '/login',
81     contentType:  'application/json',
82     data: data,
83     callback: function(response) {
84         console.log('響應', response)
85         var res = JSON.parse(response)
86         if (res.success) {
87             window.location.href = '/'
88         } else {
89             alert('登陸失敗')
90         }
91     }
92 }
93 ajax(r)

 

 

5.AJAX同步與異步

AJAX同步與異步：上述open方法的第三個參數爲true或false，true表示使用異步請求，而false表示使用同步請求，通常AJAX都使用異步請求也就是說AJAX的open方法第三個參數通常設置爲true！

關於同步與異步：

• 同步是指：發送方發出數據後，等接收方發回響應之後才發下一個數據包的通信方式
• 異步是指：發送方發出數據後，不等接收方發回響應，接着發送下個數據包的通信方式

同步請求:  客戶端請求(等待)->服務端處理->響應->頁面載入（缺乏對象:XMLhttpRequest） 這時候若是有錯誤，只能再次發送請求，再次等待

異步請求：好比當你填寫郵箱地址的時候，頁面當時就把郵箱地址發送到了服務器（也就是頁面發送了一個請求），服務器作處理和響應，獲得你的郵箱地址填寫重複了，把響應結果發給頁面，在這個過程當中你仍然能夠填寫其餘內容，這時候服務器會提示你有重複的郵箱地址，在頁面上的表現只是郵箱地址旁別加了一行字或者把整個文本框標紅，並無從新刷你的頁面，全部的填寫錯誤會實時的顯示出來，你也會實時的更正。這個過程當中，你會有整個頁面的刷新，也不會有整個頁面的提交和等待，最後提交，一切都會搞定的

使用異步請求頁面上的操做和服務器端的操做互相之間不會形成阻塞

 

面試題 - 創建一個異步請求的過程：

1. new一個XHR對象
2. 調用open方法
3. send一些數據
4. 對過程進行監聽，來知道服務器是否是正確地作出了響應，接着能夠作一些事情好比說向頁面中插入元素(提示信息、成功信息等)

 

 

6.jQuery中Ajax方法的使用

使用以前引用jQuery，而後寫下如下代碼便可：

 1 $.ajax({
 2     type : "post",  // 向後臺請求的方式，有post，get兩種方法 不寫默認爲get
 3     url : "xxx",    // url填寫的是請求的路徑
 4     cache : false,  // 緩存是否打開
 5     data : {  
 6         "name" : "xxx",
 7         "age" : 22
 8     },  // 請求的數據
 9     dataType : 'json',  // 請求的數據類型
10     success : function(data) {  // 請求的返回成功的方法
11         xxx
12     },
13     error : function(XMLHttpRequest, textStatus, errorThrown) {
14             alert(textStatus);
15             alert("失敗了"+errorThrown)
16         }
17 });