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 =https://www.cnblogs.com/risejl/archive/2022/09/29/> {
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 srchttps://www.cnblogs.com/risejl/archive/2022/09/29/= '" + 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);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/509819.html
標籤：其他
上一篇：Optional原始碼決議與實踐