JSONなど - Mae向きなブログ

同僚の先生方とJavaScriptについて学習しているので，今日は，JavaScriptに取り組んでみました。
『JavaScriptプログラミング入門第2版』という本で学習しているのですが，その中にJSONについて書かれていたので，理解を深めるために，サンプルを作ってみました。

http://zip.ricollab.jp/api.html#zip_resource_json_representation
を参考にしました。

JSON/JSONP表現って便利。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
<title>json_sample2</title>
<script type="text/javascript">
function searchResult(response) {
    var disp = response.zipcode;
    disp += "<br>" + response.address.prefecture + 
                     response.address.city + 
                     response.address.town;
    disp += "<br>" + response.yomi.prefecture +
                     response.yomi.city +
                     response.yomi.town;
    document.getElementById("result").innerHTML = disp;
}

function search(zipcode) {
    var url = "http://zip.ricollab.jp/" + 
               zipcode + ".json?callback=searchResult";
    var ele = document.createElement("script");
    ele.src = url
    document.body.appendChild(ele);
}
</script>
</head>
<body>

<form>
〒<input name="zipcode">
　<input type="button" value="Search!!" onclick="search(this.form.zipcode.value)">
</form>

<p id="result"></p>
</body>
</html>