用原生JS实现AJAX和JSONP

Posted 曼施坦因

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用原生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内容

 

1 {
2    "name" : "111",
3    "gender" :  "222" 
4 }

 

jsonp.php内容:

 

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

 

index.html内容

  1 <!doctype html>
  2 <html lang="en">
  3  <head>
  4   <meta charset="UTF-8">
  5   <meta name="Generator" content="EditPlus®">
  6   <meta name="Author" content="">
  7   <meta name="Keywords" content="">
  8   <meta name="Description" content="">
  9   <title>原生JS实现ajax和JSONP请求</title>
 10   <style type="text/css">
 11     input[type=\'button\'] {
 12         margin:20px;
 13     }
 14   </style>
 15  </head>
 16  <body>
 17   <button>点击验证AJAX</button>
 18   <input type="button" value="点击验证JSONP" onclick="">
 19   <div id="div1" class="">
 20     
 21   </div>
 22  </body>
 23  <script type="text/javascript">
 24  <!--
 25     //原生JS方法封装AJAX请求和JSONP请求
 26 
 27     window.Ajax = (object) => {
 28         object = object || {};
 29         object.data = object.data || {};
 30         //判断请求类型为AJAX或者JSONP
 31         let json = object.jsonp ? Jsonp(object) : ajax(object);
 32 
 33         //设置ajax方法
 34         function ajax(object) {
 35            // 1.设置请求方式:如果没有制定则默认为GET
 36            object.type = (object.type || \'GET\').toUpperCase();
 37            // 2.设置data数据的格式化
 38            object.data = formateObject(object.data);
 39            // 3.实例化XMLHttpRequest对象  
 40            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(\'Microsoft.XMLHTTP\');
 41            // 4.监听事件,只要readyState改变,就会调用readystatechange事件
 42            xhr.onreadystatechange = function(){
 43                // readyState属性表示请求/响应过程的当前活动阶段,4为完成,已经接收到全部响应数据
 44                if(xhr.readyState == 4) {
 45                    let status = xhr.status;
 46                    // status : HTTP响应的状态码,2开头表示成功
 47                    if(status >=200 && status < 300){
 48                        let response = \'\';
 49                        // 判断接受数据的内容类型 
 50                        let type = xhr.getResponseHeader(\'Content-type\');  
 51                        if(type.indexOf(\'xml\') !== -1 && xhr.responseXML) {  
 52                           response = xhr.responseXML; //Document对象响应  
 53                          } else if(type === \'application/json\') {  
 54                           response = JSON.parse(xhr.responseText); //JSON响应  
 55                          } else {  
 56                           response = xhr.responseText; //字符串响应  
 57                         }; 
 58                         // 成功回调函数 
 59                         object.success && object.success(response);  
 60                    }else {
 61                         object.error && object.error(response);  
 62                    }
 63                }
 64            }
 65 
 66            
 67            // 5.连接和传输数据
 68            if(object.type == \'GET\') {
 69                // 三个参数:请求方式、请求地址(get方式时,传输数据是加在地址后的)、是否异步请求(同步请求的情况极少);
 70                xhr.open(object.type, object.url + \'?\' + object.data, true);  
 71                xhr.send(null);  
 72             } else {  
 73                xhr.open(object.type, object.url, true);  
 74                //必须,设置提交时的内容类型  
 75                xhr.setRequestHeader(\'Content-Type\', \'application/x-www-form-urlencoded; charset=UTF-8\'); 
 76                // 传输数据 
 77                xhr.send(object.data); 
 78             }
 79         }
 80 
 81         //设置Jsonp方法
 82         function Jsonp(object) {
 83           // 创建script标签并加入到页面中
 84           let callbackName = object.jsonp,
 85               head = document.getElementsByTagName(\'head\')[0];
 86           // 设置传递给后台的回调参数名  
 87           object.data[\'callback\'] = callbackName;  
 88           let data = formateObject(object.data),
 89               script = document.createElement(\'script\');  
 90           head.appendChild(script);  
 91           // 创建JSONP的回调函数
 92           //创建jsonp回调函数  
 93           window[callbackName] = function(json) {  
 94               head.removeChild(script);  
 95               clearTimeout(script.timer);  
 96               window[callbackName] = null;  
 97               object.success && object.success(json);  
 98           };  
 99           // 发送请求
100           script.src = object.url + \'?\' + data;  
101           //为了得知此次请求是否成功,设置超时处理  
102           if(object.time) {  
103            script.timer = setTimeout(function() {  
104             window[callbackName] = null;  
105             head.removeChild(script);  
106             object.error && object.error({  
107              message: \'请求超时\' 
108             });  
109            }, time);  
110           }  
111 
112         }
113         
114 
115         //data的格式化方法
116         function formateObject(data){
117            if(data){
118                let arr = [];
119                for(let name in data){
120                    //encodeURIComponent() :用于对 URI 中的某一部分进行编码
121                    arr.push(encodeURIComponent(name) + \'=\' + encodeURIComponent(data[name]));
122                }
123 
124                //为了防止缓存,在后面添加一个随机数
125                arr.push(\'randomV=\' + randomNumber());
126                return arr.join(\'&原生JS封装Ajax插件(同域&&jsonp跨域)

jsonp实现跨域请求

原生JS写的ajax函数

原生JS发送Ajax请求JSONP

JavaScript的jsonp

原生js实现简单JSONP