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

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


概要

AjaxをJsonデータの結果を取得して制御を行う

クライアント

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){
                // テキストデータを取得
                var data = eval('(' + req.responseText + ')');
 
                // 要素を取得
                var nodes = data.Result;
 
                var count = data.count;
 
                // データ数をチェック
                if(nodes.length <= 0){
                    result.innerHTML = "合致するデータはありませんでした。";
 
                }else{
                    // ULエレメントを作成
                    var ul = document.createElement('ul');
 
                    // ノードの数繰り返す
                    for(var i = 0;i < nodes.length;i++){
 
                        // 新規のLIエレメントを取得
                        var li = document.createElement('li');
 
                        // タイトルのテキストデータを取得
                        var name  = nodes[i].name;
                        var dob   = nodes[i].dob;
                        var price = nodes[i].price;
 
                        var label = (i+1) + "/" + count + ":[" + name + ":" + 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_json_test.php' ,
             true);
    req.send(null);
}
 
 

サーバ

php

<?php
    // 連想配列データを用意
    $list = array(
        "count" => "3",
        "Result" => array(
            array(
                "name"  => "hoge1",
                "dob"   => "20",
                "price" => "19770203",
            ),
            array(
                "name"  => "hoge2",
                "dob"   => "21",
                "price" => "19770505",
            ),
            array(
                "name"  => "hoge3",
                "dob"   => "22",
                "price" => "19750601",
            ),
        ),
    );
    // json形式に変換
    $json_value = json_encode($list);
 
// jsonデータを出力
header( 'Content-Type:text/javascript; charset=utf-8' );
echo $json_value;
?>
 
 

結果

初期表示

押下





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