郵便番号検索APIを使ってみた。

Javascript

今回使ったのはグルーブテクノロジー株式会社さんが提供してくれている郵便番号検索APIです。

すでにサンプルソースを用意してくれているのだけれど、表示方法を変えてみました。

ちょっと変更しただけといっても Javascript あんまり詳しくないのでどこかおかしいかも…。
でもまー Javascript 経験値を12くらいは得たなっ！！

XMLHTTPRequest を使ってないけど非同期になってるし（Javascriptだけだから当たり前か）、使わないのも Ajax っていうのかなぁ。

function zipsearch()
{
  var zipcode = document.getElementById( 'zipcode1' ).value + document.getElementById( 'zipcode2' ).value;
  if( ! check_zipcode( zipcode ) )
     return false;
  var target = document.createElement('script');
  target.charset = 'utf-8';
  target.src = 'http://groovetechnology.co.jp/ZipSearchService/v1/zipsearch?zipcode='+encodeURIComponent( zipcode )+'&callback=callback1';
  document.body.appendChild(target);
}

function set_address( obj )
{
  var state = document.getElementById( 'state' );
  var city = document.getElementById( 'city' );
  var town = document.getElementById( 'town' );
  
  if( obj.zipcode.match( /[0-9]{5}00$/ ) )
  {
    state.value = obj.prefecture;
    city.value = obj.city;
    town.value = obj.town;
  }
  else
  {
    state.value = obj.prefecture;
    if( obj.street ) state.value += obj.street ;
    city.value = obj.city;
    if( obj.street ) city.value += obj.street ;
    town.value = obj.town;
    if( obj.street ) town.value += obj.street ;
  }
}

function check_zipcode( zipcode )
{
  if( ! zipcode ) return false;
  if( 0 == zipcode.length ) return false;
  if( ! zipcode.match( /^[0-9]{3}[0-9]{4}$/ ) )
  {
    return false;
  }
  
  return true;
}

function callback1( data )
{
  zip_data = data;
  for (var i in zip_data.zipcode )
  {
    set_address( zip_data.zipcode[i] );
  }
  for (var i in zip_data.office )
  {
    set_address( zip_data.office[i] );
  }
}

<html>
<head>
<span style="color:#FF0000;"><script src="zip_support.js"></script></span>
</head>
<body>
<form method="POST" action="">
<table class="input">
 <tr>
  <th>郵便番号</th>
  <td>
    <input type="text" <span style="color:#FF0000;">id="zipcode1"</span> maxlength="8" />
    - <input type="text" <span style="color:#FF0000;">id="zipcode2"</span> maxlength="8" />
    <span style="color:#FF0000;"><input type="button" onclick="zipsearch();return false;" value="住所検索" /></span>
  </td>
 </tr>
 <tr>
  <th>都道府県</th>
  <td><input type="text" <span style="color:#FF0000;">id="state"</span> maxlength="100" /></td>
 </tr>
 <tr>
  <th>市区町村</th>
  <td><input type="text" <span style="color:#FF0000;">id="city"</span> maxlength="100" /></td>
 </tr>
 <tr>
  <th>町域名</th>
  <td><input type="text" <span style="color:#FF0000;">id="town"</span> maxlength="100" /></td>
 </tr>
</table>
</form>
   <table width="100%">
    <tr>
     <td width="50%" align="right">
      <a href="http://groovetechnology.co.jp/webservice/">
      <img src="http://groovetechnology.co.jp/images/gt_websrv_w.gif" alt="グルーブテクノロジー Web サービス" width="125" height="17" /></a>
     </td>
    </tr>
   </table>
</body>
</html>

投稿した５分後に追記ｗ
XMLHTTPRequest はサーバーと非同期に通信するものだから Javascriptだけで組んでるので使わないのは当たり前！

wikipediaによれば、基本的には XMLHTTPRequest を使うのが Ajax だけど、使わなくても効果的に使ってあれば Ajax と捉える傾向だとか何とか。

IT業界は専門用語が多いし、どこからどこまで！？っていうのもあるしめんどーだ。