入门AJAX——XMLHttpRequest（Get）

news2025/6/6 5:50:19

一、什么是 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/1
	const 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，用于跟踪请求的进度并处理响应。

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2398225.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

5分钟申请edu邮箱【方案本周有效】

5分钟申请edu邮箱【方案本周有效】

这篇文章主要展示的是成果。如果你是第1次看见我的内容&#xff0c;具体的步骤请翻看往期的两篇作品。先看更正补全&#xff0c;再看下一个。 建议你边看边操作。 【更正补全】edu教育申请通过方案 本周 edu教育邮箱注册可行方案 #edu邮箱 伟大无需多言 我已经验证了四个了…
阅读更多...
闲谈PMIC和SBC

闲谈PMIC和SBC

今天不卷&#xff0c;简单写点。 在ECU设计里&#xff0c;供电芯片选型是逃不开的话题&#xff0c;所以聊聊PMIC或者SBC的各自特点&#xff0c;小小总结下。 PMIC&#xff0c;全称Power Management Intergrated Circuits&#xff0c;听名字就很专业&#xff1a;电源管理&…
阅读更多...
Java垃圾回收机制深度解析：从理论到实践的全方位指南

Java垃圾回收机制深度解析：从理论到实践的全方位指南

Java垃圾回收(GC)是Java虚拟机(JVM)的核心功能&#xff0c;它自动管理内存分配与回收&#xff0c;避免了C/C中常见的内存泄漏问题。本文将深入剖析Java垃圾回收的工作原理、算法实现、收集器类型及调优策略&#xff0c;助你全面掌握JVM内存管理的精髓。 一、垃圾回收基础概念 …
阅读更多...
论文阅读：CLIP:Learning Transferable Visual Models From Natural Language Supervision

论文阅读：CLIP:Learning Transferable Visual Models From Natural Language Supervision

从自然语言监督中学习可迁移的视觉模型 虽然有点data/gpu is all you need的味道&#xff0c;但是整体实验和谈论丰富度上还是很多的&#xff0c;也是一篇让我多次想放弃的文章&#xff0c;因为真的是非常长的原文和超级多的实验讨论&#xff0c;隔着屏幕感受到了实验的工作量之…
阅读更多...
在图像分析算法部署中应对流行趋势的变化|文献速递-深度学习医疗AI最新文献

在图像分析算法部署中应对流行趋势的变化|文献速递-深度学习医疗AI最新文献

Title 题目 Navigating prevalence shifts in image analysis algorithm deployment 在图像分析算法部署中应对流行趋势的变化 01 文献速递介绍 机器学习&#xff08;ML&#xff09;已开始革新成像研究与实践的诸多领域。然而&#xff0c;医学图像分析领域存在显著的转化鸿…
阅读更多...
CAMEL-AI开源自动化任务执行助手OWL一键整合包下载

CAMEL-AI开源自动化任务执行助手OWL一键整合包下载

OWL 是由 CAMEL-AI 团队开发的开源多智能体协作框架&#xff0c;旨在通过动态智能体交互实现复杂任务的自动化处理&#xff0c;在 GAIA 基准测试中以 69.09 分位列开源框架榜首&#xff0c;被誉为“Manus 的开源平替”。我基于当前最新版本制作了免安装一键启动整合包。 CAMEL-…
阅读更多...
Linux系统-基本指令（5）

Linux系统-基本指令（5）

文章目录 mv 指令cat 指令&#xff08;查看小文件&#xff09;知识点&#xff08;简单阐述日志&#xff09;more 和 less 指令&#xff08;查看大文件&#xff09;head 和 tail 指令&#xff08;跟查看文件有关&#xff09;知识点&#xff08;管道&#xff09;时间相关的指令&a…
阅读更多...
C# winform教程(二)

C# winform教程(二)

一、基础控件 常用的基础控件主要有按钮&#xff0c;文本&#xff0c;文本输入&#xff0c;组&#xff0c;进度条&#xff0c;等等。 基础控件 名称含义详细用法Button按钮Buttoncheckbox多选按钮Combobox下拉选择groupbox组控件label标签&#xff0c;显示文字panel控件集合&a…
阅读更多...
【仿生机器人】刀剑神域计划——仿生机器人.亚丝娜

【仿生机器人】刀剑神域计划——仿生机器人.亚丝娜

我在做仿生机器人头&#xff0c;硬件部分已经搭建完毕&#xff0c;包括头部和颈部&#xff0c;用的23个舵机驱动机器人做表情&#xff0c;也支持头部的旋转&#xff08;就是颈部的功能&#xff09;&#xff0c;安装了摄像头在眼睛中&#xff0c;还有麦克风接受周围环境声音&…
阅读更多...
ARM架构推理Stable Diffusiond

