当前位置：首页 > news >正文

JavaScript--AJAX

news 2025/11/6 11:36:52

概述

传统的web交互是用户触发一个http请求服务器，然后服务器收到之后，在做出响应到用户，并且返回一个新的页面，每当服务器处理客户端提交的请求时，客户都只能空闲等待，并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据，都要返回一个完整的HTML页，而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，这导致了用户界面的响应比本地应用慢得多。

AJAX 的出现,刚好解决了传统方法的缺陷，AJAX 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest对象

AJAX的核心是XMLHttpRequest对象，所有现代浏览器都支持该对象。XMLHttpRequest对象用于在后台与服务器进行数据交换，可以实现网页的部分更新，而无需重新加载整个页面。

所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象。

创建 XMLHttpRequest 的语法是：

let xhr = new XMLHttpRequest();

创建完成后，我们可以通过该对象执行各种操作，如发送HTTP请求、接收服务器响应等。

方法和属性

以下是一些常用的XMLHttpRequest方法和属性：

方法：

open(method, url, async): 初始化一个HTTP请求。参数method指定请求的方法，如"GET"、"POST"等；url指定请求的URL地址；async指定请求是否为异步，默认为true。
new XMLHttpRequest():创建新的 XMLHttpRequest 对象。
abort()：取消当前请求
send(data): 发送请求并从服务器获取数据，可选地传递数据作为参数。通常在POST请求中使用。
send():将请求发送到服务器，用于 GET 请求
setRequestHeader(header, value): 设置请求头。用于设置HTTP请求的请求头，通常在发送之前调用该方法。
getResponseHeader(header): 获取服务器响应的指定头部信息。
getAllResponseHeaders(): 获取服务器响应的所有头部信息。

2.属性：

onreadystatechange: 事件处理程序，在请求状态改变时被调用。可以通过该事件处理程序来检测请求的不同阶段和状态。
status: 包含HTTP状态码，表示服务器响应的状态。状态号:200: "OK"，403: "Forbidden"，404: "Not Found"。
statusText:返回状态文本（比如 “OK” 或 “Not Found”）
responseText: 以字符串形式返回服务器响应的文本内容。
responseXML: 如果响应的内容类型是"text/xml"或"application/xml"，则返回解析后的XML文档。
readyState: 表示XMLHttpRequest对象的状态，包括以下数值：
- 0: 未初始化。表示XMLHttpRequest对象已创建或已被abort()方法重置。
- 1: 打开。表示调用了open()方法，但尚未调用send()方法。
- 2: 已发送。表示已调用send()方法，但未收到响应。
- 3: 接收中。表示正在接收响应数据。
- 4: 完成。表示已经接收到完整的响应数据，并可以在客户端使用。

这些方法和属性可以被用来配置请求、发送请求、获取响应数据以及处理响应信息。

示例一:

<!DOCTYPE html>
<html>
<head><title>AJAX XMLHttpRequest 示例</title>
</head>
<body><h1>AJAX XMLHttpRequest 示例</h1><button onclick="l()">加载数据</button><div id="li"></div><script>
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();// 定义onreadystatechange事件处理函数
xhr.onreadystatechange = function() {// 当readyState为4（完成）且status为200（成功响应）时，表示请求已完成，并处理响应数据if (xhr.readyState === 4 && xhr.status === 200) {// 获取响应的文本内容var responseText = xhr.responseText;// 在页面上显示响应的数据var resultDiv = document.getElementById("li");resultDiv.textContent = responseText;}
};// 加载数据的函数
function l() {// 打开新的请求，使用GET方法获取数据xhr.open("GET", "data.txt", true);// 发送请求xhr.send();
}
</script></body>
</html>

通过点击按钮触发l()函数来加载数据。
使用XMLHttpRequest对象发送GET请求并获取数据。
响应的文本内容将显示在<div id="li">元素中。

示例二:

<!DOCTYPE html>
<html>
<head><title>AJAX Fetch 示例</title>
</head>
<body><h1>AJAX Fetch 示例</h1><button onclick="l()">加载数据</button><div id="li"></div><script>
// 加载数据的函数
function l() {// 使用Fetch API发送GET请求获取数据fetch("data.txt").then(function(response) {// 确保响应成功if (response.ok) {// 将响应转换为文本格式return response.text();} else {throw new Error("网络请求失败：" + response.status);}}).then(function(data) {// 在页面上显示响应的数据var resultDiv = document.getElementById("li");resultDiv.textContent = data;}).catch(function(error) {console.log("发生错误：", error);});
}
</script></body>
</html>

注释说明：

通过点击按钮触发 l()函数来加载数据。
使用Fetch API发送GET请求并获取数据。
确保响应成功后，将响应转换为文本格式。
在页面上显示响应的数据。如果请求失败或发生错误，会在控制台打印错误信息。

JavaScript--AJAX

概述

XMLHttpRequest对象

方法和属性

示例一:

示例二:

相关文章：

JavaScript--AJAX

AI Chat 设计模式：13. 代理模式

嵌入式开发实用工具——QFSViewer

appium自动爬取数据

jenkins 在pinline克隆代码的两种方式

Python入门【编辑、组合、设计模式_工厂模式实现、设计模式_单例模式实现、工厂和单例模式结合、异常是什么？异常的解决思路】(十七)

65 # 实现 http-server 里的 gzip 压缩

点成分享丨qPCR仪的原理与使用——以Novacyt产品为例

Postman如何做接口测试

每天一道leetcode：剑指 Offer 32 - II. 从上到下打印二叉树 II（适合初学者）

vue动态生成行

IPC之一：使用匿名管道进行父子进程间通信的例子

前端将页面转化为图片---进行下载导出、打印等功能

docker安装code-service在线开发vscode工具及node版本过低问题

C++ 多态深入解析

C#使用EmguCV播放视频

LeetCode150道面试经典题-买卖股票的最佳时机(简单)

【积水成渊】CSS磨砂玻璃效果和渐变主题色文字

JVM、JRE、JDK三者之间的关系

input 标签的 type 属性有哪些值？分别表示什么意思？

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

css3笔记（1）自用

是否存在路径（FIFOBB算法）

AI书签管理工具开发全记录（十九）：嵌入资源处理

LeetCode - 199. 二叉树的右视图

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Java数值运算常见陷阱与规避方法