---
# System prepended metadata

title: Week 13(12/4)

---

# 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