JSON APIs and Ajax
1.
通過jQuery來綁定點擊事件。
函數 $(document).ready()這個函數中的代碼只會在我們的頁面加載時候運行一次，確保執行js之前頁面所有的dom已經準備就緒。
在$(document).ready()函數中增加一個click事件。代碼如下：
$("#getMessage").on("click", function(){
});
2.
當你需要根據服務器返回的數據來動態改變頁面的時候，應用程序接口(API)就派上用場了。
記住，API——應用程序接口(Application Programming Interface)是計算機之間相互交流溝通的工具。
許多網站的應用程序接口(API)都是通過一種稱為JSON格式的數據來傳輸的，JSON 是 JavaScript Object Notation的簡寫。
其實如果你曾經創建過JS對象的話，你就已經使用了這種數據格式，JSON是一種非常簡潔的數據格式。
它通常表現為了兩種形式，一種為單個對象，一種為多個對象
單個對象類似於：{name:‘蓋倫‘,advantage:‘單挑無敵‘}
多個對象類似於：[{name:‘蓋倫‘,advantage:‘單挑無敵‘},{name:‘諾克‘,advantage:‘上單霸主‘}]
每個對象屬性和屬性值的組合就是我們經常聽到的"鍵值對(key-value pairs)"。
讓我們從之前的貓圖API拿取數據吧。
你應該在你的點擊事件中加入如下的代碼：
$.getJSON("/json/cats.json", function(json) {
$(".message").html(JSON.stringify(json));
});
顯示結果：[{"id":0,"imageLink":"/images/funny-cat.jpg","codeNames":["Juggernaut","Mrs. Wallace","Buttercup"]},{"id":1,"imageLink":"/images/grumpy-cat.jpg","codeNames":["Oscar","Scrooge","Tyrion"]},{"id":2,"imageLink":"/images/mischievous-cat.jpg","codeNames":["The Doctor","Loki","Joker"]}]
3.
已經從JSON API中獲得了數據，現在把它們展現到我們的HTML頁面中吧。
這裏，我們使用.forEach()函數來循環遍歷JSON數據寫到htmll變量中。
首先我們定義一個HTML變量，var html = ""; 。
然後，我們使用.forEach()函數來循環遍歷JSON數據寫到html變量中，最後把html變量顯示到我們的頁面中。
整個過程的代碼如下：
json.forEach(function(val) {
var keys = Object.keys(val);
html += "<div class = ‘cat‘>";
keys.forEach(function(key) {
html += "<b>" + key + "</b>: " + val[key] + "<br>";
});
html += "</div><br>";
});
顯示結果：
id:0
imageLink:/images/funny-cat.jpg
codeNames:Juggernaut,Mrs. Wallace,Buttercup
id:1
imageLink:/images/grumpy-cat.jpg
codeNames:Oscar,Scrooge,Tyrion
id:2
imageLink:/images/mischievous-cat.jpg
codeNames:The Doctor,Loki,Joker
4.
從上節課獲得的JSON數組中，每個對象都包含了一個以imageLink為鍵(key)，以貓的圖片的url為值(value)的鍵值對。
當我們在遍歷這些對象時，我們用imageLink的屬性來顯示img元素的圖片。
代碼如下：
html += "<img src = ‘" + val.imageLink + "‘>";
5.
如果我們不想把所有從JSON API中得到的圖片都展現出來，我們可以在遍歷之前做一次過濾。
我們把其中 "id" 鍵的值為1的圖片過濾掉。
代碼如下:
json = json.filter(function(val) {
return (val.id !== 1);
});
6.
我們還可以通過瀏覽器navigator獲得我們當前所在的位置geolocation。
位置的信息包括經度longitude和緯度latitude。
你將會看到一個是否允許獲取當前位置的提示。不管你選擇允許或者禁止，只要代碼正確，這關就能過了。
如果你選擇允許，你將會看到右側手機輸出的文字為你當前所在位置的經緯度。
代碼如下：
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
});
}
JSON APIs and Ajax