以角度 8 访问 XMLHttpRequest

简介

XMLHttpRequest是一个用于在 Web 应用程序中发送 HTTP 请求的 API。可以使用它来从URL获取数据，而无需刷新整个页面。可以使用JavaScript API获取由服务器返回的任何类型的数据，例如HTML，XML，JSON等等。XMLHttpRequest可以用于许多用例，包括AJAX请求，轮询和长轮询。

在本文中，我们将探讨如何使用JavaScript中的XMLHttpRequest对象在角度8的应用程序中进行HTTP请求。

前提条件

在开始之前，请确保您的应用程序中已安装了$http模块。可以通过以下命令进行安装：

npm install --save @angular/common @angular/compiler @angular/core @angular/forms @angular/platform-browser @angular/platform-browser-dynamic @angular/router

发送HTTP请求

发送HTTP请求时，我们需要构建一个XMLHttpRequest对象，并使用它来发送请求。以下是如何构建和发送HTTP请求的代码示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send();

在上面的示例中，我们使用了 XMLHttpRequest 构造函数来构建一个对象，并使用 open、setRequestHeader 和 send 方法来发送请求。

处理响应

一旦我们已经发送了请求，就可以使用 XMLHttpRequest 对象来处理从服务器返回的响应。以下是如何处理响应的代码示例：

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.log('Error: ' + xhr.statusText);
    }
  }
};

在上面的示例中，我们使用 onreadystatechange 方法来指定处理服务器响应的方式。当 readyState 变为 XMLHttpRequest.DONE 时，我们检查 status 值来确定是否发生错误。如果状态为 200，则我们可以访问返回的数据。

结论

通过使用XMLHttpRequest对象，我们可以轻松地发送HTTP请求并处理返回的数据。这是角度8中进行AJAX请求的一种简单方法。