nekobara カルゴルニア・ジョン: Ajaxサンプル

2005年07月13日

[技術] Ajaxサンプル

Ajaxを使ったウェブアプリのサンプルを作成してみました。参考にしたサイトはこちら。

サーバ側に山の情報として、「番号、名称、緯度、経度、標高」のデータを保持しておき、画面で番号を入力し、該当するデータがあった場合に名称、緯度、経度、標高を表示します。おまけとして、取得した緯度経度で国土地理院の地図データを表示するようにしました。




Ajax サンプル : 番号欄に3桁の数字を入力してください


番号: 
(100,101,102,110,111,112,120,121)
名称: 
緯度: 
経度: 
標高:

このアプリの技術的特長は、番号入力後にユーザがいちいち送信ボタンを押さなくても、番号欄の入力値が変わるたびにサーバ側にデータを取得しに行っていることです。

このようなことを可能にしているのが、JavaScriptにあるXmlHTTPRequestクラスです。JavaScriptは以下のようになります。

// 国土地理院の地図を表示する
function watchizu(){
  var ido   = document.getElementById('pointido').value;
  var keido = document.getElementById('pointkeido').value;
  var B = ido.replace(/\./i, "");
  var L = keido.replace(/\./i, "");
  var url = "http://watchizu.gsi.go.jp/cgi-bin/bl.cgi?b=" + B +"&l=" + L ;
  window.open(url,"");
}

// サーバ側のCGIを呼び出し
function getPointData() {
  var id = document.getElementById('pointid').value;
  http.open("GET", '/sample/point.cgi?id=' + escape(id), true);
  http.onreadystatechange = handleHttpResponse;
  http.send(null);
}

// サーバから返答を取得し、画面に表示
function handleHttpResponse() {
  if (http.readyState == 4) {
    results = http.responseText.split(",");
    document.getElementById('pointname').value = results[0];
    document.getElementById('pointido').value = results[1];
    document.getElementById('pointkeido').value = results[2];
    document.getElementById('pointheight').value = results[3];
  }
}

// サーバとのやり取りを制御するXmlHTTPRequestインスタンスを生成
function getHttpObject() {
  var xmlhttp;
  // プリコンパイル指定
  /*@cc_on
　@if (@_jscript_version >= 5)
    try {
      xmlhttp = new ActiveXObject("Msmxl2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }
  @else
    xmlhttp = false;
  @end @*/
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    try {
      xmlhttp = new XMLHttpRequest();
    } catch (e) {
      xmlhttp = false;
    }
  }
  return xmlhttp;
}
var http = getHttpObject();

サーバ側のCGI(point.cgi)は以下のようになる。

#!/usr/bin/perl -w
use strict;
use CGI;
my $q  = CGI->new;
my $id = $q->param('id');
my $hash = {
    100 => {name=>'甲武信ヶ岳', ido=>'35.5432', keido=>'138.4344', height=>'2475'},
    101 => {name=>'横尾山',     ido=>'35.5508', keido=>'138.3116', height=>'1818'},
    102 => {name=>'瑞牆山',     ido=>'35.5336', keido=>'138.3531', height=>'2230'},
    110 => {name=>'金峰山',     ido=>'35.5217', keido=>'138.3731', height=>'2599'},
    111 => {name=>'朝日岳',     ido=>'35.5228', keido=>'138.3833', height=>'2579'},
    112 => {name=>'国師ケ岳',   ido=>'35.5215', keido=>'138.4023', height=>'2592'},
    120 => {name=>'北奥千丈岳', ido=>'35.5207', keido=>'138.4015', height=>'2601'},
    121 => {name=>'乾徳山',     ido=>'35.4923', keido=>'138.4254', height=>'2031'}
};
print "Content-Type: text/xml\n\n";
if ($hash->{$id}) {
    my $data = $hash->{$id};
    print "$data->{name},$data->{ido},$data->{keido},$data->{height}";
}else{
    print '該当データなし,,,';
}

HTMLは以下のようになっている。

投稿者 nekobara : 2005年07月13日 22:39

トラックバック

このエントリーのトラックバックURL:
http://www.ishihara.ne.jp/mt/mt-tb.cgi/413

これがajaxですかぁ～
なんでもプログラミングしますね！
Gmailとかでつかわれている技術ですよね。
ブラウザでページを更新しなくても自動的に
情報が更新できる技術と認識しております。

投稿者 YSK後藤 : 2005年07月14日 18:19

>これがajaxですかぁ～

ajaxっていうのがおこがましいくらいにささやかなajaxですけどね（笑）

>なんでもプログラミングしますね！

JavaScriptは今回が初めてですので、実は結構くだらないところではまっています。

>Gmailとかでつかわれている技術ですよね。
>ブラウザでページを更新しなくても自動的に
>情報が更新できる技術と認識しております

そうそう世の中で、ブラウザはプアすぎるエンタープライズで使うなら、今後はリッチクライアントだなんて、騒いでいたら、GoogleがGmailで、既存技術の組み合わせだけでブラウザのGUIをリッチにできることを証明して、みんな目から鱗状態だったと思います。

投稿者 nekobara : 2005年07月14日 21:39

nekobara カルゴルニア・ジョン

2005年07月13日

[技術] Ajaxサンプル

トラックバック

コメント