JSON APIs and Ajax

onclick

希望代码仅在页面完成加载后执行。将名为

DOMContentLoaded

的 JavaScript 事件附加到 document 中。以下是实现的代码：

 document.addEventListener('DOMContentLoaded', function() {



});

在

DOMContentLoaded

函数内部添加事件处理方法。可以添加

onclick

事件处理器，当用户点击 id 为

getMessage

的元素时会触发事件。添加以下代码：

 document.getElementById('getMessage').onclick = function(){};

 <script>

  document.addEventListener('DOMContentLoaded', function(){document.getElementById("getMessage").onclick = function() {}

  });

</script>

单击事件改变文本 click event

当点击事件发生时，使用 JavaScript 更新 HTML 元素。

例如，当用户点击

Get Message

按钮时，它将改变 class 为

message

的元素的文本为

Here is the message

。

通过在点击事件内添加以下代码实现：

 document.getElementsByClassName('message')[0].textContent="Here is the message";

使用 XMLHttpRequest 方法获取 JSON

可以从外部来源请求数据。这就是 API 发挥作用的地方。

API（或叫应用程序编程接口）是计算机用来互相通信的工具。通过 AJAX 技术从 API 获得的数据来更新 HTML。

大部分 web APIs 以 JSON 格式传输数据。 JSON 是 JavaScript Object Notation 的简写。

JSON 语法与 JavaScript 对象字面符号非常相似。 JSON 具有对象属性以及其当前值，夹在

和

之间。

这些属性及其值通常称为 "键值对"。

但是，JSON 是由 API 以

bytes

形式传输的，程序以

string

接收它。它们能转换成为 JavaScript 对象，但默认情况下它们不是 JavaScript 对象。

JSON.parse

方法解析字符串并构造它描述的 JavaScript 对象。

从 freeCodeCamp 的 Cat Photo API 请求 JSON。以下是在点击事件中添加的代码：

 const req = new XMLHttpRequest();

req.open("GET",'/json/cats.json',true);

req.send();

req.onload = function(){

  const json = JSON.parse(req.responseText);

  document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);

};

这里介绍每行代码的作用。 JavaScript

XMLHttpRequest

对象具有许多用于传输数据的属性和方法。首先，创建一个

XMLHttpRequest

对象实例，并保存在

req

变量里。然后，

open

方法初始化一个请求——这个例子是从 API 请求数据，因此它是一个

GET

请求。第二个参数

open

是要从中请求数据的 API 的 URL。第三个参数是一个布尔值，

true

使其成为异步请求。

send

方法发送请求。最后，

onload

事件处理程序解析返回的数据并应用该

JSON.stringify

方法将JavaScript对象转换为字符串，然后将此字符串作为消息文本插入

fetch

请求外部数据的另一个方法是使用 JavaScript 的

fetch()

方法。它的作用和

XMLHttpRequest

一样，但是它的语法更容易理解。

下面是使用 GET 请求

/json/cats.json

数据的例子。

 fetch('/json/cats.json')

    .then(response => response.json())

    .then(data => {

        document.getElementById('message').innerHTML = JSON.stringify(data);

    })

逐行解释一下代码。

第一行是发起请求。

fetch(URL)

向指定的 URL 发起

GET

请求。这个方法返回一个 Promise。

当 Promise 返回后，如果请求成功，会执行

then

方法，该方法把响应转换为 JSON 格式。

then

方法返回的也是 Promise，会被下一个

then

方法捕获。第二个

then

方法传入的参数就是最终的 JSON 对象。

接着，使用

document.getElementById()

选择将要接收数据的元素。然后插入请求返回的 JSON 对象创建的字符串修改元素的 HTML 代码

访问来自 API 的 JSON 数据

回忆一下 JavaScript 中的一些符号：

[ ] -> 方括号表示数组
{ } -> 大括号表示对象
" " -> 双引号表示字符串，它们还用于表示 JSON 中的键名

理解 API 返回数据的结构是必需的，它将影响你如何获取你所需的值。

