ajax请求的原生js实现

Posted 2021-02-09 唉呀妈呀梅西

我们使用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 })