JS-27 前端数据请求方式；HTTP协议的解析；JavaScript XHR、Fetch的数据请求与响应函数；前端文件上传XHR、Fetch

**JS-27 前端数据请求方式**

在前端开发中，数据请求是非常重要的一部分。我们需要从服务器获取数据，并将其展示给用户。在本文中，我们将讨论 JavaScript 中的两种常见数据请求方式：XHR（XMLHttpRequest）和 Fetch API。

### HTTP协议HTTP（Hypertext Transfer Protocol）是一种用于传输超文本数据的网络通信协议。它定义了客户端和服务器之间的请求-响应模式。HTTP协议有以下几个主要特点：

* **请求方法**：GET、POST、PUT、DELETE 等。
* **状态码**：200 OK、404 NOT FOUND 等。
* **头部信息**：Content-Type、Accept-Language 等。

### JavaScript XHRXMLHttpRequest（XHR）是浏览器提供的用于异步发送 HTTP 请求并接收响应的 API。它允许我们在不刷新页面的情况下与服务器交互。

#### XHR 的基本方法：

* **open()**：打开一个 URL，指定请求方法和头部信息。
* **send()**：发送请求数据。
* **getResponseHeader()**：获取响应头部信息。
* **getAllResponseHeaders()**：获取所有响应头部信息。
* **getResponseText()**：获取响应正文（文本）。
* **getResponseXml()**：获取响应正文（XML）。

#### XHR 的事件：

* **onreadystatechange**：当 readyState 变化时触发。
* **onload**：当请求成功完成时触发。
* **onerror**：当请求出错时触发。

### JavaScript FetchFetch API 是一个用于异步发送 HTTP 请求并接收响应的新标准。它提供了更简单和更强大的 API，相比于 XHR。

#### Fetch 的基本方法：

* **fetch()**：发送 GET 请求。
* **fetch(url, options)**：发送 POST、PUT、DELETE 等请求。
* **json()**：解析 JSON 响应体。
* **text()**：解析文本响应体。

#### Fetch 的事件：

* **then()**：处理成功完成的响应。
* **catch()**：处理出错的响应。

### 前端文件上传 XHR在使用 XHR 进行文件上传时，我们需要将文件转换为二进制数据，然后发送给服务器。我们可以使用以下方法：

* **FileReader**：读取文件内容。
* **FormData**：创建表单数据对象。
* **send()**：发送请求。

### 前端文件上传 Fetch在使用 Fetch 进行文件上传时，我们需要将文件转换为二进制数据，然后发送给服务器。我们可以使用以下方法：

* **FileReader**：读取文件内容。
* **FormData**：创建表单数据对象。
* **fetch()**：发送请求。

###代码示例#### XHR 示例

javascript// 创建 XMLHttpRequest 对象var xhr = new XMLHttpRequest();

// 打开 URL，指定请求方法和头部信息xhr.open('GET', ' true);

// 设置响应头部信息xhr.setRequestHeader('Content-Type', 'application/json');

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

// 处理成功完成的响应xhr.onload = function() {
 if (xhr.status ===200) {
 var data = JSON.parse(xhr.responseText);
 console.log(data);
 }
};

// 处理出错的响应xhr.onerror = function() {
 console.error('Error:', xhr.statusText);
};

javascript// 发送 GET 请求fetch(' /> .then(response => response.json())
 .then(data => console.log(data))
 .catch(error => console.error('Error:', error));

// 发送 POST 请求fetch(' {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify({ name: 'John', age:30 }),
})
 .then(response => response.json())
 .then(data => console.log(data))
 .catch(error => console.error('Error:', error));

javascript// 使用 XHR 进行文件上传var fileInput = document.getElementById('fileInput');
var xhr = new XMLHttpRequest();

fileInput.addEventListener('change', function() {
 var file = this.files[0];
 var formData = new FormData();
 formData.append('file', file);

 xhr.open('POST', ' true);
 xhr.send(formData);

 xhr.onload = function() {
 if (xhr.status ===200) {
 console.log('File uploaded successfully!');
 }
 };

 xhr.onerror = function() {
 console.error('Error:', xhr.statusText);
 };
});

// 使用 Fetch 进行文件上传var fileInput = document.getElementById('fileInput');
fetch(' {
 method: 'POST',
 headers: { 'Content-Type': 'multipart/form-data' },
 body: new FormData(fileInput),
})
 .then(response => response.json())
 .then(data => console.log(data))
 .catch(error => console.error('Error:', error));