[{"id":0,"imageLink":"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg","altText":"A white cat wearing a green, helmet shaped melon on its head. ","codeNames":["Juggernaut","Mrs. Wallace","Buttercup"]},{"id":1,"imageLink":"https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg","altText":"A white cat with blue eyes, looking very grumpy. ","codeNames":["Oscar","Scrooge","Tyrion"]},{"id":2,"imageLink":"https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg","altText":"A ginger cat with one eye closed and mouth in a grin-like expression. Looking very mischievous. ","codeNames":["The Doctor","Loki","Joker"]}]

在 JSON 数据中的第一个和最后一个字符是中括号

[ ]

，这意味着返回的数据是一个数组。 JSON 数据中的第二个符号是一个大括号

，这意味着是一个对象。再仔细看，你会发现有三个独立的对象。这个 JSON 数据是一个包含三个对象的数组。在第一个对象中有一个有趣的 "键值对" 它是

"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]

。

codeNames

是键，它的值是一个包含三个字符串的数组。对象数组以及数组作为键可以作为值。

记住如何访问数组和对象中的数据。数组使用括号表示法来访问项目的特定索引，对象使用括号或点表示法来访问给定属性的值。这个例子打印第一张 cat photo 的

altText

属性——请注意，编辑器中解析的 JSON 数据被保存在名为

json

的变量中：

 console.log(json[0].altText);

控制台将显示字符串

A white cat wearing a green helmet shaped melon on its head.

。

将 JSON 转化为 HTML

从 JSON API 获取了数据，可以在 HTML 中显示它们。

既然 cat photo 对象都保存在数组里，使用

forEach

方法来遍历它们。当取到每个对象时，可以修改 HTML 元素。

首先，通过

let html = "";

声明一个 html 变量。

接着，遍历 JSON，将用

strong

标签包裹的键名和后面跟着值的 html 元素添加给变量。当循环结束后渲染它。这是执行此操作的代码：

 let html = "";

json.forEach(function(val) {

  const keys = Object.keys(val);

  html += "<div class = 'cat'>";

  keys.forEach(function(key) {

    html += "<strong>" + key + "</strong>: " + val[key] + "<br>";

  });

  html += "</div><br>";

});

注意： 使用

textContent

方法。用

innerHTML

网站容易遭受跨站脚本攻击。

渲染数据源的图像

JSON 数组中的每个对象都包含一个

imageLink

键，其值为猫图像的 URL。

当遍历这些对象的时候，使用

imageLink

属性在

img

元素中显示此图像。

这是执行此操作的代码：

 html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";

预先过滤 JSON

鉴于 JSON 数据存储在数组中，使用

filter

方法过滤掉

id

键值为

的 cat。

这是执行此操作的代码：

 json = json.filter(function(val) {

  return (val.id !== 1);

});

根据地理位置数据找到用户的 GPS 坐标

访问你用户当前的地理位置。每个浏览器都有内置的导航器。

导航器会获取用户当前的经度和纬度。

这是执行此操作的代码：

 if (navigator.geolocation){

  navigator.geolocation.getCurrentPosition(function(position) {

    document.getElementById('data').innerHTML="latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude;

  });

}

使用 XMLHttpRequest 发送数据

此外，可以将数据发送到外部资源，只要该资源支持 AJAX 请求并且知道 URL。JavaScript 的

XMLHttpRequest

方法也用于将数据发布到服务器。这是一个示例：

 const xhr = new XMLHttpRequest();

xhr.open('POST', url, true);

xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

xhr.onreadystatechange = function () {

  if (xhr.readyState === 4 && xhr.status === 201){

    const serverResponse = JSON.parse(xhr.response);

    document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;

  }

};

const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });

xhr.send(body);

JSON APIs and Ajax

JSON APIs and Ajax

onclick

单击事件改变文本 click event

使用 XMLHttpRequest 方法获取 JSON

fetch

访问来自 API 的 JSON 数据

将 JSON 转化为 HTML

渲染数据源的图像

预先过滤 JSON

根据地理位置数据找到用户的 GPS 坐标

使用 XMLHttpRequest 发送数据

添加新评论

最新文章

分类

最近回复

归档

其它