プログラミング学習の記録 160.1 JavaScript 2 Webアプリケーションの基礎とJavaScriptを使ったプログラミングテクニック (CD-ROM付) (プログラミング学習シリーズ)の練習問題5.5

開発環境:Microsoft Visual Web Developer+Internet Explorer
Script言語:JavaScript

"JavaScript 2 Webアプリケーションの基礎とJavaScriptを使ったプログラミングテクニック (CD-ROM付) (プログラミング学習シリーズ)"のp.122の練習問題5.5を解いてみる。

5.5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sample 14</title>
</head>
<body>
<script type="text/javascript" src="prototype.js"></script>
<script language="javascript" type="text/javascript">
    function ajaxRequest(url) {
        new Ajax.Request(url, {
            method: "get",
            onLoaded: Loaded,
            onFailure: Failure
        });
    }

// XML Filsの2個のname tagの値を取得して表示
    function Loaded(o) {
        var xmldoc = o.responseXML;
        if (xmldoc == null) {
            Insert("xmldocがありません");
        } else {
            var elm0 = xmldoc.getElementsByTagName("city")[0];
            var elm1 = xmldoc.getElementsByTagName("city")[1];
            var text0 = elm0.firstChild;
            var text1 = elm1.firstChild;
            Insert(text0.data);
            Insert(text1.data);
        }
    }

function Failure() {
        Insert("通信に失敗しました");
    }

// id=d0のtagに段落を追加
    function Insert(text) {
        var d0 = document.getElementById("d0");
        var p = document.createElement("p");
        p.innerHTML = text;
        d0.appendChild(p);
    }</script>
<p>protootype.jsのAjax.Requestを利用して、Sample.xml Fileに含まれる2個のcityを表示してみる。</p>
<input type="button" value="Click!" onclick="ajaxRequest('Sample.xml')" />
<p>実行結果</p>
<div id="d0"></div>
</body>
</html>

prototype.jsのAjax.Requestを利用して、KMIに置かれているSample.xmlの2個のcityを取得して表示してみる。

保管場所: Sample 14