- 追加された行はこの色です。
- 削除された行はこの色です。
*API5(Ajaxで外部PHPファイルを読み込み) [#p50fbf8c]
RIGHT:更新日&lastmod();
//<![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)
^^^^^^(A)
address = data1[0].getAttribute("address_x"); <==(7)
^^^^^^(C) ^^^^^^^^^(B)
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プロパティは現在のオブジェクトの状態を表し、次のような意味を持ちます。~
値 意味~
1 オブジェクトが初期化されていない~
2 オブジェクトがデータをロード中~
3 オブジェクトがデータをロード中だが、オブジェクトは操作可能~
4 データのロード完了~
(5)~
(6)開くXML(今回はPHPでXMLを作成)のタグを指定。~
変数A,Bは下のXMLファイルタグと変数に合わせる。また(C)の配列には同じタグの順番を意味する~
(7)data1[0]で最初の行の要素(address_x)を取得~
(8)すべて取得後に次のめ命令を実行。(9)で実際に読み出しが行われるがその結果はこの中でしか不明なので、(9)の実行後すぐに次の命令を行うと変数取得が行われていないこのあたりがAjax(非同期)のため?このような変数取得後次のシーケンスに入るようにする。
''read_test.php''~
読み込むXML(PHP)ファイル。data1[1]は2行目のデータになる。~
xmlを示すheader("Content-Type: text/xml");がJavascriptで扱う場合必要。~
また、(1)のようなXML宣言も必要?
<?php
header("Content-Type: text/xml");
print "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"; <==(1)
print "<readdata>\r\n";
print " <data1 address_x=\"三重県松阪市久保町\" p2=\"2ページ目だよ\" p3= \"3ページ目だよ\"/>\r\n";
^^(A) ^^^^(B)
print " <data1 address_x=\"三重県松阪市久保町\" p2=\"2−2ページ目だよ\" p3= \"2−3ページ目だよ\"/>\r\n";
print "</readdata>\r\n";
?>