用原生JS实现AJAX和JSONP

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

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

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

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

  const Ajax = (object) => {
         object = object || {};
         object.data = object.data || {};
         //判断请求类型为AJAX或者JSONP
         let json = object.jsonp ? Jsonp(object) : ajax(object);
 
         //设置ajax方法
         function ajax(object) {
            // 1.设置请求方式：如果没有制定则默认为GET
            object.type = (object.type || 'GET').toUpperCase();
            // 2.设置data数据的格式化
            object.data = formateObject(object.data);
            // 3.实例化XMLHttpRequest对象
            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
            // 4.监听事件，只要readyState改变，就会调用readystatechange事件
            xhr.onreadystatechange = function(){
                // readyState属性表示请求/响应过程的当前活动阶段，4为完成，已经接收到全部响应数据
                if(xhr.readyState == 4) {
                    let status = xhr.status;
                    // status : HTTP响应的状态码，2开头表示成功
                    if(status >=200 && status < 300){
                        let response = '';
                        // 判断接受数据的内容类型
                        let type = xhr.getResponseHeader('Content-type');
                        if(type.indexOf('xml') !== -1 && xhr.responseXML) {
                           response = xhr.responseXML; //Document对象响应
                          } else if(type === 'application/json') {
                           response = JSON.parse(xhr.responseText); //JSON响应
                          } else {
                           response = xhr.responseText; //字符串响应
                         };
                         // 成功回调函数
                         object.success && object.success(response);
                    }else {
                         object.error && object.error(response);
                    }
                }
            }
 
            // 5.连接和传输数据
            if(object.type == 'GET') {
                // 三个参数：请求方式、请求地址(get方式时，传输数据是加在地址后的)、是否异步请求(同步请求的情况极少)；
                xhr.open(object.type, object.url + '?' + object.data, true);
                xhr.send(null);
             } else {
                xhr.open(object.type, object.url, true);
                //必须，设置提交时的内容类型
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                // 传输数据
                xhr.send(object.data);
             }
         }
 
             //data的格式化方法
         function formateObject(data){
            if(data){
                let arr = [];
                for(let name in data){
                    //encodeURIComponent() ：用于对 URI 中的某一部分进行编码
                    arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
                }
 
                //为了防止缓存，在后面添加一个随机数
                arr.push('randomV=' + randomNumber());
                return arr.join('&');
            }else {
                console.error('无法格式化请求数据')
            }
         }
 
         //生成随机数的方法
         function randomNumber(){
             return Math.floor(Math.random()*10000+404);
         }
 
     };

同理，我们也可以实现一个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内容

 {
    "name" : "111",
    "gender" :  "222"
 }

jsonp.php内容：

callback({"name":"李大师","gender":"是前端开发工程师"})    

index.html内容

 <!doctype html>
 <html lang="en">
  <head>
   <meta charset="UTF-8">
   <meta name="Generator" content="EditPlus®">
   <meta name="Author" content="">
   <meta name="Keywords" content="">
   <meta name="Description" content="">
   <title>原生JS实现ajax和JSONP请求</title>
   <style type="text/css">
     input[type='button'] {
         margin:20px;
     }
   </style>
  </head>
  <body>
   <button>点击验证AJAX</button>
   <input type="button" value="点击验证JSONP" onclick="">
   <div id="div1" class="">
 
   </div>
  </body>
  <script type="text/javascript">
  <!--
     //原生JS方法封装AJAX请求和JSONP请求
 
     window.Ajax = (object) => {
         object = object || {};
         object.data = object.data || {};
         //判断请求类型为AJAX或者JSONP
         let json = object.jsonp ? Jsonp(object) : ajax(object);
 
         //设置ajax方法
         function ajax(object) {
            // 1.设置请求方式：如果没有制定则默认为GET
            object.type = (object.type || 'GET').toUpperCase();
            // 2.设置data数据的格式化
            object.data = formateObject(object.data);
            // 3.实例化XMLHttpRequest对象
            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
            // 4.监听事件，只要readyState改变，就会调用readystatechange事件
            xhr.onreadystatechange = function(){
                // readyState属性表示请求/响应过程的当前活动阶段，4为完成，已经接收到全部响应数据
                if(xhr.readyState == 4) {
                    let status = xhr.status;
                    // status : HTTP响应的状态码，2开头表示成功
                    if(status >=200 && status < 300){
                        let response = '';
                        // 判断接受数据的内容类型
                        let type = xhr.getResponseHeader('Content-type');
                        if(type.indexOf('xml') !== -1 && xhr.responseXML) {
                           response = xhr.responseXML; //Document对象响应
                          } else if(type === 'application/json') {
                           response = JSON.parse(xhr.responseText); //JSON响应
                          } else {
                           response = xhr.responseText; //字符串响应
                         };
                         // 成功回调函数
                         object.success && object.success(response);
                    }else {
                         object.error && object.error(response);
                    }
                }
            }
 
            // 5.连接和传输数据
            if(object.type == 'GET') {
                // 三个参数：请求方式、请求地址(get方式时，传输数据是加在地址后的)、是否异步请求(同步请求的情况极少)；
                xhr.open(object.type, object.url + '?' + object.data, true);
                xhr.send(null);
             } else {
                xhr.open(object.type, object.url, true);
                //必须，设置提交时的内容类型
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                // 传输数据
                xhr.send(object.data);
             }
         }
 
         //设置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);
           }  
 
         }
 
         //data的格式化方法
         function formateObject(data){
            if(data){
                let arr = [];
                for(let name in data){
                    //encodeURIComponent() ：用于对 URI 中的某一部分进行编码
                    arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
                }
 
                //为了防止缓存，在后面添加一个随机数
                arr.push('randomV=' + randomNumber());
                return arr.join('&');
            }else {
                console.error('无法格式化请求数据')
            }
         }
 
         //生成随机数的方法
         function randomNumber(){
             return Math.floor(Math.random()*10000+404);
         }
 
     };
 
     const button = document.querySelector('input[type="button"]');
     const btn = document.querySelector('button');
 
     const successFun = (res) => {
         console.log(res);
         let div1= document.querySelector("#div1");
         div1.innerHTML = res.name + res.gender;
     };
     const obj = {
         url : 'jsonp.php',
         type : 'GET',
         jsonp : 'callback',
         data : '',
         success: successFun,
         error: function(){
         }
     };
 
     const obj1 = {
         url : 'test.json',
         type : 'GET',
         data : '',
         success: successFun,
         error: function(){
         }
     };
 
     button.addEventListener('click', () => Ajax(obj));
     btn.addEventListener('click',() => Ajax(obj1));
 
  //-->
  </script>
 </html>

测试效果：

验证JSONP：