入门AJAX——XMLHttpRequest（Get）-海口c网

一、什么是 AJAX

AJAX = Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）。

1、XML与异步JS

XML: 是一种比较老的前后端数据传输格式（已经几乎被 JSON 代替）。它的格式与HTML类似，通过严格的闭合自定义标签实现对数据的解释。

异步JS: 所谓异步与同步相对。同步指的是当JS遇到耗时操作（网络请求）时原地等待操作完成而阻塞下面的代码。而异步JS在遇到耗时操作时会继续执行下面的代码，等响应返回后继续处理。

2、AJAX的特点

AJAX最大的优点就是可以在不重新加载这个页面的情况下，与服务器交换部分数据并且更新部分网页内容。

3、本文我们会做什么

实现AJAX的方法可以大概分为两种：XMLHttpRequest 和 fetch ，在本文，我们着重介绍前者。

既然是网络请求，就自然需要后端的支持。我们会首先搭建一个本地的后端服务器。前端小伙伴看到这可能不淡定了：

什么？让我去写后端，还是算了，告辞！

先别急着走嘛，当然啦，我这边已经把接口部署到服务器上了，大家如果嫌麻烦的话，下文中的所有 url 前缀请使用 http://39.105.227.198:1234并跳过下文中的后端接口搭建内容。

完整代码在文章末尾（前端，使用在线接口）

4、前置知识

学习本文之前，请确保你已经了解了下面知识点的相关概念和基础用法：

基础的 dom 操作
网络的基本知识（请求方法、请求传参、状态码等）
了解在浏览器中调试的基本方法
有对公共代码进行封装的意识

二、实现简单的 AJAX

1、基于express快速搭建后端接口

后端搭建不是本文重点，所以直接上代码，如果你使用的是服务器上的接口，可以跳过本节：

npm install express body-parser cookie-parser multer cors --save

根目录下新建 app.js

const express = require('express')
const cors = require('cors')
const app = express()app.use(cors())app.get('/test/1', (req, res) => {res.send('hello world')
})app.listen(1234, () => {console.log('服务器运行在 http://localhost:1234')
})

启动本服务器，我们将与 1234 端口交互：

node ./app.js
服务器运行在 http://localhost:1234

看到服务器运行在 http://localhost:1234标标标明服务器启动成功。

2、前端请求

下面我们通过代码来认识如何去使用 XMLHttpRequest发起AJAX请求：

// html 文件
<div id="app"></div><script>// 创建请求对象const xhr = new XMLHttpRequest()  // 如果你使用的是我提供的服务器接口，请将 url 修改为:// http://39.105.227.198:1234/test/1const url = 'http://localhost:1234/test/1'// 配置：向 url 发起异步 GET 请求xhr.open('GET', url, true)  xhr.onreadystatechange = function () {// 如果请求成功if (xhr.readyState === 4 && xhr.status === 200) {const res = xhr.responseText// 将 ID 为 app 的元素内文字改为响应的文字document.querySelector('#app').innerHTML = res}}// 发送请求xhr.send()
</script>

运行上面的 html 代码，你将在页面上看到后端返回的 hello world!，并在调试台看到网页发送了一次 GET 请求。

在这里插入图片描述
恭喜你，已经成功发出了一个 AJAX 请求并收到返回的结果！

3、知识点讲解

现在回看我们的代码都干了什么：

首先我们创建了一个请求对象 xhr :

const xhr = new XMLHttpRequest()

接下来我们对 AJAX 请求的控制本质上就是对这个 xhr 的控制。

然后我们对本次发送的请求进行配置：

// 如果你使用的是我提供的服务器接口，请将 url 修改为:
// http://39.105.227.198:1234/test/1
const url = 'http://39.105.227.198:1234/test/1'
// 配置：向 url 发起异步 GET 请求
xhr.open('GET', url, true)

xhr.open()方法接收三个参数：method、url 和 isAsync

method： 本次请求的方法，如 get、post等。
url： 顾名思义，本次请求要发到哪里。
isAsync： 自己起的名字，本次请求是否异步，我们建议使用异步。

在 xhr 对象上有一个属性 readyState，该属性的取值范围是0~4，用于跟踪请求的进度并处理响应。

