前回はproxyを設置してAjaxにて通信を行った。これはAjaxからでは直接外部ドメインにアクセスできないという制約のためだ。
zipcloudはjsonp(json with padding)にも対応しているので今回はそれを利用してみる。
jsonpの技術を使うとproxyを設置することなくダイレクトに住所を取得することができる。
●エクリプス新規動的プロジェクトからzipjsonplessonを作成する。
●WebContentの直下にindex.htmlを以下のように作成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>郵便番号API|jsonp</title>
</head>
<body>
<label for="zip">郵便番号</label>
<input type="text" id="zip"><br>
<label for="address">住所</label>
<input type="text" id="address">
<script>
'use strict';
document.addEventListener("DOMContentLoaded",function(){
var address=document.getElementById("address");
var zip=document.getElementById("zip");
//コールバックメソッドをグローバルに定義
window.getZip=function(data){
address.value=data.results[0].address1+data.results[0].address2+data.results[0].address3;
}
zip.addEventListener("keyup",function(){
if(zip.value.length >= 7){
//動的にscript要素を作成
var script=document.createElement("script");
//callbackオプションにgetZipメソッドを指定
script.src="http://zipcloud.ibsnet.co.jp/api/search?zipcode=" + zip.value +"&callback=getZip";
//ボディに追加すると
//getZip(住所データ)
//という関数の呼び出しのあるスクリプトが読み込まれる
document.body.appendChild(script);
document.body.removeChild(script);
}
});
});
</script>
</body>
</html>
●スクリプトの読み込みならクロスドメインを実現できるためそれを利用して住所データを取得している。
便利だが、これは他のサーバーにあるスクリプトを実行しているということだ。信頼のおけるAPIでのみ利用することを推奨する。
コメント