AngularJS入门教程之 XMLHttpRequest实例讲解

AngularJS入门教程之 XMLHttpRequest实例讲解

介绍

在使用 AngularJS 进行 Web 开发的过程中，我们通常会需要使用 http 请求来获取数据或者提交数据。而 XMLHttpRequest，则是实现这一功能时必不可少的 API 之一。本文主要介绍如何在 AngularJS 中使用 XMLHttpRequest 进行 http 请求。

准备工作

在使用 XMLHttpRequest 进行 http 请求之前，我们需要先创建一个 AngularJS 应用，并在其中引入 $http 服务。可以在应用的配置模块中进行引入：

angular.module("myApp", [])
    .config(['$httpProvider', function($httpProvider) {
        // 使用 $httpProvider 配置
    }]);

这里我们使用了应用的 config 方法，并注入 $httpProvider 服务来进行配置。

使用 GET 方法进行 http 请求

以下是使用 XMLHttpRequest 发送 GET 请求并获取数据的一个实例：

$http({
    method : "GET",
    url : "http://example.com/api/data",
}).then(function success(response) {
    console.log(response.data);
}, function error(response) {
    console.log(response.statusText);
});

在该实例中，我们使用了 $http 的 get 方法，来发送一个 GET 请求到 http://example.com/api/data 接口。如果请求成功，则会在控制台中打印返回的数据；如果请求失败，则会在控制台中打印错误信息。

使用 POST 方法提交数据

以下是使用 XMLHttpRequest 发送 POST 请求并提交数据的一个实例：

$http({
    method : "POST",
    url : "http://example.com/api/data",
    data : { key1 : value1, key2 : value2 }
}).then(function success(response) {
    console.log(response.data);
}, function error(response) {
    console.log(response.statusText);
});

在该实例中，我们使用了 $http 的 post 方法，来发送一个 POST 请求到 http://example.com/api/data 接口，并提交了包含两个键值对的数据。如果请求成功，则会在控制台中打印返回的数据；如果请求失败，则会在控制台中打印错误信息。

以上两个实例分别使用了 GET 和 POST 方法发送请求，但使用 XMLHttpRequest 进行 http 请求的过程中，涉及到的方法还有很多，包括 PUT、DELETE 等方法。在使用时，只需要替换 $http 的方法名和对应的方法参数即可。