### XMLHttpRequest 相关知识点
#### 一、XMLHttpRequest 概述
`XMLHttpRequest` 是一个内置的对象，用于在后台与服务器交换数据并更新部分网页，而无需重新加载整个页面。这种技术是 AJAX（Asynchronous JavaScript and XML）的核心，使得网页能够实现更丰富的交互功能。
#### 二、XMLHttpRequest 的主要属性和方法
1. **`onreadystatechange`**：
- **作用**：此事件触发器用于指定当 `XMLHttpRequest` 对象的 `readyState` 属性发生变化时所调用的函数。
- **示例**：
```javascript
xmlhttp.onreadystatechange = HandleStateChange;
function HandleStateChange() {
if (xmlhttp.readyState == 4) {
myButton.disabled = false;
alert("Result=" + xmlhttp.responseText);
}
}
```
2. **`readyState`**：
- **作用**：表示请求/响应过程中的当前活动阶段。
- **取值**：
- `0`：未初始化
- `1`：已打开
- `2`：已发送
- `3`：正在接收
- `4`：完成
- **示例**：
```javascript
if (xmlhttp.readyState == 4) { // 请求完成
// 处理响应...
}
```
3. **`responseText`**：
- **作用**：返回从服务器接收的响应数据（作为字符串形式）。
- **示例**：
```javascript
alert("Result=" + xmlhttp.responseText);
```
4. **`responseXML`**：
- **作用**：如果从服务器接收的数据是 XML 形式，则返回一个 XML 文档对象。
- **示例**：
```javascript
alert("Result=" + xmlhttp.responseXML.xml);
```
5. **`status`**：
- **作用**：表示 HTTP 状态码，例如 `200` 表示成功。
- **示例**：
```javascript
if (xmlhttp.status == 200) { // 成功
// 处理响应...
}
```
6. **`statusText`**：
- **作用**：返回文本形式的状态信息。
- **示例**：
```javascript
alert("Status: " + xmlhttp.statusText);
```
7. **`open()` 方法**：
- **作用**：初始化一个新的 HTTP 请求。
- **参数**：
- `method`：请求方法（GET, POST 等）。
- `url`：请求的 URL。
- `async`：是否异步处理该请求。
- **示例**：
```javascript
xmlhttp.open("POST", "http://myserver/orders/processorder.asp", false);
```
8. **`send()` 方法**：
- **作用**：发送请求到服务器。
- **参数**：
- 可以是一个字符串或 XML 文档对象，根据请求类型而定。
- **示例**：
```javascript
xmlhttp.send(xmldoc);
```
9. **`abort()` 方法**：
- **作用**：取消正在进行的请求。
- **示例**：
```javascript
xmlhttp.abort();
```
10. **`setRequestHeader()` 方法**：
- **作用**：设置 HTTP 请求头。
- **示例**：
```javascript
xmlhttp.setRequestHeader("Content-Type", "application/xml");
```
11. **`getAllResponseHeaders()` 方法**：
- **作用**：返回所有的响应头作为一个字符串。
- **示例**：
```javascript
console.log(xmlhttp.getAllResponseHeaders());
```
12. **`getResponseHeader()` 方法**：
- **作用**：返回指定名称的响应头的值。
- **示例**：
```javascript
console.log(xmlhttp.getResponseHeader("Content-Type"));
```
#### 三、使用示例
```javascript
var xmlhttp = null;
function PostOrder(xmldoc) {
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.5.0");
xmlhttp.open("POST", "http://myserver/orders/processorder.asp", false);
xmlhttp.onreadystatechange = HandleStateChange;
xmlhttp.send(xmldoc);
myButton.disabled = true;
}
function HandleStateChange() {
if (xmlhttp.readyState == 4) {
myButton.disabled = false;
alert("Result=" + xmlhttp.responseText);
}
}
```
#### 四、注意事项
1. **浏览器兼容性**：虽然现代浏览器普遍支持 `XMLHttpRequest`，但不同的浏览器可能会有一些细微差异。
2. **安全问题**：需要注意跨域访问的问题，以及确保数据传输的安全性。
3. **错误处理**：在实际应用中需要对各种可能发生的错误进行妥善处理。
以上是对 `XMLHttpRequest` 的详细介绍，包括其基本概念、主要属性和方法的使用示例，以及注意事项等。通过掌握这些知识点，开发者可以更加熟练地利用 `XMLHttpRequest` 实现网页与服务器之间的异步通信。
