AJAXのお勉強

XMLファイルの読み込み＠AJAX

XMLファイルの読み込みを行います。

XMLHttpRequestのresponseXMLによりデータを取得します。
取得したデータを整形して表示します。
getElementsByTagName、childNodes、nodeValueを利用します。

usr.xml

<?xml version="1.0" standalone="yes"?>
<Usrs>
    <Usr>
        <Id>1</Id>
        <Name>氏名</Name>
    </Usr>
    <Usr>
        <Id>2</Id>
    <Name>氏名2</Name>
    </Usr>
</Usrs>


html

<html>
<head>
<title>XMLファイルの読み込み</title>
<script type="text/javascript">
<!--

function requestFile(fileName) {
    var xmlHttpReq = createHttpRequest()

    xmlHttpReq.open("GET", fileName ,true)

    xmlHttpReq.onreadystatechange = function() {

        if (xmlHttpReq.readyState==4) {
            var resultStr = "";
            var xmlData = xmlHttpReq.responseXML;
            
            var userData = xmlData.getElementsByTagName("Usr");
            var idData = xmlData.getElementsByTagName("Id");
            var nameData = xmlData.getElementsByTagName("Name");
            
            for (var i = 0 ;i<userData.length ;i++) {
                resultStr += idData[i].childNodes[0].nodeValue + nameData[i].childNodes[0].nodeValue + "<BR>";
            }
            
            document.getElementById("resultDiv").innerHTML = resultStr;
        }
    }

    xmlHttpReq.send(null)
}

function createHttpRequest() {
    var x = null;

    //IE7,Firefox, Safari
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    }

    //IE6
    try {
        return new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        // IE5
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {
            x = null;
        }
    }
    return x;
}

// -->
</script>
</head>
<body>
<input id="Button" type="button" value="実行" onclick="javascript:requestFile('./usr.xml')">

<div id="resultDiv">
</div>

</body>
</html>

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