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         })