原生js简单实现ajax请求
2024-01-09 00:47:11
前言
作为前端开发，向服务端发起请求这是必不可少的一个步骤，通过请求，服务端端返回给我们相应的数据，根据数据我们做出相应的操作。一般来说，现在很多前端开发者发起请求时都是采用第三方库来实现，比如axios、jQuery等。然而，在某些情况下，我们可能需要在原生JavaScript中实现Ajax请求，比如需要在不支持第三方库的浏览器中运行代码，或者需要对请求有更精细的控制。
XMLHttpRequest对象
XMLHttpRequest对象是原生JavaScript中用于发送HTTP请求的标准对象。它可以通过以下方式创建：
var xhr = new XMLHttpRequest();
创建XMLHttpRequest对象后，我们可以使用它来发送HTTP请求。发送请求的方法是open()方法，该方法有两个参数：第一个参数是请求的方法，比如"GET"或"POST"；第二个参数是请求的URL。
xhr.open("GET", "https://example.com/api/data");
open()方法调用后，我们可以使用send()方法来发送请求。send()方法的参数是请求体，如果请求是GET请求，则请求体可以为空。
xhr.send();
send()方法调用后，XMLHttpRequest对象会开始发送请求。当请求完成时，XMLHttpRequest对象的readyState属性会变为4，此时我们可以使用XMLHttpRequest对象的responseText属性来获取请求的响应内容。
xhr.onload = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
Fetch API
Fetch API是原生JavaScript中用于发送HTTP请求的另一个标准API。它比XMLHttpRequest对象更现代，语法也更简洁。
要使用Fetch API发送HTTP请求，我们可以使用fetch()方法。fetch()方法的参数是请求的URL。
fetch("https://example.com/api/data")
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
});
fetch()方法返回一个Promise对象。当请求完成时，Promise对象会resolve，resolve的值是请求的响应对象。我们可以使用then()方法来处理Promise对象。then()方法的参数是一个回调函数，该回调函数的参数是响应对象。
Promises和Callbacks
Promises和Callbacks都是用于处理异步操作的机制。Promise对象表示一个异步操作的结果，而Callback函数是一个在异步操作完成后被调用的函数。
Promises对象有三个状态：pending、resolved和rejected。pending状态表示异步操作正在进行中，resolved状态表示异步操作已完成且成功，rejected状态表示异步操作已完成且失败。
Callbacks函数只有一种状态：已调用或未调用。当异步操作完成后，Callback函数会被调用。
总结
XMLHttpRequest对象和Fetch API都是原生JavaScript中用于发送HTTP请求的标准API。XMLHttpRequest对象更传统，而Fetch API更现代。Promises和Callbacks都是用于处理异步操作的机制。Promise对象表示一个异步操作的结果，而Callback函数是一个在异步操作完成后被调用的函数。
实例
下面是一个使用原生JavaScript实现Ajax请求的示例：
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data");
xhr.send();
xhr.onload = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
这个示例中，我们使用XMLHttpRequest对象发送了一个GET请求到URL "https://example.com/api/data"。当请求完成时，我们使用onload事件处理程序来处理请求的响应。如果请求成功（状态码为200），我们使用JSON.parse()方法将响应内容解析为JavaScript对象，然后将对象打印到控制台。
扩展阅读
