用原生JS实现AJAX和JSONP

前端开发在需要与后端进行数据交互时，为了方便快捷，都会选择JQuery中封装的AJAX方法，但是有些时候，我们只需要JQuery的AJAX请求方法，而其他的功能用到的很少，这显然是没必要的。其实，原生JavaScript实现AJAX并不难，下面我们可是演示如何实现利用原生JS构建简单的AJAX，还有跨域请求JSONP的实现。

AJAX的根本是XMLHttprequest,而一个完整的AJAX请求一般包括以下步骤：

• 实例化XMLHttpRequest对象
• 连接服务器
• 发送请求
• 接收响应数据

下面我们使用原生JS封装一个简单地ajax()方法：

 1  const Ajax = (object) => {
 2         object = object || {};
 3         object.data = object.data || {};
 4         //判断请求类型为AJAX或者JSONP
 5         let json = object.jsonp ? Jsonp(object) : ajax(object);
 6 
 7         //设置ajax方法
 8         function ajax(object) {
 9            // 1.设置请求方式：如果没有制定则默认为GET
10            object.type = (object.type || 'GET').toUpperCase();
11            // 2.设置data数据的格式化
12            object.data = formateObject(object.data);
13            // 3.实例化XMLHttpRequest对象  
14            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
15            // 4.监听事件，只要readyState改变，就会调用readystatechange事件
16            xhr.onreadystatechange = function(){
17                // readyState属性表示请求/响应过程的当前活动阶段，4为完成，已经接收到全部响应数据
18                if(xhr.readyState == 4) {
19                    let status = xhr.status;
20                    // status : HTTP响应的状态码，2开头表示成功
21                    if(status >=200 && status < 300){
22                        let response = '';
23                        // 判断接受数据的内容类型 
24                        let type = xhr.getResponseHeader('Content-type');  
25                        if(type.indexOf('xml') !== -1 && xhr.responseXML) {  
26                           response = xhr.responseXML; //Document对象响应  
27                          } else if(type === 'application/json') {  
28                           response = JSON.parse(xhr.responseText); //JSON响应  
29                          } else {  
30                           response = xhr.responseText; //字符串响应  
31                         }; 
32                         // 成功回调函数 
33                         object.success && object.success(response);  
34                    }else {
35                         object.error && object.error(response);  
36                    }
37                }
38            }
39 
40            
41            // 5.连接和传输数据
42            if(object.type == 'GET') {
43                // 三个参数：请求方式、请求地址(get方式时，传输数据是加在地址后的)、是否异步请求(同步请求的情况极少)；
44                xhr.open(object.type, object.url + '?' + object.data, true);  
45                xhr.send(null);  
46             } else {  
47                xhr.open(object.type, object.url, true);  
48                //必须，设置提交时的内容类型  
49                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
50                // 传输数据 
51                xhr.send(object.data); 
52             }
53         }
54 
55             //data的格式化方法
56         function formateObject(data){
57            if(data){
58                let arr = [];
59                for(let name in data){
60                    //encodeURIComponent() ：用于对 URI 中的某一部分进行编码
61                    arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
62                }
63 
64                //为了防止缓存，在后面添加一个随机数
65                arr.push('randomV=' + randomNumber());
66                return arr.join('&');
67            }else {
68                console.error('无法格式化请求数据')
69            }
70         }
71 
72         //生成随机数的方法
73         function randomNumber(){
74             return Math.floor(Math.random()*10000+404);
75         }
76 
77     };

同理，我们也可以实现一个JSONP的方法

//设置Jsonp方法
        function Jsonp(object) {
          // 创建script标签并加入到页面中
          let callbackName = object.jsonp,
              head = document.getElementsByTagName('head')[0];
          // 设置传递给后台的回调参数名  
          object.data['callback'] = callbackName;  
          let data = formateObject(object.data),
              script = document.createElement('script');  
          head.appendChild(script);  
          // 创建JSONP的回调函数
          //创建jsonp回调函数  
          window[callbackName] = function(json) {  
              head.removeChild(script);  
              clearTimeout(script.timer);  
              window[callbackName] = null;  
              object.success && object.success(json);  
          };  
          // 发送请求
          script.src = object.url + '?' + data;  
          //为了得知此次请求是否成功，设置超时处理  
          if(object.time) {  
           script.timer = setTimeout(function() {  
            window[callbackName] = null;  
            head.removeChild(script);  
            object.error && object.error({  
             message: '请求超时' 
            });  
           }, time);  
          }  

        }

下面我们来尝试一下这两个方法是否管用
新建一个index.html文件，新建一个test.json和jsonp.php

利用nginx搭建一个简单地服务器，因为谷歌默认不允许本地文件进行ajax请求：

test.json