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

ajax请求的详细流程+详细示例

news 文章来源：https://blog.csdn.net/weixin_45342302/article/details/135278213 2025/4/19 9:03:30

AJAX（Asynchronous JavaScript and XML）是一种用于创建异步 Web 应用程序的技术。下面是 AJAX 请求的详细流程：

创建 XMLHttpRequest 对象：在 JavaScript 代码中，使用 new XMLHttpRequest() 创建一个 XMLHttpRequest 对象。这个对象用于发送异步的 HTTP 请求到服务器。
设置请求参数：使用 XMLHttpRequest 对象的方法和属性来设置请求的参数，比如请求的 URL、请求的类型（GET、POST 等）、请求头信息、请求的数据等。
注册回调函数：使用 XMLHttpRequest 对象的 onreadystatechange 属性设置一个回调函数，该函数会在请求的状态变化时被调用。可以在回调函数中处理服务器响应。
发送请求：使用 XMLHttpRequest 对象的 send() 方法发送请求。如果发送 GET 请求，可以将参数作为 URL 的一部分；如果发送 POST 请求，可以将参数作为 send() 方法的参数提供。
处理响应：在注册的回调函数中，可以使用 XMLHttpRequest 对象的属性来获取响应的状态码、响应头信息和响应的数据。可以根据不同的状态码和数据进行相应的处理，例如更新页面内容、执行一些操作等。
处理错误：在发送请求过程中，可能会产生错误。可以使用 XMLHttpRequest 对象的 onerror 属性设置一个错误处理函数，用于捕获和处理请求过程中的错误情况。

这是一个简化的 AJAX 请求的流程，具体的实现可能会根据不同的情况和需求有所差异。

以下是一个使用 AJAX 发送带有参数的 GET 请求的示例。这个示例通过一个按钮的点击事件来触发 AJAX 请求，获取并显示一个字符串。你需要将其中的 URL 和参数替换为你自己的实际值：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>AJAX 示例</title><script>function sendRequest() {// 创建 XMLHttpRequest 对象var xhr = new XMLHttpRequest();// 设置请求参数var url = 'http://example.com/api'; // 请求的 URLvar params = 'name=John&age=30';    // 请求的参数url += '?' + params;                // 将参数加到 URL 上xhr.open('GET', url, true);         // 打开请求// 注册回调函数xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {  // 请求完成且成功var response = xhr.responseText;              // 获取响应数据document.getElementById('result').innerHTML = response; // 显示响应数据}};// 发送请求xhr.send();}</script></head><body><button onclick="sendRequest()">发送请求</button><div id="result"></div></body>
</html>

这个示例中，当用户点击 “发送请求” 按钮时，通过 JavaScript 中的 sendRequest() 函数触发 AJAX 请求。请求通过 GET 方法发送到 ‘http://example.com/api’，并带有查询参数 ‘name=John&age=30’。请求成功后，回调函数 onreadystatechange 将响应数据显示在页面中。

需要注意的是，示例中使用了 XMLHttpRequest 对象的 readyState 和 status 属性来判断请求状态和是否成功。readyState 属性表示请求状态，0 表示未初始化，1 表示已打开，2 表示已发送，3 表示接收部分响应，4 表示响应全部接收完毕。而 status 属性表示响应状态码，200 表示 OK，表示请求成功。除此以外，还有其他如 404，500 等 HTTP 状态码，表示请求结果不同。我们需要根据实际情况判断何时响应已经被完整接收，并处理不同的响应结果。

ajax请求的详细流程+详细示例

相关文章：

ajax请求的详细流程+详细示例

这些产品手册制作工具，你都值得收藏

跨账号和同账号的ECS云服务器之间迁移教程

python virtualenv 虚拟环境命令

深入理解MySQL索引底层数据结构

使用 Tkinter 制作一个进制转换工具，好用！

Final Cut 视频剪辑快速入门，小白上手视频课的制作

分布式定时任务Xxl_Job详细使用手册

【PostgreSQL】表操作-修改表

【Java系列】文件操作详解

docker-compose 安装 RocketMq

【心得】PHP反序列化高级利用(phar|session)个人笔记

MyBatisPlus之增删改查

pytorch03：transforms常见数据增强操作

blob文件流前端显示pdf

Android 接入第三方数数科技平台

LVM和磁盘配额

uni-app uni-app内置组件

C语言——格式说明符前面加修饰符

实验室（检验科）信息系统LIS源码，客户端：WPF+Windows Forms

有道翻译web端爬虫, js

uni-app API接口扩展组件(uni-ui)

信息化和数字化的本质区别是什么？

发表《Nature》！美国研究团队发布可编程逻辑量子处理器

CISSP 第1章：实现安全治理的原则和策略

【并发设计模式】聊聊线程本地存储模式如何实现的线程安全

边缘计算网关：重新定义物联网数据处理

Linux之下载安装

【HarmonyOS开发】案例-记账本开发

webrtc中的接口代理框架