単純なJSON形式のデータを受信するAjax

このページでは、単純なJSON形式のデータを受信するAjaxについて紹介しています

eval関数を利用するとJSONデータをそのまま配列に代入できます。

サンプルプログラム

JSON形式のデータを受信して、idがaとbのタグのテキスト内容を変更するサンプルプログラムです。 (表示結果→sample.html)。

クライアント側(sample.html)


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
/**
 * 要求送信とデータ受信を行う関数
 */
function loadData() {
    // ローカル変数を宣言する。
    var xmlhttp;

    // 要求送信とデータ受信を行う。
    new Ajax.Request("SendData.php", {
        method:"post",
        onSuccess: function(xmlhttp) {
            chengeInnerText(xmlhttp);
        }
    });
}

/**
 * サーバ側の応答内容をidがaのタグに設定する関数
 */
function chengeInnerText(xmlhttp) {
    // 受信データを連想配列に格納する。
    var rcvdata = eval("(" + xmlhttp.responseText + ")");

    // $関数を利用してタグのテキスト内容を変更する。
    $("a").innerHTML=rcvdata.a;
    $("b").innerHTML=rcvdata.b;
}
</script>
</head>
<body>
<div id="a">ここに文字列aが出力します。</div>
<div id="b">ここに文字列bが出力します。</div>
<input type="button" value="ボタン" onclick="loadData()"/>
</body>
</html>

サーバ側(hello.php)


<?php
print "{a:\"コンテンツA\",b:\"コンテンツB\"}";
?>

戻る

Loarding…