AngularJS入门教程之 XMLHttpRequest实例讲解

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 的方法名和对应的方法参数即可。