JavaScript发出HTTP请求的两种常用方法

JavaScript发出HTTP请求的两种常用方法

在Web开发中，经常需要使用JavaScript发送HTTP请求与服务器交互，获取数据或提交信息。以下是两种常用的方法：

1. 使用XMLHttpRequest对象

XMLHttpRequest对象是浏览器内置的用于发送HTTP请求的传统方法。javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', 'https://example.com/api/data', true);xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); // 对响应进行处理 }};xhr.send();

代码解释:

1. 创建一个新的XMLHttpRequest对象。2. 使用open()方法设置请求方法('GET', 'POST'等)、URL和是否异步(true为异步)。3. 设置onreadystatechange事件监听器，在请求状态发生变化时触发。4. 在事件处理函数中，检查readyState (4表示请求完成) 和status(200表示成功)属性以确定请求是否成功。5. 如果成功，可以通过responseText访问服务器的响应内容，并可以使用JSON.parse()方法将其解析为JSON对象。6. 最后，使用send()方法发送请求。

2. 使用fetch API

fetch API是更现代的发送HTTP请求的方法，它返回Promise对象，使代码更简洁易读。javascriptfetch('https://example.com/api/data') .then(function (response) { if (response.ok) { return response.json(); } throw new Error('网络请求错误。'); }) .then(function (data) { // 对响应进行处理 }) .catch(function (error) { console.log(error); });

代码解释:

1. fetch()函数发送GET请求，并返回一个Promise对象。2. 使用.then()方法处理成功的响应。3. 检查response.ok属性，如果为true表示请求成功(状态码在200-299之间)。4. 使用.json()方法将响应解析为JSON对象。5. 如果response.ok为false，抛出一个错误。6. 使用.catch()方法捕获错误并进行处理。

总结:

两种方法都可以发送HTTP请求并获取服务器响应。XMLHttpRequest较为传统，但功能强大；fetch API更加简洁易用，并且支持Promise语法。选择哪种方法取决于具体需求和个人偏好。