プログラミングの勉強をしよう@Wiki
プログラミングの勉強をしよう@Wiki

AjaxでXMLデータで処理を行う

概要

AjaxをGETメソッドで送信する

クライアント

Html

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>テストサイト</title>
    <script type="text/javascript" src="./ajax_test.js"></script>
</head>
<body>
    <form name="fm">
        <input type="button" value="XML取得" onclick="asyncSend()" />
    </form>
    <br />
    <div id="result"></div>
</body>
</html>
 
 

javascript

// リクエストオブジェクトを取得
function getXHR(){
    var req;
 
    try{
        req = new XMLHttpRequest();
    }catch(e){
        try{
            req = new ActiveXObject('Msxml2.XMLHTTP');
        }catch(e){
            req = new ActiveXObject('Microsoft.XMLHTTP');
        }
    }
 
    // 返却
    return req;
}
 
// Ajax送信処理
function asyncSend(){
    // リクエストオブジェクトを取得
    var req = getXHR();
    // コールバック関数を定義
    req.onreadystatechange = function(){
 
        // オブジェクトエレメントを取得
        var result = document.getElementById('result');
 
        // 通信完了ステータスチェック
        if(req.readyState == 4){
            // リクエストステータスチェック
            if(req.status == 200){
                // XMLデータを取得
                var doc = req.responseXML;
                // エレメントを取得
                var nodes = doc.getElementsByTagName("Result");
 
                // データ数をチェック
                if(nodes.length <= 0){
                    result.innerHTML = "合致するデータはありませんでした。";
 
                }else{
                    // ULエレメントを作成
                    var ul = document.createElement('ul');
 
                    // ノードの数繰り返す
                    for(var i = 0;i < nodes.length;i++){
                        // nodeを取得
                        var node = nodes.item(i);
 
                        // 属性値を取得
                        var attriValue = getAttribute(node, 'date');
 
                        // 新規のLIエレメントを取得
                        var li = document.createElement('li');
 
                        // タイトルのテキストデータを取得
                        var name  = getNodeValue(node, 'name');
                        var key   = getNodeAttribute(node, 'name', 'type');
 
                        var dob   = getNodeValue(node, 'dob');
                        var price = getNodeValue(node, 'price');
 
                        var label = attriValue + "[" + name + "(" + key + ")" + ":" + dob + price + "]";
 
                        // テキストエレメントを取得
                        var title = document.createTextNode(label);
 
                        // LIエレメントへ追加
                        li.appendChild(title);
 
                        // ULエレメントへ追加
                        ul.appendChild(li);
                    }
 
                    // resultの値を変更
                    result.replaceChild(ul, result.firstChild);
                }
 
            }else{
                // 通信失敗
                result.innerHTML = "サーバエラーが発生しました。";
            }
        }else{
            // 通信完了前
            result.innerHTML = "通信中…";
        }
    }
 
    // サーバとの非同期通信を開始
    req.open('GET', 
             'http://localhost.testweb01/ajax_xml_test.php' ,
             true);
    req.send(null);
}
 
// 指定タグのテキスト値を取得する
function getNodeValue(current, name){
    var node = current.getElementsByTagName(name).item(0);
    return node.firstChild.nodeValue;
}
 
// 指定タグの属性値を取得
function getNodeAttribute(current, name, key){
    var node = current.getElementsByTagName(name).item(0);
    return node.getAttribute(key);
}
 
// 指定ノードの属性値を取得する
function getAttribute(current, name){
    var node = current.getAttribute(name);
    return node;
}
 
 

サーバ

php

<?php
header("Content-Type: application/xml; charset=utf-8");
echo <<< HTML_EOF
<?xml version="1.0" encoding="UTF-8"?>
<ResultSet>
  <Result date="20110101">
    <name type="A">Madness1</name>
    <dob>1 February 2004</dob>
    <price>150</price>
  </Result>
  <Result date="20110102">
    <name type="B">Madness2</name>
    <dob>1 February 2005</dob>
    <price>200</price>
  </Result>
  <Result date="20110103">
    <name type="C">Madness3</name>
    <dob>1 February 2006</dob>
    <price>170</price>
  </Result>
</ResultSet>
HTML_EOF;
?>
 
 

結果

初期表示

押下





「AjaxでXMLデータで処理を行う」をウィキ内検索
最終更新：2012年02月19日 21:02