Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术在Web开发中被广泛应用，因为它极大地提升了用户体验，允许用户在交互过程中无需等待页面刷新就能看到更新内容。
在Ajax的核心中，XMLHttpRequest（XHR）对象扮演了至关重要的角色。它是JavaScript用来与服务器进行异步数据交换的原生对象。XMLHttpRequest这个名字可能会误导人，实际上它不仅支持XML格式的数据，还支持JSON、HTML等多种格式的数据传输。
**XMLHttpRequest对象的创建**
在不同的浏览器环境下，创建XMLHttpRequest对象的方式有所不同。在IE5以上版本，由于使用的是ActiveX对象，创建方式如下：
```javascript
var xmlhttpIEnew = new ActiveXObject("Msxml2.XMLHTTP");
var xmlhttpIEold = new ActiveXObject("Microsoft.XMLHTTP");
```
而在非IE浏览器，如Firefox、Chrome、Safari等，可以使用原生的XMLHttpRequest对象创建：
```javascript
var xmlhttp = new XMLHttpRequest();
```
**XMLHttpRequest对象的使用**
1. **open()方法**：用于指定请求的类型（GET或POST）、URL以及是否异步执行。例如：
```javascript
XMLHttpReq.open("GET", url, true);
```
2. **onreadystatechange属性**：设置处理响应的函数，当XMLHttpRequest对象的状态发生变化时，会调用该函数。例如：
```javascript
XMLHttpReq.onreadystatechange = processResponse;
```
3. **send()方法**：实际发送请求到指定的URL。如果使用POST方法，需要在send()方法中传递数据；如果是GET，一般传递null。
```javascript
XMLHttpReq.send(null);
```
**XMLHttpRequest对象的状态**
XMLHttpRequest对象具有`readyState`属性，表示请求/响应过程的当前阶段。它有五个可能的值：
- 0: 未初始化，open()方法尚未被调用。
- 1: 初始化，open()方法已被调用，但send()方法未调用。
- 2: 已发送，send()方法已调用，但服务器响应未到达。
- 3: 接收中，部分响应数据已接收，但响应头和完整响应体尚未接收。
- 4: 完成，响应已接收且可使用，可以通过响应属性获取数据。
**处理响应**
当`readyState`变为4（完成状态）且`status`为200（表示请求成功）时，可以处理服务器返回的数据。例如：
```javascript
if (XMLHttpRequest.readyState == 4 && XMLHttpRequest.status == 200) {
// 处理服务器返回的信息
} else {
// 处理异常情况
}
```
通过以上步骤，我们可以实现一个简单的Ajax请求示例，例如获取并显示指定URL上的数据：
```javascript
function sendRequest(url) {
var XMLHttpReq = new XMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = function() {
if (XMLHttpReq.readyState == 4 && XMLHttpReq.status == 200) {
alert(XMLHttpReq.responseText);
} else {
alert("页面不正常");
}
};
XMLHttpReq.send(null);
}
```
Ajax利用XMLHttpRequest对象实现了异步数据交换，从而在不刷新整个页面的情况下更新内容，极大地提升了Web应用的交互性和响应速度。随着前端技术的发展，现代浏览器对XMLHttpRequest进行了优化，提供了更高级的API，如fetch API，使得异步请求更加简单和易用。然而，了解XMLHttpRequest的基础知识仍然是理解Web开发中异步交互机制的关键。
