AngularJS 与 XMLHttpRequest

在 AngularJS 中，XMLHttpRequest（XHR）是用于与服务器交换数据的一种传统方式。尽管 AngularJS 内置了强大的 $http 服务来简化与服务器的交互，了解如何使用 XMLHttpRequest 进行 AJAX 请求对于那些需要自定义请求或更深入了解 HTTP 请求的开发者非常有用。

在 AngularJS 中，XMLHttpRequest 不直接作为服务存在，但你可以通过浏览器的 XMLHttpRequest 对象进行原生的 HTTP 请求处理。通常，$http 服务会封装这些操作并提供更方便的接口。

1. 使用 XMLHttpRequest 进行 AJAX 请求

XMLHttpRequest 是一个原生的 JavaScript 对象，用于与服务器进行数据交换。它允许你在页面不重新加载的情况下与服务器进行异步交互。

示例：使用 XMLHttpRequest 发送 GET 请求

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS XMLHttpRequest 示例</title>
</head>
<body ng-controller="myController">
    <h1>{{ message }}</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);

        app.controller('myController', function($scope) {
            // 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            
            // 设置请求类型和请求URL
            xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
            
            // 设置回调函数，处理服务器响应
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var response = JSON.parse(xhr.responseText);
                    $scope.$apply(function() {
                        $scope.message = response.title;  // 更新视图
                    });
                }
            };
            
            // 发送请求
            xhr.send();
        });
    </script>
</body>
</html>

在这个例子中：

  • 创建了一个 XMLHttpRequest 对象，并配置为向一个公共的 API (https://jsonplaceholder.typicode.com/posts/1) 发送 GET 请求。
  • 当请求完成并且状态为 readyState == 4 且 status == 200 时，处理响应数据，并使用 $scope.$apply() 更新 AngularJS 视图。
  • xhr.responseText 返回的是响应内容，可以使用 JSON.parse() 将其转换为 JSON 格式进行进一步处理。

2. 使用 XMLHttpRequest 发送 POST 请求

除了 GET 请求，XMLHttpRequest 还可以发送 POST 请求，传递数据给服务器。可以使用 xhr.setRequestHeader 来设置请求头，并通过 xhr.send() 发送数据。

示例：使用 XMLHttpRequest 发送 POST 请求

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS XMLHttpRequest POST 示例</title>
</head>
<body ng-controller="myController">
    <h1>{{ message }}</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);

        app.controller('myController', function($scope) {
            // 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            
            // 设置请求类型和请求URL
            xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
            
            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/json');
            
            // 设置回调函数，处理服务器响应
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 201) {
                    var response = JSON.parse(xhr.responseText);
                    $scope.$apply(function() {
                        $scope.message = response.title;  // 更新视图
                    });
                }
            };
            
            // 要发送的数据
            var data = JSON.stringify({
                title: 'foo',
                body: 'bar',
                userId: 1
            });
            
            // 发送请求
            xhr.send(data);
        });
    </script>
</body>
</html>

在这个例子中：

  • 使用 xhr.open() 配置 POST 请求，并通过 xhr.setRequestHeader() 设置请求头，告诉服务器数据的格式是 application/json。
  • xhr.send(data) 发送包含 JSON 数据的请求体，数据被转化为字符串格式。
  • 当请求完成时，使用 JSON.parse(xhr.responseText) 解析响应，并将数据绑定到 AngularJS 视图中。

3. 使用 XMLHttpRequest 处理错误

XMLHttpRequest 还可以处理请求错误，通常可以通过监听 onerror 事件或检查状态码来实现。

示例：处理请求错误

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS XMLHttpRequest 错误处理 示例</title>
</head>
<body ng-controller="myController">
    <h1>{{ message }}</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);

        app.controller('myController', function($scope) {
            // 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            
            // 设置请求类型和请求URL
            xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/invalid', true);
            
            // 设置回调函数，处理服务器响应
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var response = JSON.parse(xhr.responseText);
                        $scope.$apply(function() {
                            $scope.message = response.title;
                        });
                    } else {
                        $scope.$apply(function() {
                            $scope.message = "Error: " + xhr.statusText; // 处理错误
                        });
                    }
                }
            };

            // 发送请求
            xhr.send();
        });
    </script>
</body>
</html>

在这个例子中：

  • 当服务器返回状态码不为 200 时，我们检查 xhr.status，并通过 $scope.$apply() 更新视图，显示错误消息。

4. 使用 XMLHttpRequest 与 AngularJS 的 $http 服务

虽然 XMLHttpRequest 是浏览器中原生支持的 API，AngularJS 提供了一个更加简洁和强大的方式来发送 AJAX 请求，即 $http 服务。$http 内部也是基于 XMLHttpRequest，但它提供了更强大的功能和更简洁的 API。通常推荐使用 $http 服务来替代 XMLHttpRequest，但了解 XMLHttpRequest 是如何工作的仍然非常有用。

示例：使用 AngularJS 的 $http 服务

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS $http 示例</title>
</head>
<body ng-controller="myController">
    <h1>{{ message }}</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);

        app.controller('myController', function($scope, $http) {
            $http.get('https://jsonplaceholder.typicode.com/posts/1')
                .then(function(response) {
                    $scope.message = response.data.title;
                }, function(error) {
                    $scope.message = "Error: " + error.statusText;
                });
        });
    </script>
</body>
</html>

在这个例子中，$http.get() 发送 GET 请求，而 then() 方法用于处理成功的响应和错误的响应。这是一个更加简洁和推荐的方式。

总结

  • XMLHttpRequest 是浏览器提供的原生 API，用于发送异步 HTTP 请求，支持 GET、POST 等请求类型。
  • 你可以手动使用 XMLHttpRequest 进行请求，但通常推荐使用 AngularJS 内建的 $http 服务，它封装了 XMLHttpRequest，提供了更加简洁和易用的接口。
  • 了解 XMLHttpRequest 可以帮助你更好地理解 AngularJS 的 $http 服务工作原理，尤其在处理自定义请求时非常有用。