API5(Ajaxで外部PHPファイルを読み込み) †

更新日2007-06-28 (木) 17:14:14
//<![CDATA[
      var address;

//GXmlHttp TEST
      var request = GXmlHttp.create();  <==(1)
      request.open("GET", "read_test.php", true);<==(2)
      request.onreadystatechange = function() { <==(3)
        if (request.readyState == 4) { <==(4)
          var xmlDoc = request.responseXML;  <==(5)
          var data1 = xmlDoc.documentElement.getElementsByTagName("data1");  <==(6)
          address = data1[0].getAttribute("address_x"); <==(7)
        load();   <==(8)
        }
      }
      request.send(null);  <==(9)

function load(){
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        // GClientGeocoderを初期化
        geocoder = new GClientGeocoder();

        geocoder.getLatLng(
                address,
                function(point){
                        if (!point) {
                                alert("Address not found" + address);
                        }else{
                                map.setCenter(point, 13);
                                var marker = new GMarker(point);
                                map.addOverlay(marker);
                        }
                }
        );
}

GXmlHttpを使うとHTTPによるコネクションを確立してデータを取得できます。
(1)では HTTPのリクエストはrequest.open()　[ var request = GXmlHttp.create()です。] を使って設定。
(2)ではrequest.open()で開くファイルを指定する。
(3)GXmlHttpではステートが変わる毎に呼び出されるコールバックをonreadystatechangeに登録する方式で行う
(4)戻り値を評価している戻り値は
readyStateプロパティは現在のオブジェクトの状態を表し、次のような意味を持ちます。
値 意味
１ オブジェクトが初期化されていない
２ オブジェクトがデータをロード中
３ オブジェクトがデータをロード中だが、オブジェクトは操作可能
４ データのロード完了
(5)
(6)開くXML(今回はPHPでXMLを作成)のタグを指定。
(7)data1[0]で最初の行の要素(address_x)を取得
(8)すべて取得後に次のめ命令を実行。(9)で実際に読み出しが行われるがその結果はこの中でしか不明なので、(9)の実行後すぐに次の命令を行うと変数取得が行われていないこのあたりがAjax(非同期）のため？このような変数取得後次のシーケンスに入るようにする。

read_test.php

読み込むXML(PHP)ファイル。data1[1]は2行目のデータになる。

<?php

header("Content-Type: text/xml");

print "<readdata>\r\n";
print "  <data1 address_x=\"三重県松阪市久保町\" p2=\"２ページ目だよ\" p3= \"３ページ目だよ\"/>\r\n";
print "  <data1 address_x=\"三重県松阪市久保町\" p2=\"２−２ページ目だよ\" p3= \"２−３ページ目だよ\"/>\r\n";
print "</readdata>\r\n";

?>
トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS