読者です 読者をやめる 読者になる 読者になる

Mae向きなブログ

Mae向きな日記のブログ版。ようやくこちらに移行してきました。

JSONなど

同僚の先生方と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>