10.2.1 创建AJAX引擎XMLHttpRequest对象-Yii2框架从入门到精通(中)

当前位置:　首页>> 技术小册>> Yii2框架从入门到精通(中)

### 10.2.1 创建AJAX引擎XMLHttpRequest对象

在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。它极大地提升了用户体验，使得Web应用能够拥有接近桌面应用的响应性和交互性。而`XMLHttpRequest`对象则是实现AJAX技术的核心，它允许JavaScript向服务器发送HTTP（或HTTPS）请求，并接收响应，而无需重新加载页面。在本章节中，我们将深入探讨如何在Yii2框架（或其他任何JavaScript环境中）中创建并使用`XMLHttpRequest`对象。

#### 10.2.1.1 XMLHttpRequest概述

`XMLHttpRequest`是Web API的一部分，它提供了一个在浏览器与服务器之间传输数据的功能，支持异步通信。尽管其名称中包含“XML”，但实际上`XMLHttpRequest`能够处理多种类型的数据，包括JSON、HTML、纯文本等。自XMLHttpRequest Level 2规范起，它还被扩展以支持二进制数据（如Blob和ArrayBuffer），进一步增强了其灵活性和功能。

#### 10.2.1.2 创建XMLHttpRequest对象

在JavaScript中，创建一个`XMLHttpRequest`对象非常简单。几乎所有的现代浏览器都支持这个对象，因此你几乎不需要担心兼容性问题。以下是如何创建`XMLHttpRequest`对象的基本代码：

```javascript
var xhr = new XMLHttpRequest();
```

这行代码创建了一个新的`XMLHttpRequest`实例，并将其赋值给变量`xhr`。接下来，你可以使用`xhr`对象来配置请求、发送请求以及处理响应。

#### 10.2.1.3 配置请求

在发送请求之前，你需要通过`XMLHttpRequest`对象的方法和属性来配置请求。以下是一些常用的配置方法：

- **open(method, url, [async], [user], [password])**：初始化一个请求。`method`指定请求方法（如GET、POST），`url`指定请求的URL。`async`是一个可选参数，表示请求是否异步进行（默认为true）。`user`和`password`用于认证，但通常不常用。
  
  ```javascript
  xhr.open('GET', 'http://example.com/data', true);
  ```

- **setRequestHeader(header, value)**：在发送请求之前，设置请求的HTTP头。这对于需要身份验证或指定内容类型的请求特别有用。
  
  ```javascript
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  ```

#### 10.2.1.4 发送请求

配置好请求后，就可以使用`send()`方法发送请求了。如果请求类型为GET，`send()`方法可以接受一个可选的参数，该参数将作为查询字符串附加到URL后面，但通常对于GET请求，我们会在`open()`方法中直接指定完整的URL。对于POST请求，可以在`send()`方法中发送数据体。

```javascript
// 对于GET请求
xhr.send();

// 对于POST请求
xhr.send('key1=value1&key2=value2');
```

#### 10.2.1.5 处理响应

发送请求后，你需要处理来自服务器的响应。`XMLHttpRequest`对象提供了几个事件处理器来帮助你完成这项工作：

- **onreadystatechange**：每当`XMLHttpRequest`对象的`readyState`属性发生变化时，都会触发此事件。`readyState`是一个表示请求/响应过程的整数值。

- **onload**：当请求成功完成时触发。这意呀着响应已经成功接收，并且响应的HTTP状态码为200-299之间。

- **onerror**：当请求失败时触发。

通常，你会使用`onreadystatechange`事件处理器来检查请求是否完成并成功接收响应。但是，为了简化代码，现代JavaScript开发更倾向于使用`onload`和`onerror`，因为它们更直接地反映了请求的成功或失败状态。

```javascript
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // 处理成功响应
        console.log(xhr.responseText); // 假设响应是文本
    } else {
        // 处理错误响应
        console.error('请求失败：', xhr.status);
    }
};

xhr.onerror = function() {
    // 处理网络错误
    console.error('网络错误');
};

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

#### 10.2.1.6 在Yii2框架中使用XMLHttpRequest

虽然`XMLHttpRequest`是JavaScript的原生对象，与Yii2框架无直接关联，但你可以在Yii2项目中通过JavaScript（或更现代的库如Fetch API、Axios等）来发送AJAX请求，并与Yii2的后端进行交互。Yii2提供了丰富的支持来处理AJAX请求，包括通过控制器动作（actions）来响应这些请求，并通过视图（views）或JSON响应来发送数据。

例如，你可以在Yii2的控制器中定义一个动作来处理AJAX请求，并返回JSON格式的响应：

```php
// 控制器中的动作示例
public function actionAjaxExample()
{
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    
    // 假设这是从数据库或其他来源获取的数据
    $data = ['message' => 'Hello, AJAX!'];
    
    return $data;
}
```

然后，在前端JavaScript中，你可以使用`XMLHttpRequest`（或Fetch API等）来请求这个动作，并处理返回的JSON数据。

#### 10.2.1.7 小结

`XMLHttpRequest`是AJAX技术的核心，它允许JavaScript与服务器进行异步通信，从而在不刷新页面的情况下更新网页内容。在Yii2框架中，虽然`XMLHttpRequest`不是框架的一部分，但你可以轻松地将其与Yii2的控制器和视图集成，以实现丰富的交互式Web应用。随着Web技术的发展，虽然出现了更现代、更简洁的替代方案（如Fetch API、Axios等），但了解`XMLHttpRequest`的工作原理仍然是学习Web开发的重要一步。

该分类下的相关小册推荐：

Laravel(10.x)从入门到精通(四)

Workerman高性能框架-GatewayWorker

PHP合辑3-数组函数

Laravel(10.x)从入门到精通(八)

PHP合辑4-字符串函数

Laravel(10.x)从入门到精通(二)

Workerman高性能Web框架-Webman

Yii2框架从入门到精通(上)

PHP8入门与项目实战（5）

Laravel(10.x)从入门到精通(五)

Magento零基础到架构师(安装篇)

PHP面试指南