手写原生Ajax

  1. 打开请求:

    xhr.open('GET', '/api/lian', true);

这里使用open方法初始化一个请求。参数分别为:

    • 'GET':请求的方法,这里是GET方法,用于从服务器获取数据。
    • '/api/lian':请求的URL,表示将向服务器的/api/lian端点发送请求。
    • true:表示这个请求应该是异步的(async)。如果为false,请求将是同步的,但在这里设置为true意味着当请求正在进行时,JavaScript代码将继续执行,不会阻塞。
  1. 设置onreadystatechange事件处理程序:

    xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
    let data = JSON.parse(xhr.responseText);
    }
    };

这段代码为xhr对象设置了onreadystatechange事件处理函数。当请求的状态改变时,这个函数会被调用。readyState属性表示请求的不同阶段(0到4),其中4表示请求已完成且响应已就绪。status属性是HTTP状态码,200表示请求成功。

    • xhr.readyState == 4xhr.status == 200时,说明请求已经完成并且成功了。此时,可以通过xhr.responseText获取到服务器返回的文本内容,并尝试将其解析成JSON对象,存储在变量data中。

注意 :在实际应用中,你可能还需要考虑错误处理,以及确保在调用JSON.parse之前检查响应内容是否为空或不是有效的JSON格式,以避免运行时错误。此外,如果是跨域请求,还需确保服务器支持CORS(跨源资源共享)。

以上代码是一个典型的AJAX GET请求的实现,用于向服务器请求数据并在客户端处理这些数据。

复制代码
let xhr=new XMLHttpRequest();
xhr.open('get','/api/lian',true);
xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
        let data=JSON.parse(xhr.responseText);
    }
}
相关推荐
Dontla10 小时前
Multi-Agent多智能体项目如何从MVP过渡到生产项目?
开发语言
山屿落星辰10 小时前
Flutter 高级特性实战:动画、自定义绘制、平台通道与 Web 优化
前端·flutter
dinl_vin10 小时前
FastAPI 系列 ·(四):数据库集成——SQLAlchemy 2.0 异步 ORM 与 Alembic 迁移
java·数据库·fastapi
编码者卢布10 小时前
【Azure Service Bus】Azure Service Bus Java SDK 中 Token 刷新异常的排查思路
java·python·azure
兰令水10 小时前
topcode【随机算法题】【2026.5.20打卡-java版本】
java·开发语言·算法
我还记得那天11 小时前
C语言递归实现汉诺塔问题
c语言·开发语言
不吃土豆的马铃薯11 小时前
Spdlog 入门:日志记录器与日志槽基础详解
服务器·开发语言·c++·c·日志·spdlog
AI瓦力11 小时前
技术分享 | 彻底解决图片“躺平”问题:Java 后端强制校准图片方向
java
武子康11 小时前
Java-219 RocketMQ Spring Boot 集成指南:生产者与消费者实战
java·spring boot·分布式·kafka·消息队列·rocketmq·java-rocketmq
凯瑟琳.奥古斯特11 小时前
传输层核心功能解析
开发语言·网络·职场和发展