前言
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通信接口
![63770e58cf17903b0a290a8372c2888f.png](https://i-blog.csdnimg.cn/blog_migrate/d543753460ac28637185d945a0507f7f.jpeg)
如图所示,本文将采用封装输出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