入门AJAX——XMLHttpRequest（Get） - 教程

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

先别急着走嘛，当然啦，我这边已经把接口部署到服务器上了，大家如果嫌麻烦的话，下文中的所有 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()发送请求。

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

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.char
res.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.responseText
callback(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.responseText
callback(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>