JSONを使ってみた

programming javascript

久々の更新。
いつもころころとネタが変わって、一貫性のないブログになっていますが
今回はJSONについて、、、
というのも、今回やっている仕事で初めて？？となるJavaScriptを使っているため
忘れないように備忘録と
もしかして見ていただいているかも知れないプロの方々に
駄目だしをして頂ける事をちょこっと期待して書いてみます。

なんでJSON使うの？？

当初、prototype.jsのUpdaterを使って更新をしていたが
どうにもこうにも遅い、、、
更に、複数の項目を更新していると挙動がおかしい？？？
ので、Ajax.Request+JSONを使って直接表示を更新して見ようと言うのが
今回の経緯です。

一番最初のコード
<script type="text/javascript" src="./js/prototype.js"></script>
<script>
function test() {
var test = document.getElementById('test');

var url = "http://localhost/php/update.php";
var pars = '';
var myAjax = new Ajax.Request(
        url,
        {
            method:'get',
            parameters: pars,
            onComplete: showResponse
        });
}
function showResponse(res) {
    var mosu  = res.responseText;
    var mosu1 = eval(mosu);
    alert(mosu1.100);
}
</script>

<?php
echo '{100 : "日本語100", 101 : "日本語200"}';
?>
２番目のコード

PHPのコードでJSONのkeyの部分を数字から文字列に変更
(当たり前か、、、)

<?php
echo '{"mosu1" : "日本語100", "mosu2" : "日本語200"}';
?>
  • 結果
    • firefox
      • 何も表示されず、、、、
    • safari
      • 日本語部分が文字化け、、、
3番目のコード

PHPのコードの内部エンコードをutf-8に指定
(よくあるAjax関係の文字化け解消法を実施してみた)

<?php
mb_internal_encoding("utf-8");
echo '{"mosu1" : "日本語100", "mosu2" : "日本語200"}';
?>
  • 結果
    • firefox
      • 何も表示されず、、、、
    • safari
      • 日本語文字化け、、、、、
4番目のコード

BOMと呼ばれるコードを付加しないとSafari2は駄目らしいので

とりあえず入れてみた
(完全に聞きかじりなので仕組みがわかってません、、、
ここ見て勉強しろ！という素敵なサイトがあったら教えてください、、)

<?php
mb_internal_encoding("utf-8");
echo "\xef\xbb\xbf";
echo '{"mosu1" : "日本語100", "mosu2" : "日本語200"}';
?>
  • 結果
    • firefox
      • 何も表示されず、、、、
    • safari
      • やた！"日本語100"って表示された！！
5番目のコード

JavaScriptのコードのevalをちょちょっと変更
(どうも、根本的にJSONの理解不足です、、、
でも、safariでは動くんだなぁ、、、)

    var mosu1 = eval(mosu);
            ↓
    var mosu1 = eval("("+mosu+")");
  • 結果
    • firefox
      • ばっちり"日本語100"が表示された！！
    • safari
      • ばっちり"日本語100"が表示された！！
今回学んだ事
  • 文字化けにはmb_internal_encoding、BOMが必要
  • evalの仕方

まぁ、結局JSONというよりは文字化け対策がほとんどだった

という結末でした。。。。

参考にしたサイト、書籍



http://jsgt.org/ajax/ref/test/json/test1.htm

http://wwww.vis.ne.jp/mt/archives/000662.html

http://shimax.cocolog-nifty.com/search/2006/09/maciebomutf8_af1a.html