# Week 13(12/4)：實用網頁設計技巧(3) ## 如何從網站中取得資料(以痞客幫為例) 做法： 1. 由[Pixel API](https://developer.pixnet.pro/#!/)指自己所需用法的API url寫法 2. 開啟剛剛得到的url，將其內容丟至[Json Parser Online](http://json.parser.online.fr/)以看清其結構 3. 使用[JSON Http Request](https://www.w3schools.com/js/js_json_http.asp)的寫法，完成網頁。 範例程式碼： ```html= <!DOCTYPE html> <html> <head> <script> var xmlhttp = new XMLHttpRequest(); var url = "https://emma.pixnet.cc/mainpage/blog/categories/hot/23?page=1&per_page=10&api_version=2&format=json"; xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var myArr = JSON.parse(xmlhttp.responseText); myFunction(myArr); } } xmlhttp.open("GET", url, true); xmlhttp.send(); function myFunction(arr) { var data = arr.articles; var out = ""; var i; for (i = 0; i < data.length; i++) { if ( data[i].thumb != "" ) out += '<img src="' + data[i].thumb + '" />'; if ( data[i].title != "" ) out += '<p><a href="' + data[i].link + '" target="_blank">' + data[i].title + '</a></p>'; out += '<p> </p>'; if ( data[i].tags.length != 0 ) { out += '<p>Tags: '; for (j = 0; j < data[i].tags.length; j++) { out += data[i].tags[j].tag + ', '; } out += '</p>'; } out += '<br /><br /><br />'; } document.getElementById("pixnet-stuff").innerHTML = out; } </script> </head> <body> <div id="pixnet-stuff"> </div> </body> </html> ``` 更多相關資料：https://nchu-mis-html5.blogspot.com/2012/10/api.html?m=1