# `XMLHttpRequest`教程

> 原文： [http://zetcode.com/javascript/xmlhttprequest/](http://zetcode.com/javascript/xmlhttprequest/)

`XMLHttpRequest`教程展示了如何使用`XMLHttpRequest`在 JavaScript 中发出 HTTP 请求。

## `XMLHttpRequest`

`XMLHttpRequest`是内置的浏览器对象，它允许使用 JavaScript 发出 HTTP 请求。 `XMLHttpRequest` API 提供了用于在客户端和服务器之间传输数据的客户端功能。 它提供了一种从 URL 检索数据的简便方法，而无需刷新整个页面。

结果，网页必须仅更新页面的一部分而不破坏用户正在做的事情。 `XMLHttpRequest`在 AJAX 编程中大量使用。 `XMLHttpRequest`以两种操作模式工作：同步和异步。 尽管它的名字，`XMLHttpRequest`可以对任何数据进行操作，而不仅限于 XML。

## `XMLHttpRequest`示例

下面的示例向测试站点创建一个请求，并返回当前日期时间。

`fetch_time.js`

```js
let getJSON = (url, callback) => {

    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';

    xhr.onload = () => {

        let status = xhr.status;

        if (status == 200) {
            callback(null, xhr.response);
        } else {
            callback(status);
        }
    };

    xhr.send();
};

getJSON('http://time.jsontest.com', (err, data) => {

    if (err != null) {
        console.error(err);
    } else {

        let text = `Date: ${data.date}
Time: ${data.time}
Unix time: ${data.milliseconds_since_epoch}`

        console.log(text);
    }
});

```

This example reads JSON data with `XMLHttpRequest`.

```js
let xhr = new XMLHttpRequest();

```

创建了`XMLHttpRequest`的新实例。

```js
xhr.open('GET', url, true);

```

`open()`方法将 GET 请求初始化为指定的 URL。 第三个参数`true`使其成为异步请求。

```js
xhr.responseType = 'json';

```

`responseType`值定义响应类型。

```js
xhr.onload = function() {

    var status = xhr.status;

    if (status == 200) {
        callback(null, xhr.response);
    } else {
        callback(status);
    }
};

```

在`onload()`方法内部，我们等待服务器的响应。

```js
xhr.send();

```

`send()`方法发送请求； 默认情况下，该请求是异步的。

```js
    let text = `Date: ${data.date}
Time: ${data.time}
Unix time: ${data.milliseconds_since_epoch}`

    console.log(text);

```

我们将日期，时间和 Unix 时间记录到控制台。

`index.html`

```js
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Consume XML request</title>

    <script src="fetch_time.js"></script>

</head>

<body>

</body>

</html>

```

该代码已加载到 HTML 页面。 在浏览器中加载页面之后，我们转到浏览器控制台，该控制台在开发人员工具中可用。

在本教程中，我们使用`XMLHttpRequest`在 JavaScript 中创建了 HTTP 请求。

您可能也对以下相关教程感兴趣： [JavaScript `queryselector`教程](/javascript/queryselector/)， [JavaScript Lodash 教程](/javascript/lodash/)， [Ramda 教程](/javascript/ramda/)或列出[所有 JavaScript 教程](/all/#js)。