我们使用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对象, 兼容IE634 ??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 })ajax请求的原生js实现
原文地址：https://www.cnblogs.com/spotman/p/10392430.html