PEAR の Services_JSON を使って Ajax する

Blog.okuryu

Prev | PEAR の Services_JSON を使って Ajax する | Next

Tags: ajax json php | Date: 2006-08-21T22:53:52+09:00 | Comments: 2 | Trackbacks: 0

PEAR の Proposals にある Services_JSON を試すべく、簡単な Ajax を書いてみました。

PHP で簡単な配列を JSON にエンコードしたのものを JavaScript で受け取って出力するだけのものです。

PHP

メディアタイプは最近 RFC でも公開された application/json に文字コードも付け加えてみました。文字コードは全て utf-8 です。

<?php

require_once 'Web_Services/JSON.php';

header( 'content-type:application/json;charset=utf-8' );

$data = array(
    'JSON' ,
    'JavaScript Object Notation' ,
    'ja' => array(
        'じぇいそん' ,
        'ジェイソン'
    )
);

$json = new Services_JSON();
$js = $json->encode( $data );
echo $js;

?>

JSON

吐き出される JSON はこんな感じです。

{
    "0":"JSON",
    "1":"JavaScript Object Notation",
    "ja":[
        "\u3058\u3047\u3044\u305d\u3093",
        "\u30b8\u30a7\u30a4\u30bd\u30f3"
    ]
}

JavaScript

JavaScript では prototype.js も使ってます。

Event.observe( window , 'load' , function() {

    var ajax = new Ajax.Request( 'json.php' , {

        onComplete : function( transport ) {

            var json = eval( '(' + transport.responseText + ')' );
            var html = '<dl>';
            html += '<dt>' + json[0] + '</dt>';
            html += '<dd>' + json[1] + '</dd>';
            html += '<dd>' + json.ja[0] + '</dd>';
            html += '<dd>' + json.ja[1] + '</dd>';
            html += '</dl>';
            $( 'result' ).innerHTML = html;

        }

    } );

} , false );

HTML

出力先の HTML です。

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <script src="prototype.js" type="text/javascript"></script>
        <script src="json.js" type="text/javascript"></script>
        <title>Services_JSON</title>
    </head>
    <body>
        <div id="result"></div>
    </body>
</html>

簡単な例ですが Windows XP の Firefox 1.5.6 、Internet Explorer 6.0 、Opera 9 で確認できました。JSON のメディアタイプで Opera 8.5 のときには不具合があったようなことを見たことあるんですけど Opera 9 では問題ないんですかね。

Services_JSON の部分は今回は配列をエンコードしているだけなのですごくシンプルです。JSON を見るとわかるように日本語文字列は自動的に Unicode にエンコーディングしてくれるので文字化けの心配もなさそうです。あとはそれを JavaScript で eval すればすぐにデータを使えるので XML を引っ張ってくるよりも楽です。

トラックバック

このエントリーのトラックバックURL:
http://www.okuryu.com/mt/mt-tb.cgi/174

コメント

rickh | 2008-04-07T02:11:06+09:00

This whole situation is SO absurd. Your post strikes as serious for you only. What can we do but make jokes about it?

Jess | 2008-04-09T19:29:27+09:00

Sir, yes sir! I'm agreeing with you, but I don't think everybody do. You should not be so rude, it frightens of.

コメントを投稿

TypeKey を利用してコメントすることができますが、TypeKey ID をお持ちでない方もそのままコメントすることができます。






画像の中に見える文字を入力してください。


このサイトで公開しているものは クリエイティブ・コモンズ 帰属 - 同一条件許諾 2.5 の下でライセンスされています。