前言

axios作为vue框架中最常用的ajax工具包之一，可以与后台API接口进行通信，传送或接收数据，在前后端分离开发中，发挥了通信桥梁的重要作用。

虽然像axios这样的第三方工具包很好用，但是这类工具包并不能很好地帮助前段开发人员，尤其是新人理解JavaScript原生的ajax通信机制。

因此，本文将通过JS原生的ajax通信实例，为读者详细介绍原生ajax通信机制和使用方法。

关于Ajax

1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。这个功能当时并没有引起注意，直到2004年 Gmail 发布和2005年 Google Map 发布，才引起广泛重视。2005年2月，AJAX 这个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。W3C 也在2006年发布了它的国际标准。

具体来说，Ajax 包括以下几个步骤。

创建 XMLHttpRequest实例发出 HTTP请求接收服务器传回的数据更新网页数据

简单来说，Ajax 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。

创建Ajax通信接口

如图所示，本文将采用封装输出Axios通信接口的方式，封装原生的Ajax通信接口，方便读者对两者的实际应用进行对比。1. 生成通信接口

首先，我们需要封装一个类似Axios的通信接口，该接口将XMLHttpRequest对象封装在promise对象中。

具体代码如下：

const ajax = function({ // 定义接口参数 method = 'GET', // 请求方式：get, post, put, delete  url = '', // 请求连接 data = null, // post data params = null, // get params baseURL = '', // domain URL withCredentials = false // api验证请求} = {}) { const promise = new Promise(function(resolve, reject) { // api url let apiUrl = baseURL + url; // create get params if (params) { let urlParams = []; for (let key in params) { urlParams.push(`${key}=${params[key]}`) } apiUrl += `?${urlParams.join('&&')}`; } // access const accessHandler = function() { // readState === 4, 表示api接口请求完成 if (this.readyState !== 4) { return; } // 根据status状态码进行相关操作 if (this.status === 200) { resolve(JSON.parse(this.response)); } else { reject(new Error(this.statusText)); } }; // error const errorHandler = function() { console.error(this.statusText); }; // timeout const timeoutHandler = function() { console.error(`The request for ${apiUrl} timed out.`); }; // client const client = new XMLHttpRequest(); // 生成XMLHttpRequest实例对象 client.open(method, apiUrl, true); // 配置client参数 // status client.onreadystatechange = accessHandler; // 请求成功 client.ontimeout = timeoutHandler; // 请求超时  client.onerror = errorHandler; // 请求错误 // config client.responseType = "json"; // 返回值：json client.timeout = 10 * 1000; // 超时时间：10s client.withCredentials = withCredentials; // 设置验证 client.setRequestHeader("Accept", "application/json"); // 设置请求头 // send client.send(data); // 发生请求 }); return promise; // 输出promise对象};export { ajax }复制代码

2. 封装通信接口

将原生Ajax接口其进行封装，方便在vue项目中使用。

具体代码如下：

// 配置API接口地址const root = ''// 引入原生Ajaximport { ajax } from './ajax'// 自定义判断元素类型JSfunction toType(obj) { return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()}// 参数过滤函数function filterNull(params) { for (let key in params) { if (params[key] === null) { delete params[key] } if (toType(params[key]) === 'string') { params[key] = params[key].trim() } else if (toType(params[key]) === 'object') { params[key] = filterNull(params[key]) } else if (toType(params[key]) === 'array') { params[key] = filterNull(params[key]) } } return params}// 封装Ajax接口function apiAjax(method, url, params, success, failure) { if (params) { params = filterNull(params) } ajax({ method: method, url: url, data: method === 'POST' || method === 'PUT' ? params : null, params: method === 'GET' || method === 'DELETE' ? params : null, baseURL: root, withCredentials: false }) .then(function(res) { if (success) { success(res) } }) .catch(function(err) { if (failure) { failure(err) } else { throw err; } })}// 返回在vue模板中的调用接口export default { get: function(url, params, success, failure) { return apiAjax('GET', url, params, success, failure) }, post: function(url, params, success, failure) { return apiAjax('POST', url, params, success, failure) }, put: function(url, params, success, failure) { return apiAjax('PUT', url, params, success, failure) }, delete: function(url, params, success, failure) { return apiAjax('DELETE', url, params, success, failure) }}复制代码

调用Ajax通信接口

完成Ajax接口封装后，在main.js文件中直接引入。

import ajaxApi from './api/ajaxApi'Vue.prototype.$ajaxApi = ajaxApi复制代码

最后，在vue页面进行使用。

 created() { this.getDataFromApi(); }, data() { return { tableData: [] }; }, methods: { getDataFromApi() { this.$ajaxApi.get( "/data/tableData", // mock 数据接口 null, Response => { this.tableData = Response; console.log(Response); }, Error => { throw Error; } ); } }复制代码

具体效果如下图。

总结

相信通过本文，你对原生ajax通信已经有了一定的了解。需要提醒的是，本文实例是本人根据mock数据接口编写的，因此，在通用性上面，可能有所不足。如果你想直接使用本文实例，可能需要根据你实际调用的接口进行调整。