封装原生Ajax函数
先分享一篇优秀博文：
ajax.js代码
function ajax(options) { // 1 创建Ajax对象 let xhr = new XMLHttpRequest(); // 拼接请求参数变量 let params = ''; for (let attr in options.data) { params += attr + '=' + options.data[attr] + '&'; } // 对字符串进行截取 // 将参数最后面的 & 截取掉 // 将截取的结果重新赋值给params变量 params = params.substring(0, params.length - 1); // console.log(params) // 判断请求方式 if (options.type == 'get') { options.url = options.url + '?' + params; } // 告诉Ajax请求地址及其方式 xhr.open(options.type, options.url); // 如果请求方式为post if (options.type == 'post') { // 用户希望的向服务器端传递的请求参数的类型 let contentType = options.header['Content-Type']; // 设置请求参数格式的类型 xhr.setRequestHeader('Content-Type', contentType); // 判断用户希望的请求参数格式的类型 // 如果类型为json if (contentType == 'application/json') { // 向服务器端传递json数据格式的参数 xhr.send(JSON.stringify(options.data)); } else { // 向服务器端传递普通类型的请求参数 xhr.send(params); } } else { // 3 发送请求 post请求要把请求参数放在请求体里面偶! xhr.send(); } // 4 获取服务器端响应给客户端的数据[也就是监听onload事件！] xhr.onload = function() { // xhr.getResponseHeader() // 获取响应头中的数据! // 根据你请求方式不同而返回不一样的结果！ let contentType = xhr.getResponseHeader('Content-Type'); // 服务器端返回的数据 let responseText = xhr.responseText; // 如果响应类型中包含json if (contentType.includes('application/json')) { // console.log('包含'); // console.log(JSON.parse(responseText)); //将json字符串转换为json对象 responseText = JSON.parse(responseText); } else { } if (xhr.status == 200) { // 请求成功调用处理成功情况的函数 options.success(responseText); } else { // 请求失败调用处理失败情况的函数 options.error(responseText, xhr); } } }
调用示例：
<body> <h1>测试页面！h1> <button id="btn">Ajax错误处理button> <script type="text/javascript"> let btn = document.getElementById('btn'); btn.onclick = function() { ajax({ type: 'post', data: { name: 'zrh', age: 23 }, header: { 'Content-Type': 'application/json' }, url: 'https://v1.alapi.cn/api/music/search?keyword=1', success: function(data) {
//data 服务器返回的数据实参 console.log("响应数据为：" + data); console.log(data); }, error: function(data, xhr) { console.log('恭喜您收到了一个非200的状态码' + data); console.log(xhr); } }) } script> body>