ARM架构推理Stable Diffusiond

代码仓库&#xff1a; https://github.com/siutin/stable-diffusion-webui-docker.git Docker容器地址&#xff1a; https://hub.docker.com/r/siutin/stable-diffusion-webui-docker/tags git clone https://github.com/siutin/stable-diffusion-webui-docker.git cd stabl…
阅读更多...
仓颉项目调试配置与多文件场景下的问题解析

仓颉项目调试配置与多文件场景下的问题解析

1. 调试配置指南 在 VS Code 中配置好仓颉开发工具链后&#xff0c;只需按下 F5 或 Fn F5 即可启动调试。 在 CodeArts IDE for Cangjie 中&#xff0c;需先通过右上角的 编辑配置 -> 新增配置项 -> 选择 Cangjie (cjdb) Debug -> 选择 launch 模式 -> 点击 确认…
阅读更多...
MySQL 8.0 OCP 英文题库解析（十）

MySQL 8.0 OCP 英文题库解析（十）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题81~90 试题81:…
阅读更多...
Python Pytest

Python Pytest

1.Pytest用例发现规则 1.1 模块名(python文件)名必须以 test_ 开头或 _test 结尾&#xff0c;如 test_case&#xff0c;case_test&#xff0c;下划线都不能少 1.2 模块不能放在 . 开头的隐藏目录或者叫 venv的目录下&#xff0c;virtual environment&#xff0c;叫venv1都可以…
阅读更多...
如何轻松删除 Android 上的文件（3 种方法）

如何轻松删除 Android 上的文件（3 种方法）

Android 手机是非常强大的设备&#xff0c;可让我们存储大量的个人数据&#xff0c;从照片和视频到应用程序和文档。然而&#xff0c;随着时间的推移&#xff0c;您的设备可能会因不再需要的文件而变得混乱。删除这些文件有助于释放空间并提高性能。在本指南中&#xff0c;我们…
阅读更多...
[特殊字符] Unity UI 性能优化终极指南 — ScrollRect篇

[特殊字符] Unity UI 性能优化终极指南 — ScrollRect篇

ScrollRect ManualScrollRect API 我参考了官方最新文档&#xff08;基于UGUI 3.0包&#xff09;&#xff0c;加上实际性能测试经验&#xff0c;直接给你梳理&#xff1a; &#x1f3af; Unity UI 性能优化终极指南 — ScrollRect篇 &#x1f9e9; 什么是 ScrollRect&#xff…
阅读更多...
自适应流量调度用于遥操作：面向时间敏感网络的通信与控制协同优化框架

自适应流量调度用于遥操作：面向时间敏感网络的通信与控制协同优化框架

英文标题&#xff1a;Adaptive Flow Scheduling for Teleoperation: A Communication and Control Co-Optimization Framework over Time-Sensitive Networks 中文标题&#xff1a;自适应流量调度用于遥操作&#xff1a;面向时间敏感网络的通信与控制协同优化框架 作者信息 …
阅读更多...
阿里云服务器-解决宝塔登录不成功

阿里云服务器-解决宝塔登录不成功

出现问题&#xff1a; This site can’t be reached XX.XX.XXX.XXX took too long to respond. Try: Checking the connection Checking the proxy and the firewall Running Windows Network Diagnostics ERR_CONNECTION_TIMED_OUT 可能是端口未开放 原因&#xff1a;服务器…
阅读更多...
graphviz, dot, Error: lost rA sA edge； 独立的模块

graphviz, dot, Error: lost rA sA edge； 独立的模块

1) 有向图dot文件 digraph R { node [shaperecord]; { ranksame rA sA tA } { ranksame uB vB wB } rA -> sA; sA -> vB; t -> rA; uB -> vB; wB -> u; wB -> tA; } 2&#xff09;出现报警信息 Warning: flat edge between adjacent …
阅读更多...
Axure-元件流程图

Axure-元件流程图

Axure-02 线框图元件使用 目标 元件基本介绍 基础元件的使用 表单型元件的使用 菜单与表格元件的使用 案例&#xff1a;个人简历表 元件基本介绍 概述 在Axure RP中&#xff0c;元件是构建原型图的基础模块。 将元件从元件库里拖拽到画布中&#xff0c;即可添加元件到你…
阅读更多...
Python爬虫解析动态网页：从渲染到数据提取

Python爬虫解析动态网页：从渲染到数据提取

一、动态网页与静态网页的区别 在开始之前&#xff0c;我们需要理解动态网页与静态网页的区别。静态网页的内容在服务器端是固定的&#xff0c;每次请求都会返回相同的结果&#xff0c;通常以HTML文件的形式存储。而动态网页则不同&#xff0c;其内容是通过JavaScript在客户端…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023