使用 XMLHttpRequest 方法获取 JSON
const req = new XMLHttpRequest(); //对象——有许多用于传输数据的属性和方法
req.open("GET",'/json/cats.json',true);//open方法1.初始化请求（GET）2.请求数据的 API 的 URL 3.布尔值， true 成为异步请求
req.send();//方法——发送请求
req.onload = function(){
const json = JSON.parse(req.responseText);
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
};
JSON 是由 API 以bytes形式传输的，你的程序以string接受它(JSON)。
JSON能转换成为 JavaScript 对象，但默认情况下它们不是 JavaScript 对象。
JSON.parse方法解析字符串并构造它描述的 JavaScript 对象。
JavaScript XMLHttpRequest 对象具有许多用于传输数据的属性和方法。 首先，创建一个XMLHttpRequest对象实例，并保存在req变量里 。 然后，open 方法初始化一个请求——这个例子是从 API 请求数据，因此它是一个 GET 请求。 第二个参数 open 是你要从中请求数据的 API 的 URL。 第三个参数是一个布尔值， true 使其成为异步请求。 send 方法发送请求。 最后，onload 事件处理程序解析返回的数据并应用该 JSON.stringify 方法将JavaScript对象转换为字符串， 然后将此字符串作为消息文本插入。
用 JavaScript 的 fetch 方法获取 JSON
请求外部数据的另一个方法是使用 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 代码。
将 JSON 数据转换为 HTML
<script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick = function(){
const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json',true);
req.send();
req.onload = function(){
const json = JSON.parse(req.responseText);
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>";
});
// 在这行上面添加代码
document.getElementsByClassName('message')[0].innerHTML = html;
};
};
});
</script>
渲染数据源的图像
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
前几个挑战中表明，JSON 数组中的每个对象都包含一个 imageLink 键，其值为猫图像的 URL。
当你遍历这些对象的时候，你可以使用 imageLink 属性在 img 元素中显示此图像.
应该使用 altText 作为图片的 alt 属性值（alt 属性只能与 <input type="image"> 配合使用。它为图像输入规定替代文本，为用户由于某些原因无法查看图像时提供了备选的信息。）
预先过滤 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方法也用于将数据发布到服务器
<script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('sendMessage').onclick = function(){
const userName = document.getElementById('name').value;
const url = 'https://jsonplaceholder.typicode.com/posts';
// 在这行下面添加代码
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);//open 方法将对外部资源的给定 URL 的请求初始化为 POST，并使用 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);
// 在这行上面添加代码
};
});
</script>
open 方法将对外部资源的给定 URL 的请求初始化为 POST，并使用 true 布尔值使其变成异步的。
setRequestHeader 方法设置了 HTTP 请求标头的值，该标头包含有关发送人和请求的信息。 它必须在 open 方法之后、send 方法之前调用。 它的两个参数表示标头的内容类型和标头数据将被设置成什么值。
Content-Type（内容类型），一般是指网页中存在的 Content-Type，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件，这就是经常看到一些 PHP 网页点击的结果却是下载一个文件或一张图片的原因。
Content-Type 标头告诉客户端实际返回的内容的内容类型
onreadystatechange 事件监听器监听请求状态的更改。 readyState 为 4，表示操作已完成。status 为 201，表示请求成功。 文档的 HTML 可以更新。
xhr.response 服务器返回的数据
send 方法发送带有 body 值的请求，其中 userName 的值由用户在 input 字段中输入。
网友评论