手写一个简易的Ajax

最新推荐文章于 2022-10-16 20:17:39 发布

iiiiiill

最新推荐文章于 2022-10-16 20:17:39 发布

阅读量2k

点赞数 1

分类专栏：前端面试文章标签： ajax

本文链接：https://blog.youkuaiyun.com/weixin_44738381/article/details/108464766

版权

本文介绍了Ajax技术的核心——XMLHttpRequest对象，通过它能够实现无刷新的数据交互。讲解了如何追踪Ajax请求的当前状态，包括不同readyState和status的状态含义，并提供了一个简单的Ajax GET请求示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

XMLHttpRquest

Ajax是一种技术方案，而不是一种新技术，依赖的依旧是前端三件套，最核心的依赖就是浏览器提供的XMLHttpRequest对象，可以让浏览器发出HTTP请求和接收HTTP响应。

也就是说：我们使用XMLHttpRequest对象发送一个Ajax请求。

能用Ajax做什么呢？

发送HTTP请求得到服务端数据
- 是一种无刷新的数据交互

一个简单的Ajax（get）请求

// get 请求

// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// XMLHttpRequest.open() 方法初始化一个请求
// 原始API:xhr.open(method, url, async);
// method:要是用的HTTP方法，url：请求的主体，async(可选)：false为同步，true为异步，默认为同步
xhr.open('GET', '/api', false);
// 只要 readyState 属性发生变化，就会调用相应的处理函数。
xhr.onreadystatechange = function () {
   
    // 这里的函数异步执行，可参考之前 JS 基础 中的异步模块
    if

最低0.47元/天解锁文章