使用JavaScript发送HTTP请求164

JavaScript提供了一种强大的API，使开发者可以轻松地与服务器进行交互，发送和接收数据。本文将详细介绍如何使用JavaScript发起HTTP请求，涵盖各种常用HTTP方法、请求头和请求正文的构造。

XMLHttpRequest对象

在JavaScript中，XMLHttpRequest对象用于发起HTTP请求。这是一个内置的对象，可以在所有现代浏览器中使用。可以使用以下代码创建XMLHttpRequest对象：```javascript
var xhr = new XMLHttpRequest();
```

HTTP请求方法

HTTP定义了几种请求方法，用于指定请求的目的。常用的请求方法包括：
GET：从服务器获取数据。
POST：向服务器发送数据。
PUT：更新服务器上的现有资源。
DELETE：从服务器删除资源。

可以在XMLHttpRequest对象的open()方法中指定请求方法：```javascript
("GET", "/");
```

请求头

HTTP请求头用于向服务器传递额外的信息，例如请求的内容类型或认证凭证。可以使用XMLHttpRequest对象的setRequestHeader()方法设置请求头：```javascript
("Content-Type", "application/json");
```

请求正文

对于POST、PUT和其他需要发送数据的请求，可以使用XMLHttpRequest对象的send()方法发送请求正文。请求正文可以是任何格式的数据，例如字符串、JSON对象或FormData对象：```javascript
("{ "name": "John Doe" }");
```

事件监听

XMLHttpRequest对象提供了几个事件，用于监听请求的进度和完成情况。常用的事件包括：
readystatechange：当服务器响应请求时触发，提供请求的当前状态。
load：当请求成功完成时触发，提供服务器响应。
error：当请求失败时触发，提供错误信息。

可以通过addEventListener()方法监听事件：```javascript
("readystatechange", function() {
if ( === 4 && === 200) {
();
}
});
```

范例

以下是一个使用XMLHttpRequest发起GET请求的简单范例：```javascript
var xhr = new XMLHttpRequest();
("GET", "/");
= function() {
if ( === 200) {
();
}
};
();
```

跨域请求

在某些情况下，JavaScript请求可能需要跨越不同的域（例如，从第三方API获取数据）。默认情况下，浏览器出于安全考虑会阻止跨域请求。可以使用CORS（跨域资源共享）来解决此问题，它允许浏览器在特定条件下允许跨域请求。

JavaScript的XMLHttpRequest API提供了强大的功能，可以轻松地与服务器进行交互。通过理解HTTP请求方法、请求头、请求正文和事件监听，开发者可以创建高效且可靠的JavaScript应用程序来发送和接收数据。

2025-01-14

上一篇：JavaScript 实例化：揭晓幕后的魔法

下一篇：JavaScript 标准参考