簡単な Ajax の例

Wicket の Ajax ビヘビアに慣れてしまうと、JavaScript を書くのが億劫になってくる。
こんな簡単な、郵便番号で住所検索するものでも。。。

HTML こんなのがあったとする。

<form name="form" ..>

<input type="text" name="zip1" ..>
<input type="text" name="zip2" ..>

<select name="state" ..>

<input type="text" name="city" ..>

</form>

ボタンをなどを用意してクリックで以下のJavaScript を実行する
郵便番号渡して都道府県名、市町村番地を返してくれるように
用意したサイトに送信する

<script type="text/javascript">
function zipSearch(){
   var xmlHttp=null;
   try{
   // Firefox, Internet Explorer 7. Opera 8.0+, Safari
   xmlHttp = new XMLHttpRequest();
   }catch(e){
      // Internet Explorer 6.
      try{
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
      }catch(e){
         try{
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         }catch(e){
            return false;
         }
      }
   }
   xmlHttp.open("POST","ＵＲＬを指定！", true);
   xmlHttp.onreadystatechange=function(){
      if (xmlHttp.readyState==4){
         resText = xmlHttp.responseText;
         if (resText.length > 0){
            // 返された文字列が、都道府県名+":"+市区町村番地 だとする。
            ary = resText.split(":");
            document.form.state.value = ary[0];
            document.form.city.value = ary[1];
         }
         xmlHttp=null;
      }
   };
   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   xmlHttp.send("zip1="+document.form.zip1.value+"&zip2="+document.form.zip2.value);
}
</script>