XMLHttpRequest中文参考手册

XMLHttpRequest（XHR）是JavaScript中一个非常重要的对象，它允许我们在不刷新整个页面的情况下与服务器进行异步数据交换，这就是我们常说的AJAX（Asynchronous JavaScript and XML）。这个技术极大地提升了网页的用户体验，因为它能够在后台悄悄地加载和更新数据，而用户可以继续浏览或操作页面的其他部分。 在XMLHttpRequest的使用中，主要涉及以下几个关键知识点： 1. **创建实例**：我们需要在JavaScript代码中创建一个新的XMLHttpRequest实例。例如： ```javascript var xhr = new XMLHttpRequest(); ``` 2. **设置回调函数**：XMLHttpRequest的工作是异步的，因此我们需要定义多个事件处理函数来监听请求的不同状态。最常见的有`onreadystatechange`（状态改变时触发）和`onerror`（请求出错时触发）。 ```javascript xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功，处理响应数据 } else if (xhr.status !== 200) { // 请求失败，处理错误 } }; ``` 3. **打开连接**：使用`open()`方法设置请求的类型（GET、POST等）、URL以及是否异步执行。 ```javascript xhr.open('GET', 'http://example.com/data', true); ``` 4. **发送请求**：调用`send()`方法发送请求。如果是GET请求，直接发送即可；如果是POST请求，需要在`send()`方法中传递数据。 ```javascript xhr.send(); // 对于GET请求 xhr.send('data=example'); // 对于POST请求 ``` 5. **处理响应**：当请求完成且状态为200（表示成功）时，可以通过`responseText`或`responseXML`属性获取响应的数据。如果是JSON格式，通常需要先使用`JSON.parse()`转换。 ```javascript var response = xhr.responseText; var jsonData = JSON.parse(xhr.responseText); ``` 6. **HTTP头信息**：通过`setRequestHeader()`方法可以设置HTTP请求头，如`Content-Type`，这对于POST请求尤其重要。 ```javascript xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); ``` 7. **进度事件**：XHR2引入了`progress`、`loadstart`和`loadend`事件，可以用来获取上传和下载的进度信息。 ```javascript xhr.upload.onprogress = function(event) { var loaded = event.loaded; var total = event.total; // 计算并显示进度 }; ``` 8. **跨域请求**：XMLHttpRequest支持CORS（跨源资源共享），但需要服务器端配合设置`Access-Control-Allow-Origin`等响应头。 9. **预检请求（Preflight Request）**：对于某些非简单请求，如自定义HTTP头或POST请求，浏览器会先发送一个OPTIONS请求，称为预检请求，以确保服务器允许这种请求。 10. **错误处理**：除了`onerror`事件外，还可以通过`status`属性检查HTTP状态码来识别错误，如404（未找到）、500（服务器内部错误）等。 在实际开发中，通常会使用jQuery、axios、fetch等库来简化XMLHttpRequest的使用，它们提供了更友好的API和更好的兼容性。但理解XMLHttpRequest的基本工作原理对于深入理解AJAX和前端交互至关重要。