状态码	常量	描述
0	UNSENT	XHR 对象已创建，但尚未调用 open() 方法。
1	OPENED	已调用 open() 方法，请求已初始化，但尚未发送（未调用 send()）。
2	HEADERS_RECEIVED	已调用 send() 方法，服务器已接收请求并返回响应头。
3	LOADING	服务器正在返回响应体（数据正在传输中），responseText 已有部分数据。
4	DONE	请求已完成（成功或失败），响应数据已完全接收。

而onreadystatechange 是一个事件处理函数，当 XHR 的 readyState 状态发生变化时会触发该事件。开发者可以通过监听这个事件来跟踪请求的进度并处理响应。

xhr.onreadystatechange = function () {// 如果请求成功// status 是状态码，200 ~ 299 表示请求成功if (xhr.readyState === 4 && xhr.status === 200) {const res = xhr.responseText// 将 ID 为 app 的元素内文字改为响应的文字document.querySelector('#app').innerHTML = res}
}

所以上面代码的意思就是：当请求完成并且成功返回后，将 id 为 app 的元素内文字改为响应的结果（hello world）。然后我们使用 xhr.send()发送请求。

三、实现一个简单的搜索词推荐功能

让我们实现一个简单的搜索词推荐功能：页面上有一个输入框，只能接收一个小写英文字母，每次我们输入，都会主动向服务器发送当前输入框内的字母，然后服务器返回一个以这个字母开头的单词，前端将这个单词显示在页面上，如果没有匹配到任何一个单词，则返回 no suggest。

1、后端代码

如果你依旧使用我提供的接口，那么该节内容你依旧不需要阅读，记得请求时把 URL 改正确就行。

我们的代码基于之前的代码：

// app.js
const express = require('express')
const cors = require('cors')
const app = express()app.use(cors())app.get('/test/1', (req, res) => {res.send('hello world')
})
/* --------------添加代码-----------------*/
app.get('/test/2', (req, res) => {const char = req.query.charres.send(char2Word.get(char) || 'no suggest')
})const char2Word = new Map()char2Word.set('a', 'Anna')
char2Word.set('b', 'Brittany')
char2Word.set('c', 'Cinderella')
char2Word.set('d', 'Diana')
char2Word.set('e', 'Eva')
char2Word.set('f', 'Fiona')
char2Word.set('g', 'Gunda')
char2Word.set('h', 'Hege')
char2Word.set('i', 'Inga')
char2Word.set('j', 'Johanna')
char2Word.set('k', 'Kitty')
char2Word.set('l', 'Linda')
char2Word.set('m', 'Mom')
char2Word.set('n', 'No')
char2Word.set('o', 'Ok')
char2Word.set('p', 'Picture')
char2Word.set('q', 'Quick')
char2Word.set('r', 'Reset')
char2Word.set('s', 'String')
char2Word.set('t', 'TypeSrcipt')
char2Word.set('u', 'unit')
char2Word.set('v', 'Vicky')
char2Word.set('w', 'Wenche')
char2Word.set('x', 'x-rian')
char2Word.set('y', 'Yellow')
char2Word.set('z', 'Zoom')
/* --------------添加代码-----------------*/
app.listen(1234, () => {console.log('服务器运行在 http://localhost:1234')
})

2、前端代码

创建一个输入框和一个用于显示搜索结果的盒子：

<input id="charInput" placeholder="请输入一个小写字母" type="text"><div id="suggest">no suggest</div>

接下来，我们将请求进行简单的封装，以后我们想发起请求只需调用该函数：

function getRequest (url, callback) {const xhr = new XMLHttpRequest()xhr.open('GET', url, true)xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {const res = xhr.responseTextcallback(res)}}xhr.send()
}

然后给 input 输入框绑定输出事件回调，每次输入就调用getRequest将出入的字母发送到后端，获取到结果后将其设置到下面的 div 中：

inputChange = (str) => {// 如果你使用的是我提供的服务器接口，请将 url 修改为:// http://39.105.227.198:1234/test/2?char=${str}getRequest(`http://localhost:1234/test/2?char=${str}`, (res) => {document.querySelector('#suggest').innerHTML = res})
}document.querySelector('#charInput')
.addEventListener('input', (e) => inputChange(e.target.value))

