JavaScript发送HTTP请求: 从入门到精通

在前端开发中，我们经常需要使用JavaScript发送HTTP请求，与服务器进行数据交互。本文将介绍如何使用JavaScript的XMLHttpRequest对象发送GET和POST请求，并提供清晰易懂的代码示例。

使用XMLHttpRequest发送GET请求

以下代码演示了如何使用XMLHttpRequest对象发送一个简单的GET请求：javascript// 创建一个新的XMLHttpRequest对象var xhr = new XMLHttpRequest();

// 设置请求的方法和URLxhr.open('GET', 'https://api.example.com/data', true);

// 设置请求头（可选）xhr.setRequestHeader('Content-Type', 'application/json');

// 监听请求状态改变事件xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功，处理响应数据 var response = JSON.parse(xhr.responseText); console.log(response); } else { // 请求发生错误或失败 console.log('请求发生错误或失败'); }};

// 发送请求xhr.send();

代码解析:

首先，我们创建一个新的XMLHttpRequest对象。2. 使用open()方法设置请求方法为'GET'，目标URL为'https://api.example.com/data'，并将第三个参数设置为true以启用异步请求。3. 可以使用setRequestHeader()方法设置请求头，例如设置Content-Type为'application/json'。4. 监听onreadystatechange事件，并在回调函数中检查readyState属性是否为4（请求已完成）以及status属性是否为200（请求成功）。5. 如果请求成功，使用JSON.parse()方法将响应数据解析为JavaScript对象。6. 如果请求失败，打印错误信息。7. 最后，使用send()方法发送请求。

发送POST请求

发送POST请求与GET请求类似，只需将open()方法的第一个参数改为'POST'，并在send()方法中传递请求体数据即可：javascript// 设置请求的方法和URLxhr.open('POST', 'https://api.example.com/data', true);

// 设置请求头xhr.setRequestHeader('Content-Type', 'application/json');

// 设置请求体数据var requestBody = { name: 'John', age: 30};xhr.send(JSON.stringify(requestBody));

注意: 在发送POST请求时，通常需要设置Content-Type请求头，以指定请求体的格式。

总结

本文介绍了如何使用JavaScript的XMLHttpRequest对象发送HTTP请求，包括GET和POST请求。你可以根据实际需求修改代码示例，例如设置不同的请求头、处理不同类型的响应数据等。