AJAXのお勉強

JSON形式のファイル読み込み＠AJAX

Json形式のファイル読み込み処理です。
JSONファイルは、以下の形式であり、
Evalにて受け取ることが可能です。

json.txt

{
    "User":[
        {"No":1,
        "Name":"名前1"},
        {"No":2,
        "Name":"名前2"}
    ]
}


xmlHttpReq.responseTextにて取得し、evalで展開します。
data.User[0].No な形で値を取得します。

json.html

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

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

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

    xmlHttpReq.onreadystatechange = function() {

        if (xmlHttpReq.readyState==4) {
            var jsonData = xmlHttpReq.responseText;
            var data = eval("(" +jsonData + ")");
            alert("No:" + data.User[0].No + "Name:" + data.User[0].Name);
        }
    }

    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('./json.txt')">
</body>
</html>

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