AJAXのお勉強

Googleマップ GXmlHttpとGXmlでのパース処理＠AJAX

GXmlHttpにてXMLファイルを読み込み、
GXmlでパース処理を行います。

GXmlHttp.create()にて、GXmlHttpオブジェクトを生成します。
openメソッドでXMLファイルを指定します。
onreadystatechangeにて、処理を記述します。

GXml.parseにて、responseTextをパースします。
xmlからデータを取得し利用します。

以下では、下記のXmlファイルを読み込み、
マーカーを生成して、表示しています。

xmlファイル

<?xml version="1.0" encoding="utf-8" ?>
<result>
    <lat>35.691569</lat>
    <lng>139.770654</lng>
</result>


html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Googleマップ API GXmlHttpとGXmlでのパース処理</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=****" type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

function load() {
    if (GBrowserIsCompatible()) {

        var point = new GLatLng(35.681099,139.767084);

        var map = new GMap2(document.getElementById("map"));
        map.setCenter(point, 13);
        
        var marker = new GMarker(point);
        map.addOverlay(marker);

        //縮尺、移動コントロール追加
        map.addControl(new GSmallMapControl());
        
        var gXmlHttp = GXmlHttp.create();
        gXmlHttp.open("GET", "./test.xml");

        gXmlHttp.onreadystatechange = function() {
            if (gXmlHttp.readyState == 4) {
                //parse
                var xml = GXml.parse(gXmlHttp.responseText);
                
                //値の取り出し
                var lats = xml.getElementsByTagName("lat");
                var lngs = xml.getElementsByTagName("lng");
                var lat = lats[0].firstChild.nodeValue;
                var lng = lngs[0].firstChild.nodeValue;
                
                //GLatLng生成
                var point2 = new GLatLng(lat,lng);
                
                //マーカー生成
                var marker2 = new GMarker(point2);
                map.addOverlay(marker2);
            }
        }
        
        gXmlHttp.send(null);
    }
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 400px; height: 400px"></div>
</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.