关于json:JSON-APIs-and-Ajax

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 键值为 1 的 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);