至此前端代码书写完毕，运行 html ，在输入框中输入一个小写字母，发现下面的建议文字会跟着变化，且建议文字的首字母就是你输入的字母：

在这里插入图片描述

四、请求的超时取消

很多时候我们希望当请求长时间没有响应时取消该请求，在XMLHttpRequest中，我们使用 abort()函数实现。

const xhr = new XMLHttpRequest()
// ... 代码
xhr.abort()  // 取消请求

我们现在对上文中的 getRequest 函数进行以下扩展，使它支持超时取消:

// 添加超时事件和取消回调
function getRequest (url, callback, timeout = 5000, abortCallBack = () => {}) {const xhr = new XMLHttpRequest()setTimeout(() => {xhr.abort()abortCallBack()}, timeout)xhr.open('GET', url, true)xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {const res = xhr.responseTextcallback(res)}}xhr.send()
}

我们新建一个接口，让这个接口延迟3秒后返回结果。

然后布置两个盒子，其中一个设置为1秒超时，一个设置为5秒超时。

如果成功接收到接口的返回值，就将盒子的内容更改为该返回值，被取消请求的盒子内容改为：“我的请求被取消”。

让我们先预测一下，应该是第一个盒子的内容应该是“我的内容被取消”，因为它设置到超时时间短于结果的返回所需时间；而第二个盒子的内容可以被正常修改：

// app.js
.... 之前的代码
app.get('/test/3', (req, res) => {setTimeout(() => {res.send('成功返回')}, 3000)  // 延迟三秒返回，使其中一个盒子请求被取消
})

// html
<div class="box" id="abortable1">我的请求1秒后被取消</div>
<div class="box" id="abortable2">我的请求5秒后被取消</div><script>
function getRequest (url, callback, timeout = 5000, abortCallBack = () => {}) {const xhr = new XMLHttpRequest()setTimeout(() => {xhr.abort()abortCallBack()}, timeout)xhr.open('GET', url, true)xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {const res = xhr.responseTextcallback(res)}}xhr.send()
}// 超时时间设置为 1 秒，该元素的请求将由于超时被取消
getRequest('http://39.105.227.198:1234/test/3', (res) => {document.querySelector('#abortable1').innerHTML = res
}, 1000, () => {document.querySelector('#abortable1').innerHTML = '我的请求被取消'
})// 超时事件为 5 秒，将被正常修改
getRequest('http://39.105.227.198:1234/test/3', (res) => {document.querySelector('#abortable2').innerHTML = res
})
</script>

运行结果如图：
在这里插入图片描述
可以看到第一个元素的请求由于超时被取消，第二个元素正确返回并修改了文字。

五、完整代码

以下代码集成了本文章的三个例子，并对请求进行了简单的封装，可以直接运行：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {background: pink;width: 300px;height: 30px;line-height: 30px;margin: 10px 0;}</style>
</head>
<body><div id="app"></div><input id="charInput" placeholder="请输入一个小写字母" type="text"><div id="suggest">no suggest</div><div class="box" id="abortable1">我的请求1秒后被取消</div><div class="box" id="abortable2">我的请求5秒后被取消</div><script>function getRequest (url, callback, timeout = 5000, abortCallBack = () => {}) {const xhr = new XMLHttpRequest()setTimeout(() => {xhr.abort()abortCallBack()}, timeout)xhr.open('GET', url, true)xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {const res = xhr.responseTextcallback(res)}}xhr.send()}inputChange = (str) => {getRequest(`http://39.105.227.198:1234/test/2?char=${str}`, (res) => {document.querySelector('#suggest').innerHTML = res})}document.querySelector('#charInput').addEventListener('input', (e) => inputChange(e.target.value))getRequest('http://39.105.227.198:1234/test/1', (res) => {document.querySelector('#app').innerHTML = res})getRequest('http://39.105.227.198:1234/test/3', (res) => {document.querySelector('#abortable1').innerHTML = res}, 1000, () => {document.querySelector('#abortable1').innerHTML = '我的请求被取消'})getRequest('http://39.105.227.198:1234/test/3', (res) => {document.querySelector('#abortable2').innerHTML = res})</script>
</body>
</html>