Skip to content

Z
zetcode-zh

OpenDocCN / zetcode-zh
10 个月 前同步成功

通知 2
Star 157
Fork 40
Z
zetcode-zh

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
85.md 5.5 KB
Newer Older
W
2019-11-07 21:14:30  
wizardforcel 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 
# 从 JavaScript 中的 URL 读取 JSON

> 原文： [http://zetcode.com/articles/javascriptjsonurl/](http://zetcode.com/articles/javascriptjsonurl/)

在 JavaScript 教程的“从 URL 读取 JSON”中，我们从提供的 URL 中读取 JSON 格式的数据。 我们使用 JQuery，Fetch API 和 XMLHttpRequest。

统一资源定位符（URL）是对 Web 资源的引用，该资源指定了它在计算机网络上的位置以及用于检索它的机制。 网络资源是可以通过网络获取的任何数据，例如 HTML 文档，PDF 文件，PNG 图像，JSON 数据或纯文本。

JSON（JavaScript 对象表示法）是一种轻量级的数据交换格式。 人类很容易读写，机器也很容易解析和生成。 JSON 的官方 Internet 媒体类型为`application/json`。 JSON 文件扩展名是`.json`。

在我们的示例中，我们使用`http://time.jsontest.com`中的 JSON 数据。

```
{
   "time": "11:27:26 AM",
   "milliseconds_since_epoch": 1494934046126,
   "date": "05-16-2017"
}

```

GET 请求返回此 JSON 字符串。

## 使用 JQuery 读取 JSON

jQuery 是一个 JavaScript 库，用于处理 DOM。 使用 jQuery，我们可以查找，选择，遍历和操作 HTML 文档的各个部分。

JQuery `$.getJSON()`方法使用 GET HTTP 请求从服务器加载 JSON 编码的数据。

```
jQuery.getJSON( url [, data ] [, success ] )

```

这是方法签名。 `url`参数是一个字符串，其中包含将请求发送到的 URL。 `data`是随请求发送到服务器的普通对象或字符串。 `success`是一个回调函数，如果请求成功，则执行该函数。

```
$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

```

`$.getJSON()`是上述调用的简写。

`js_read_json_url.html`

```
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript - read JSON from URL</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

<body>
    <div class="mypanel"></div>

    <script>
    $.getJSON('http://time.jsontest.com', function(data) {

        var text = `Date: ${data.date}<br>
                    Time: ${data.time}<br>
                    Unix time: ${data.milliseconds_since_epoch}`

        $(".mypanel").html(text);
    });
    </script>

</body>
</html>

```

在示例中，我们从`http://time.jsontest.com`读取 JSON 数据。 返回的对象具有三个属性：日期，时间和 unix 纪元。

```
var text = `Date: ${data.date}<br>
            Time: ${data.time}<br>
            Unix time: ${data.milliseconds_since_epoch}`

```

我们使用 JavaScript 模板字符串构建消息。

```
$(".mypanel").html(text);

```

使用 JQuery 的`html()`方法，我们将文本附加到`div`标签。

![Reading JSON from URL with JQuery](img/0b5ffc7fb8d43910551afbeb6072ae53.jpg)

Figure: Reading JSON from URL with JQuery

在图中，我们可以看到当前日期，时间和 Unix 时间。

## 使用 Fetch API 读取 JSON

提取 API 是用于提取资源的接口。 它类似于`XMLHttpRequest`，但其 API 提供了更强大和灵活的功能集。

```
<script>
fetch('http://time.jsontest.com')
    .then(res => res.json())
    .then((out) => {
        console.log('Output: ', out);
}).catch(err => console.error(err));
</script>

```

该示例使用 Fetch API 读取 JSON 数据，并将返回的数据打印到控制台。 要查看输出，我们需要激活浏览器的开发者控制台。

`fetch()`方法采用一个强制性参数，即我们要获取的资源的路径。 它返回一个解析为请求响应的 promise。

## 使用 XMLHttpRequest 读取 JSON

XMLHttpRequest API 提供了用于在客户端和服务器之间传输数据的客户端功能。 它提供了一种从 URL 检索数据的简便方法，而无需刷新整个页面。 结果，网页必须仅更新页面的一部分而不破坏用户正在做的事情。 `XMLHttpRequest`在 AJAX 编程中大量使用。

```
<script>

var getJSON = function(url, callback) {

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

    xhr.onload = function() {

        var status = xhr.status;

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

    xhr.send();
};

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

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

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

        console.log(text);
    }
});

</script>

```

本示例使用`XMLHttpRequest`读取 JSON 数据。

```
var xhr = new XMLHttpRequest();

```

创建了`XMLHttpRequest`的新实例。

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

```

`open()`方法初始化一个请求。

```
xhr.responseType = 'json';

```

`responseType`值定义响应类型。

```
xhr.onload = function() {

    var status = xhr.status;

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

```

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

```
xhr.send();

```

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

在本教程中，我们已经使用 JQuery，Fetch API 和 XMLHttpRequest 在 JavaScript 中读取了 JSON 数据。

您可能也对以下相关教程感兴趣： [JQuery 教程](/web/jquery/)， [JavaScript Mustache 教程](/javascript/mustache/)， [JavaScript 中的 JSON 数组循环](/javascript/jsonforeach/)， [jQuery Autocomplete 教程](/articles/jqueryautocomplete/)或[使用 jQuery DatePicker](/articles/jquerydatepicker/) 。