ajax原理(原生js詳解)

什麼是ajax？

AJAX即」Asynchronous Javascript And XML「(異步JavaScript和XML)，是指一種建立交互式網頁應用的網頁開發技術。

經過在後臺與服務器進行少許數據交換，AJAX能夠是網頁實現異步更新。這就意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行局部更新。

如何使用AJAX？

第一步：建立一個異步調用對象

1 let xhr = new XMLHttpRequest();

第二步：建立一個新的‘HTTP’請求

1 xhr.open('get','http://shujvjiekou.php',true);

參數一：請求方式(get/post/put...)；參數二：請求地址(接口地址)；參數三：是否異步

第三步：發送解析，不涉及傳輸數據的話，參數爲空。

1 xhr.send();

在send過程當中要進行5步操做

第一步：請求初始化(open沒有調用)。                         就緒狀態碼錶示爲0

第二步：請求已經創建,可是尚未發送。                    就緒狀態碼錶示爲1

第三步：請求已經發送,準備處理。                               就緒狀態碼錶示爲2

第四步：請求處理,獲取內容的基本信息。                     就緒狀態碼錶示爲3

第五步：請求響應所有完成,響應服務器的一切內容。   就緒狀態碼錶示爲4

第四步：取到接口數據。

 1 xhr.onreadystatechange = function () {
 2             if (xhr.readyState == 4) {//就緒碼爲4，表明請求相應完成
 3                 if (xhr.status === 200) {//http狀態碼爲200時（鏈接成功）
 4                     let data = JSON.parse(xhr.responseText);//獲取接口返回的數據。類型是字符串。並將json格式字符串轉換爲對象
 5                 }else {
 6                     //拋錯
 7                     throw new Error('接口地址有誤' + xhr.status);//.status   http狀態碼
 8                 }
 9             }
10         }

若是向後端傳輸數據？

1.若是是經過get方式，那麼咱們能夠把數據放在請求地址中，將數據用「?」鏈接。

須要注意的是，若是傳輸數據是一個對象，那麼咱們須要對對象進行處理。

 1 function objtostring(obj) {
 2             if (Object.prototype.toString.call(obj).slice(8, -1) === 'Object') {
 3                 let arr = [];
 4                 for (let attr in obj) {
 5                     arr.push(attr + '=' + obj[attr])//[a=1, b=2 ,c=3]
 6                 }
 7                 return arr.join('&');////a=1&b=2&c=3
 8             } else {
 9                 throw new Error('你輸入的不是對象格式');
10             }
11         }

2.若是是經過post傳輸，咱們須要注意的是，必需要設置請求頭！

1 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

傳輸的數據放在send裏面。

 

用原生js封裝一個簡單的ajax

 1         //ajax四部曲
 2         function $ajax(obj) {
 3             //判斷傳輸的數據是不是對象
 4             function objtostring(obj) {
 5                 //定義一個空數組
 6                 let arr = [];
 7                 if (Object.prototype.toString.call(obj).slice(8, -1) === 'Object') {
 8                     for (let value in obj) {
 9                         arr.push(value + '=' + obj[value]);
10                     }
11                     return arr.join('&');//將數組轉換成由&拼接的字符串；
12                 } else {
13                     throw new Error('你輸入的不是一個純粹的對象');
14                 }
15             }
16 
17             let ajax = new XMLHttpRequest();
18 
19             //設置傳輸方式默認爲get
20             obj.type = obj.type || 'get';
21 
22 
23             //設置傳輸地址，讓地址不能爲空；
24             if (!obj.url) {
25                 throw new Error("接口地址不能爲空");
26             }
27 
28             //設置是否異步
29             if (obj.async === 'false' || obj.async === false) {
30                 obj.async = false;
31             } else {
32                 obj.async = true;
33             }
34 
35 
36             //若是傳輸數據時，要對get和post方式進行不一樣的兼容處理
37             if (obj.data) {//判斷是否傳輸數據
38                 //若是傳輸數據時
39                 if (Object.prototype.toString.call(obj.data).slice(8, -1) === 'Object') {//判斷傳輸數據是否爲對象
40                     obj.data = objtostring(obj.data);
41                 } else {//不是對象
42                     obj.data = obj.data;
43                 }
44             }
45 
46             //若是傳輸數據存在，且傳輸方式爲get時
47             if (obj.data && obj.type === 'get') {
48                 obj.url += '?' + obj.data;
49             }
50 
51             ajax.open(obj.type, obj.url, obj.async);
52 
53             //若是傳輸數據存在，且傳輸方式爲post時
54             if (obj.data && obj.type == 'post') {
55                 ajax.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
56                 ajax.send(obj.data);
57             } else {
58                 ajax.send();
59             }
60 
61             //當obj.async沒有設置異步時，就是同步，無需監聽；當設置異步時，就必須監聽
62             if (obj.async) {//異步時
63                 ajax.onreadystatechange = function () {
64                     if (ajax.readyState === 4) {//請求成功
65                         if (ajax.status === 200) {//接口地址正確
66                             //當對象中有success屬性，且該屬性類型爲函數
67                             obj.success && typeof obj.success === 'function' && obj.success(ajax.responseText);
68                         } else {
69                             obj.error && typeof obj.error === 'function' && obj.error('接口地址有誤' + ajax.status);
70                         }
71                     }
72                 }
73             } else {//同步時
74                 if (ajax.status === 200) {
75                     obj.success && typeof obj.success === 'function' && obj.success(ajax.responseText);
76                 } else {
77                     obj.error && typeof obj.error === 'function' && obj.error('接口地址有誤' + ajax.status);
78                 }
79             }
80 
81         }

調用：

 1         $ajax({
 2             type:'get',
 3             url:'http://phpget.php',
 4             data:{
 5                 username:'zhangsan'
 6             },
 7             async:true,
 8             success:function(str){
 9                 console.log(JSON.parse(str));
10             },
11             error:function(e){
12                 console.log(e);
13             }
14         })

此原生js只適合去理解ajax，若是項目中使用的話，最好仍是使用框架中的一些簡易操做。

好比：jQuery中，引入後直接調用就能夠。

 1 　　　　$.ajax({
 2             type: 'post',//請求類型，默認get
 3             url: 'http://data.php',//接口地址
 4             data: {//傳輸數據
 5                 username:'zhangsan'
 6             },
 7             async: true,//默認異步
 8             dataType: 'json',//數據類型  JSON就會生成一個JavaScript對象
 9         }).done(function (d) {//請求成功
10             console.log(d);
11         }).fail(function (err) {//請求失敗
12             console.log(err);
13         })