JavaScript 知识量：26 - 101 - 483
XMLHttpRequest 是一个 JavaScript 对象，它用于在浏览器和服务器之间发送 HTTP 请求和接收响应。它是实现 AJAX（Asynchronous JavaScript and XML）技术的关键组件之一，允许网页在不重新加载整个页面的情况下，与服务器进行通信和更新部分内容。
XMLHttpRequest 对象具有以下主要功能：
发送 HTTP 或 HTTPS 请求到服务器。
接收来自服务器的响应。
在不刷新页面的情况下更新网页内容。
在后台与服务器交换数据。
异步处理服务器响应。
使用 XMLHttpRequest 对象，可以执行以下操作：
发起 HTTP GET 或 POST 请求。
设置请求的头部信息，如 Content-Type、Accept 等。
监听请求的进度，包括 readyState 状态和 onreadystatechange 事件。
处理服务器的响应，获取返回的数据并进行操作。
跟踪 HTTP 状态码，处理错误情况。
使用 XMLHttpRequest 的基本步骤如下：
创建 XMLHttpRequest 对象。
打开一个到服务器的连接，指定请求方法（GET、POST 等）和 URL。
设置请求的头部信息，如 Content-Type、Accept 等。
发送请求。
监听 onreadystatechange 事件，检查响应的状态码和数据。
处理响应的数据，更新网页内容或进行其他操作。
关闭连接。
需要注意的是，XMLHttpRequest 是一个比较底层和繁琐的 API，使用它来实现 AJAX 技术需要编写较多的代码。为了简化开发，现代 Web 开发中通常会使用更高级的库或框架（如 jQuery、Axios 等），它们封装了 XMLHttpRequest 的功能并提供了更简洁、易用的接口。
XMLHttpRequest对象的主要方法包括：
abort()：停止发送当前请求。
getAllResponseHeader()：获取服务器的全部响应头。
getResponseHeader()：根据响应头的名字，获取对应的响应头。
open()：建立与服务器URL的连接，并设置请求的方法，以及是否使用异步请求。如果远程服务需要用户名、密码，则提供对应的信息。
send()：发送请求。其中content是请求参数。
setRequestHeader()：在发送请求之前，先设置请求头。
XMLHttpRequest 对象有一个 readyState 属性。这个属性用于表示请求的状态，它的值是一个整数，表示请求的不同阶段。通过检查 readyState 的值，可以了解请求是否已经成功发送、是否已经接收到响应等。
以下是 readyState 属性的可能值：
0: UNSENT（未发送） - 请求未发送
1: OPENED（打开） - 请求已打开，但未发送
2: HEADERS_RECEIVED（头已接收） - 请求已成功发送，正在接收响应头
3: LOADING（加载） - 正在接收响应体
4: DONE（完成） - 响应已完全接收
通过监听 onreadystatechange 事件，可以在 readyState 属性的值改变时触发相应的事件处理程序。在事件处理程序中，可以检查 readyState 的值来确定请求的当前状态，以便执行相应的操作。
HTTP头部（HTTP header）是HTTP协议消息头部的简称，它是在HTTP协议的请求和响应报文中，定义客户端和服务器处理请求和响应的方式的部分。
HTTP头部是键值对形式，由冒号分隔键和值，每行一对，由回车换行符分隔。头部信息在请求报文和响应报文中的结构略有不同，以下是一些常见的HTTP头部信息：
1. 通用头（General Header）：这类头部信息适用于请求报文和响应报文。常见的通用头有：
Host：定义请求的目标服务器的主机名和端口号。
Connection：定义是否保持网络连接。
User-Agent：定义发起请求的用户代理，如浏览器类型、版本等。
2. 请求头（Request Header）：这类头部信息用于请求报文，提供客户端对服务器进行请求的附加信息。常见的请求头有：
Method：定义请求方法，如GET、POST等。
RequestURI：定义请求资源的路径。
Accept：定义客户端能够接受的内容类型。
Accept-Language：定义客户端能够接受的语言类型。
3. 响应头（Response Header）：这类头部信息用于响应报文，提供服务器对客户端的响应附加信息。常见的响应头有：
Status-Code：定义响应的状态码，如200表示成功。
Content-Type：定义响应的内容类型。
Content-Length：定义响应内容的长度。
Set-Cookie：定义服务器设置的Cookie信息。
4. 长连接和分块传输（Long Live and Chunked Transfer）：这类头部信息用于控制数据传输的方式。常见的这类头部信息有：
Keep-Alive：定义长连接，减少TCP连接建立和关闭的开销。
Transfer-Encoding：定义数据传输的方式，如分块传输。
5. 其他（Others）：除了以上几类头部信息外，还有一些其他的HTTP头部信息，如安全相关的头部信息（如认证、加密等）、扩展的头部信息等。
HTTP头部信息的具体使用和定义可能因不同的HTTP版本和应用场景而有所不同。在编写HTTP客户端或服务器时，需要根据具体的应用需求和HTTP规范来设置和使用相应的头部信息。
GET请求是HTTP协议中最常用的请求方法之一。它用于向服务器查询某些信息，并将结果作为响应返回给客户端。GET请求通常用于从服务器获取数据或查询某些信息，例如搜索查询、页面浏览等。
在GET请求中，请求的URL包含了需要查询的参数信息，这些参数会被附加在URL的末尾，以“?”或“&”分隔。服务器会解析这些参数，并针对每个参数执行相应的查询或操作，然后将结果作为响应返回给客户端。
GET请求的特点是请求的数据会显示在URL中，因此它不适合传输敏感信息或大量数据。另外，由于GET请求会将所有参数都放在URL中，因此对于一些限制URL长度的应用场景，例如社交媒体平台的分享链接，可能会存在限制。
以下是使用XMLHttpRequest对象发送GET请求向服务器发送数据的示例：
var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open("GET", "https://api.example.com/data", true); // 打开连接，指定请求的URL、请求方法和请求的异步方式
xhr.setRequestHeader("Content-Type", "application/json"); // 设置请求的头部信息
xhr.onreadystatechange = function() { // 监听onreadystatechange事件
if (xhr.readyState === 4) { // 请求已完成
if (xhr.status === 200) { // 响应成功
var data = JSON.parse(xhr.responseText); // 解析响应的文本内容为JSON格式的数据
console.log(data); // 输出数据到控制台中
} else { // 响应失败
console.error("请求失败：" + xhr.status);
}
}
};
xhr.send(); // 发送请求在上述代码中，首先创建了一个XMLHttpRequest对象。接着，使用open()方法打开连接，指定了请求的URL、请求方法和请求的异步方式（true表示异步方式）。然后，使用setRequestHeader()方法设置了请求的头部信息Content-Type为application/json。接下来，监听了onreadystatechange事件，并在事件处理程序中检查了响应的状态码和数据。如果状态码为200（成功状态码），将响应的文本内容解析为JSON格式的数据，并输出到控制台中。如果响应失败，将输出错误信息到控制台中。最后，调用了send()方法发送请求，并关闭了连接。
POST请求是HTTP协议中的一种请求方法，它用于向服务器提交数据。与GET请求不同，POST请求将数据放在请求的主体（body）中，而不是URL中，因此它更适合传输大量数据或敏感信息。
POST请求的URL不包含请求的数据，而是由HTTP协议的请求头（header）中的Content-Type指定。常见的Content-Type包括application/x-www-form-urlencoded和multipart/form-data等。
当使用POST请求向服务器提交表单数据时，可以选择使用application/x-www-form-urlencoded或multipart/form-data作为Content-Type。其中，application/x-www-form-urlencoded将表单数据按照key1=val1&key2=val2的方式进行编码，而multipart/form-data则使用特定的格式将表单数据编码成多个部分。
在使用POST请求时，客户端需要将数据放置在请求的主体中，并在请求头中指定Content-Type。服务器会解析请求的主体，并根据Content-Type执行相应的操作，然后将结果作为响应返回给客户端。
POST请求的特点是可以传输大量数据或敏感信息，同时不会将数据显示在URL中，因此更加安全和隐蔽。
以下是使用XMLHttpRequest对象发送POST请求向服务器发送数据的示例：
var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open("POST", "https://api.example.com/data", true); // 打开连接，指定请求的URL、请求方法和请求的异步方式
xhr.setRequestHeader("Content-Type", "application/json"); // 设置请求的头部信息
xhr.onreadystatechange = function() { // 监听onreadystatechange事件
if (xhr.readyState === 4) { // 请求已完成
if (xhr.status === 200) { // 响应成功
var data = JSON.parse(xhr.responseText); // 解析响应的文本内容为JSON格式的数据
console.log(data); // 输出数据到控制台中
} else { // 响应失败
console.error("请求失败：" + xhr.status);
}
}
};
var data = { // 要发送的数据
name: "John",
age: 30,
email: "john@example.com"
};
xhr.send(JSON.stringify(data)); // 将数据转换为JSON格式后发送请求在上述代码中，首先创建了一个XMLHttpRequest对象。接着，使用open()方法打开连接，指定了请求的URL、请求方法和请求的异步方式（true表示异步方式）。然后，使用setRequestHeader()方法设置了请求的头部信息Content-Type为application/json。接下来，监听了onreadystatechange事件，并在事件处理程序中检查了响应的状态码和数据。如果状态码为200（成功状态码），将响应的文本内容解析为JSON格式的数据，并输出到控制台中。如果响应失败，将输出错误信息到控制台中。最后，将要发送的数据对象转换为JSON格式的字符串，并使用send()方法发送请求。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6