使用XMLHttpRequest进行AJAX调用
JavaScript的核心功能XMLHttpRequest (XHR) 对象，允许开发者在不刷新页面的情况下异步地向服务器发送和接收数据，是构建动态交互式Web应用的基础，也是AJAX（异步JavaScript和XML）的核心。
1. 什么是XMLHttpRequest？
XMLHttpRequest是JavaScript的API，用于通过HTTP请求与服务器通信，其主要优势在于：
无需页面重新加载即可获取数据。支持多种数据格式，例如JSON、XML、HTML和文本。支持同步和异步操作（但大多数情况下不建议使用同步模式）。
2. 创建XMLHttpRequest对象
要使用XHR，首先需要创建一个XMLHttpRequest对象的实例：
const xhr = new XMLHttpRequest();
3. XHR调用的步骤
创建XHR对象:
const xhr = new XMLHttpRequest();
初始化请求: 使用open()方法定义HTTP方法、URL以及请求是否异步。
xhr.open("GET", "https://api.example.com/data", true);
设置响应回调: 使用onload事件或readystatechange事件处理服务器响应。
xhr.onload = function () { if (xhr.status === 200) { console.log("响应数据:", xhr.responseText); } else { console.error("错误:", xhr.status, xhr.statusText); } };
发送请求:
xhr.send();
4. 完整示例：GET请求
const xhr = new XMLHttpRequest();xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);xhr.onload = function () { if (xhr.status === 200) { console.log("数据获取成功:", JSON.parse(xhr.responseText)); } else { console.error("数据获取失败. 状态码:", xhr.status); }};xhr.onerror = function () { console.error("网络错误导致请求失败。");};xhr.send();
5. 使用POST请求发送数据
XHR支持使用POST方法向服务器发送数据。
立即学习“Java免费学习笔记（深入）”；
示例：
const xhr = new XMLHttpRequest();xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);xhr.setRequestHeader("Content-Type", "application/json");xhr.onload = function () { if (xhr.status === 201) { console.log("数据保存成功:", JSON.parse(xhr.responseText)); } else { console.error("错误:", xhr.status); }};const data = JSON.stringify({ title: "foo", body: "bar", userId: 1});xhr.send(data);
6. XHR的属性和方法
重要属性：
readyState：请求的状态 (0到4)。0: 未初始化1: 打开2: 发送3: 接收4: 完成status：HTTP状态码 (例如，200表示成功，404表示未找到)。responseText：响应正文作为文本字符串。responseXML：XML格式的响应正文 (如果适用)。
重要方法：
open(method, url, async)：初始化请求。send(data)：将请求发送到服务器。setRequestHeader(header, value)：设置自定义请求头。abort()：取消请求。
7. 处理响应状态
可以使用onreadystatechange事件监控XHR请求的进度。
示例：
xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log("数据:", xhr.responseText); }};
8. 使用XHR的优点
异步通信: 避免阻塞主线程。跨浏览器兼容性: 适用于现代和旧版浏览器。灵活的数据格式: 支持JSON、XML、HTML和纯文本。
9. XHR的局限性
详细的语法: 相比fetch等现代API，需要更多代码。回调地狱: 复杂的请求可能导致嵌套的回调函数。有限的现代特性: 缺少Promise或async/await等功能。
10. 现代替代方案：Fetch API
尽管XHR仍然被广泛支持，但Fetch API提供了一种更现代化、基于Promise的HTTP请求方法。
Fetch示例：
fetch("https://jsonplaceholder.typicode.com/posts") .then(response => response.json()) .then(data => console.log("数据:", data)) .catch(error => console.error("错误:", error));
11. 结论
XMLHttpRequest是一种可靠且广泛支持的AJAX调用工具，但现代API (如Fetch或Axios等库) 通常因其简洁性和增强功能而更受欢迎。然而，理解XHR对于维护遗留代码和更深入地了解JavaScript异步通信至关重要。
作者：Abhay Singh Kathayat全栈开发者，精通前端和后端技术，使用多种编程语言和框架构建高效、可扩展且用户友好的应用程序。 联系邮箱：kaashshorts28@gmail.com
以上就是掌握 XMLHttpRequest：JavaScript 中 AJAX 调用指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1499632.html
微信扫一扫 
支付宝扫一扫 
