关于接口连接方法分享——AJAX篇

John少
137 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第21天

大家好，这里是前端萌新John。

我所在的组做的项目是低代码平台，我负责的是项目管理的前端页面。这个页面的编写过程中难免会遇到接口连接的问题，比如说：创建新项目时连接到数据库创建新记录、查看项目时从数据库中获取记录等等。那么今天我给大家分享一下我写这些接口时用的方法——原生AJAX。

AJAX全称是Asynchronous Javascript And XML（异步JavaScript和XML),是一种使用现有技术集合的新方法。集合的技术包括: HTML或XHTML、CSS、JS、DOM、XML、XSLT以及最重要的 XML HttpRequest。使用AJAX技术后网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

AJAX工作原理：

image.png

了解了基本介绍和工作原理之后，我们来学习一下AJAX的编写。

用AJAX编写请求一般分为五个步骤：

第一步：创建XMLHttpRequest对象

    var xhr = new XMLHttpRequest();

第二步：发送http请求

     xhr.open('GET','url')

这里的发送请求一般分为两种：GET请求和POST请求。

第三步：设置响应HTTP请求状态变化的函数

http请求状态有五种：

1.未初始化状态。在创建完XMLHttpRequest对象时，该对象处于未初始化状态，此时XMLHttpRequest对象的readyState属性值为0。

2.初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时，该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。

3.发送数据状态。在初始化XMLHttpRequest对象后，使用send()方法发送数据时，该对象处于发送数据状态，此时XMLHttpRequest对象的readyState属性值为2。

4.接收数据状态。Web服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。此时，XMLHttpRequest对象处于接收数据状态，XMLHttpRequest对象的readyState属性值为3。

5.完成状态。XMLHttpRequest对象接收数据完毕后，进入完成状态，此时XMLHttpRequest对象的readyState属性值为4。此时接收完毕后的数据存入在客户端计算机的内存中，可以使用responseText属性或responseXml属性来获取数据。

我们一般设置响应状态值为4时的函数：

     xhr.onreadystatechange = function () {
         //判断 （服务器返回了所有的结果）
         if (xhr.readyState === 4) {
         //判断状态响应码
         if (xhr.status === 200) {}
    }

再通过判断状态响应码来设置事件。

第四步：设置获取服务器返回数据的语句

    if (xhr.status === 200) {
        console.log(xhr.response);
    }

这里选择在控制台显示返回的数据，一般我们会用JSON.parse(xhr.response)将返回的数据转化成一个对象，再通过访问对象的某些值来返回数据，因情况而异。

第五步：发送HTTP请求

    xhr.send(JSON.stringify(data));

我们一般会用JSON.stringify方法来将想要传输的参数转化成字符串。

另外，为了避免出现跨域问题，我们一般会设置两个请求头的信息： 

        xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
        xhr.setRequestHeader('Content-Type', 'application/json');

至此，请求基本完成，各位可以通过具体的响应数据来编写自己的函数，这就是最基本的AJAX请求。

好啦，今天的分享就到这里啦！我们下一篇文章见！

avatar
文章
阅读
粉丝