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);