AJAXでリッチに郵便番号から住所を取得

まぁ、こんなもん、ググればなんぼでも出てくるわけやけど
とりあえず初めて自分でAJAXなもん書いたので、さっそく
オープンしてみるてすと。
・・・と言いつつ大半は、どっかから取ってきたわけやけど。
見たこと無いphp関数とか、変数名は「多分こんな動きや意味やろなー」
って、各名前から脳内変換してください
(環境は多分 xhtml × 素PHP × 全UTF-8)
まずhtml
■customer_input.html
<!--header -->
<script type="text/javascript" src="<?php echo(JS_PATH) ?>/ajax_c.js"></script>
<script type="text/javascript" src="<?php echo(JS_PATH) ?>/get_address.js"></script>
<!--body -->
<table summary="会員登録">
<tbody>
  <tr> <th>郵便番号</th>
   <td><input type="text" name="postcode" id="postcode" value="<?php echo(html_encode($postcode)) ?>" onBlur="get_address_func(this.value)" /></td>
  </tr>
  <tr> <th>住所</th>
   <td><input type="text" name="address" id="address" value="<?php echo(html_encode($address)) ?>" /></td>
  </tr>
</tbody>
</table>

・・・で js 2ファイル
■ajax_c.js
//XMLHttpRequestオブジェクト生成
var xmlHttp = createXmlHttpRequest();
//ブラウザ別にXMLHttpRequestオブジェクトを生成
function createXmlHttpRequest(){
  var xmlhttp;
  //IEかどうか判定
  /*@cc_on
  @if (@_jscript_version >= 5)
    try{
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
      try{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }catch(ex){
        xmlhttp = false;
      }
    }
  @else
    xmlhttp = false;
  @end @*/
  //IE以外
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined'){
    try{
      xmlhttp = new XMLHttpRequest();
      xmlhttp.overrideMimeType("text/xml");
    }catch(e){
      xmlhttp = false;
    }
  }
  return xmlhttp;
}

■get_address.js

//テキストフィールドのイベントで実行される処理。リクエストを生成し、レスポンスを取得
function get_address_func(postcode){
  //リクエストをオープンする。単に設定がおこなわれるだけで実際の送受信はまだ発生しない
  var url = '/ajax/get_address.php?postcode='+postcode;
  xmlHttp.open('GET', url, true);
  //バックエンドプログラムからレスポンスを受信し処理を行うためのコールバック関数を用意しておく
  xmlHttp.onreadystatechange = handleHttpEvent;
  //リクエストを送信
  xmlHttp.send(null);
}
//HTTPレスポンスデータを処理し、XMLを解析しフォームに値をはめこむコールバック関数
function handleHttpEvent(){
  //応答が帰ってきた(xmlHttp.readyState == 4)場合で、サーバ処理が成功(xmlHttp.status == 200)した場合
  if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
    // サーバからの応答をXMLDocumentオブジェクトとして取得
    // ここからはXML解析とフォームにデータをはめ込む処理
    var xmlDoc = xmlHttp.responseXML;
    if (xmlDoc.documentElement){
      //XMLをパースする
      var stat = xmlDoc.getElementsByTagName("stat").item(0).firstChild;
      //バックエンドから返ってきたステータスがokの場合
      if (stat.data == "ok"){
        var adderss_value = xmlDoc.getElementsByTagName("address_value").item(0).firstChild;
        //各データをテキストボックスにあてはめる
        document.getElementById('address').value = address_value.data;
        //返ってきたステータスがngの場合
      }else if(stat.data == "ng"){
        //
      }
    }
  }
}

・・・最後に、参考程度に取得php
■get_address.php

<?php
/*
 * 住所情報を取得する(AJAX用)
 * 
 * @regist 2009/06/19
 * @modify 
 * @author son
 * @author 
 *
 */
require_once( "設定ファイル他 読み込み" );
$postcode = $_GET['postcode'];
//ハイフン削除
$postcode = str_replace('-', '', $postcode);
//英数字を半角に
$postcode = mb_convert_kana($postcode,"a","UTF-8");
//半角数字のみかチェック(自作関数、正規表現チェック)
if( num_check($postcode) === true ){
  //データ取得(自作関数、DBに郵便番号を投げて住所を取得する。取得失敗の場合はfalseを返す)
  $address_data = db_seect_one('postcode','address',array("postcode = '{$postcode}'")) 
}else{
  $address_data = false;
}
if( $address_data === false ){
  header("Content-type:text/xml;charset=utf-8");
  echo ("<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n"
    ."<address_data>\n"
    ."<stat>ng</stat>\n"
    ."</address_data>\n");
}else{
  $address_value = html_encode($address_data['address']);
  header("Content-type:text/xml;charset=utf-8");
  echo ("<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n"
    ."<address_data>\n"
    ."<stat>ok</stat>\n"
    ."<address_value>$adress_value</address_value>\n"
    ."</address_data>\n");
}
?>

うん、 「初めてのAJAX」なので、各所に怪しいけど。
うを、インデント飛んでるし、色が無いと見難いな。
TODO:そのうち修正
→2009/06/21、応急処置的にインデントだけつけてみた。
めんどくさい。
IT関係の有名人は皆はてな使ってる理由のひとつが
なんとなくわかった気がした

0 件のコメント :

コメントを投稿