ajax请求的原生js实现

我们使用ajax请求一般都用的jQuery, axios封装好了的api, 那么如果只能用原生js, 我们该如何操作了? 上代码.

我们在同目录下写好一个json文件(data.json)用于请求测试

 1 const ajax = function() {
 2   var ajaxData = {
 3     type: arguments[0].type || ‘GET‘,
 4     url: arguments[0].url,
 5     async: arguments[0].async || true,
 6     data: arguments[0].data|| null,
 7     dataType: arguments[0].dataType || ‘json‘,
 8     contentType: arguments[0].contentType || ‘application/x-www-form-urlencoded‘,
 9     beforeSend: arguments[0].beforeSend || function(){},
10     success: arguments[0].success || function(){},
11     error: arguments[0].error || function(){}
12   }
13   // 执行发起请求前要执行的操作
14   ajaxData.beforeSend();
15
16   var xhr = createxmlHttpRequest();
17   xhr.responseType = ajaxData.dataType;
18   // 建立连接
19   xhr.open(ajaxData.type, ajaxData.url, ajaxData.async);
20   xhr.setRequestHeader(‘Content-Type‘, ajaxData.contentType);
21   // 发送请求
22   xhr.send(convertData(ajaxData.data));
23   xhr.onreadystatechange = function() {
24     if (xhr.readyState == 4) {
25       if (xhr.status == 200) {
26         ajaxData.success(xhr.response)
27       } else {
28         ajaxData.error()
29       }
30     }
31   }
32
33   // 创建xhr对象, 兼容IE6
34   function createxmlHttpRequest() {
35     if (window.ActiveXObject) {
36       return new ActiveXObject("Microsoft.XMLHTTP");
37     } else if (window.XMLHttpRequest) {
38       return new XMLHttpRequest();
39     }
40   }
41
42   // 将json格式转换成字符串
43   function convertData(data){
44     if( typeof data === ‘object‘ ){
45       var convertResult = "" ;
46       for(var c in data){
47         convertResult+= c + "=" + data[c] + "&";
48       }
49       convertResult = convertResult.substring(0,convertResult.length-1)
50       return convertResult;
51     }else{
52       return data;
53     }
54   }
55
56
57 }

怎么用?

 1 ajax({
 2   type: ‘GET‘,
 3   url: ‘./data.json‘,
 4   dataType: ‘json‘,
 5   data: {},
 6   beforeSend: function() {
 7     console.log(‘我是请求前的操作‘)
 8   },
 9   success: function(data) {
10     console.log(data)
11   },
12   error: function() {
13     console.log(‘请求失败‘)
14   }
15 })

原文地址：https://www.cnblogs.com/spotman/p/10392430.html