手写原生Ajax

kjl5365662024-06-26 17:33

打开请求:

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

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

- 'GET'：请求的方法，这里是GET方法，用于从服务器获取数据。
- '/api/lian'：请求的URL，表示将向服务器的/api/lian端点发送请求。
- true：表示这个请求应该是异步的（async）。如果为false，请求将是同步的，但在这里设置为true意味着当请求正在进行时，JavaScript代码将继续执行，不会阻塞。

设置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 == 4且xhr.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);
    }
}