Ajaxで今よみがえる(^^;;-->[クロスブラウザ技術 ]DHTMLサンプル集
-- リスト --
【カテゴリー】 ActionScript ( 6 ) AIR ( 4 ) AjaSQL ( 10 ) Ajax ( 674 ) Arax ( 1 ) canvas ( 15 ) CSS ( 24 ) 脳 ( 9 ) DLNA ( 1 ) Dojo ( 25 ) DOM ( 51 ) ES4 ( 4 ) Ext JS ( 5 ) 反重力物質 ( 1 ) ffAdd-on ( 1 ) Flash ( 48 ) Flash Remoting ( 11 ) FTP ( 2 ) GAF ( 9 ) Google Maps ( 124 ) Google ガジェット ( 1 ) GPS ( 44 ) HTML ( 11 ) HTTPヘッダサンプル ( 10 ) IME ( 2 ) Internet ( 2 ) iPhone ( 49 ) IPv6 ( 1 ) 漫画 ( 4 ) Java ( 49 ) JavaScript ( 342 ) jKamo ( 8 ) jQchart ( 4 ) jQuery ( 207 ) jquery-ref ( 1 ) jsGadget ( 19 ) jslb_ ( 3 ) jslb_ajax ( 9 ) JSON ( 49 ) JSR223 ( 7 ) kjscmd ( 1 ) KNOPPIX ( 1 ) Linux ( 18 ) Mac ( 9 ) Memo ( 3 ) Microformats ( 2 ) Mini AJAX ( 2 ) MochiKit ( 2 ) mootools ( 9 ) Movable Type ( 58 ) MySQL ( 10 ) NewGameWeb ( 2 ) Nucleus ( 8 ) OpenAJAX ( 3 ) OpenDocument ( 1 ) OS ( 10 ) P2P ( 2 ) Perl ( 8 ) PHP ( 38 ) PostGIS ( 1 ) PostgreSQL ( 4 ) prototype.js ( 28 ) ROBOT ( 1 ) RSSリーダー ( 15 ) Ruby on Rails ( 7 ) SPDY ( 1 ) Spry ( 6 ) SQLite ( 17 ) SQLiteWorker ( 2 ) ssh ( 1 ) SSI ( 2 ) SVG ( 23 ) TRON ( 1 ) Ubiquity ( 7 ) Video ( 1 ) VML ( 1 ) Web Slice ( 1 ) Web Sockets ( 19 ) Webサービス ( 106 ) widget ( 6 ) Wii ( 1 ) Wiki ( 1 ) Win ( 6 ) WSH ( 1 ) X01HT ( 30 ) XML ( 32 ) XOOPS ( 1 ) XQuery ( 2 ) XUL ( 4 ) Yahoo! UI ( 74 ) 日付入力用カレンダー ( 1 ) 『Ajax実践テクニック』 ( 1 ) 『入門 Ajax』 ( 42 ) ＷｉｎTips ( 2 ) こりゃすごい ( 7 ) チューニング ( 30 ) ダイナミックロード関数 ( 7 ) リファレンス ( 20 ) ライブラリ ( 210 ) レーダー雨量表示 ( 1 ) ハード ( 35 ) ペンギン ( 2 ) ブラウザ ( 107 ) ブログでBBS ( 1 ) アクセスグラフ ( 3 ) イベント ( 2 ) カレンダーによる日付入力スクリプト ( 4 ) クロスブラウザ ( 14 ) クロスブラウザ関数 ( 8 ) スマートフォン ( 8 ) セキュリティ ( 155 ) ソフトイーサ ( 1 ) マッシュアップ ( 23 ) 暗号 ( 4 ) 映画 ( 57 ) 河川の水位グラフ ( 3 ) 回線 ( 2 ) 開発ツール ( 38 ) 牛久大仏 ( 19 ) 携帯 ( 150 ) 言語 ( 19 ) 故障 ( 9 ) 高橋家の謎 ( 3 ) 広告とか ( 1 ) 洪水警報システム ( 2 ) 今日のひと言 ( 10 ) 仕様 ( 112 ) 雑談 ( 353 ) 実装 ( 2 ) 書籍 ( 20 ) 親子ウインドウ有無の確認関数 ( 3 ) 新海誠 ( 3 )
Web Sockets Domo

* サーバー側は、小松氏のこれをbloga.jp:80へ置いてあります。
* クライアント側はWS処理をjQueryプラグイン化してみました。これです。
* ちなみに、このDemoサンプルは、下記5行でローカルでも別ドメインでもどこにでも設置出来ます。
<script src="http://bloga.jp/ws/jq/js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="http://bloga.jp/ws/jq/js/jquery.ws-0.3-noenc-pre.js" type="text/javascript" charset="utf-8"></script> <script src="http://bloga.jp/ws/jq/conn/wschatdemo0.3.js" type="text/javascript"></script> <script>/*サポートしてない時のalertメッセージを抑止*/$.ws.wsSetup({nonosupportmsg:true});</script> <div id="wsdemos"></div>

【info】いつもいろいろなテストなどをページ内のあちこちでやっているので、重かったり、壊れていたりするf^^;ことも多いです。実験用ですので、カオス(混沌)をあえて意図したりもしますので、標準やValidとは無縁だったりしますが、何卒、ご了承ください ( _ _ b

【info】 最近はTwitterでぶつぶつ言ってることが多いです。
>http://twitter.com/toshirot

2005年04月21日

【Ajax】responseされる文字コードの調査

【Ajax , DOM , JavaScript , XML 】 ブックマークに追加する ブックマーク-- Hatena  / Livedoor track feed


予想通り、ブラウザバージョンごとの違いが結構あるので、
とりあえず、対策うんぬんを考える前に
問題点を洗い出して確定しておこうと思います。

まず、responseTextで受け取るファイルの文字コードによる、
ブラウザバージョンごとの振る舞いの違いです。

文字コード関連調査 [ responseText ]
http://jsgt.org/ajax/ref/charset_test/responsetext/test_1_make_table.php

XMLHttpRequestオブジェクトという名前が示すとおりなら、
utf-8やutf-16で書けば問題ないはずですが、やはり違います。

たとえば、
WinのIE6はUTF-8 、UTF-16ともに成功しますが、
MozillaやFirefoxは、Win、Mac、Linuxともに UTF-8 以外は文字化けします。
ところが、
Mac Safari1.2と
Win Opera8.0 では逆に、UTF-16以外が文字化けします。

しかも、SafariはBOM付でないUTF-16 BEやUTF-16 LEは失敗します。

と、まあ、日本人には、こんな現実がとりあえずありますので(^^;
心してかかる必要があります。

実は、responseXMLもresponseTextと異なるようなので(^^;
それも、これから調査します。

できました。
文字コード関連調査 [ responseXML ]
http://jsgt.org/ajax/ref/charset_test/responsexml/test_1_make_table.php


追記
2005.7.24
【ほぼ的結論と2次会的話題050724】
Ajaxでは、サーバーからデータを受信する際、生のテキスト文字列を使用すると、 responseText,responceXMLそれぞれに文字化けするブラウザがあります。
これは、Ajaxでの送受信時には、Formの時のようにブラウザが自動でURIエンコード/デコードをしてくれるわけではない、ということに起因すると言えるかもしれません。

そこで、UTF-8でURIエンコードした文字列をサーバーへ置いておけば解決しますが
サーバー側でスクリプトを使えるなら、、、

PHPとJavaScriptのURIエンコードを比較
http://jsgt.org/ajax/ref/charset_test/responsetext/php/urlencode.php

2005.4.24
とりあえずの、

1: responseXML

【中締め的結論050424】

responseXMLに関しては、UTF-8が安全です。XMLHttpRequestオブジェクトが存在して、かつ、UTF-8がだめなブラウザはLinuxのKonquerorのみという状態です。

FYI :
* XML宣言は省略してもOKですが、encoding属性だけを省略するとアウトです。
必ず、<?xml version="1.0" encoding="UTF-8"?>までしっかり書く必要があります。
* Konqueror/3.3　はすべての文字コードで失敗していますが、実はUTF-16とUTF-16 LE BOM では文字化けしていません。ただ、行末にあった半角空白が除去されて返って来たためマッチしませんでした。
* Konqueror/3.3　はsend(null)という書き方がエラーになりました。

UTF-8がOK

linux

  • Galeon/1.2.14

  • Firefox/0.10.1

  • Epiphany/1.0.4

  • Mozilla 1.7.3

    • Win

  • MSIE 6.0

  • Firefox/1.0.2

  • Firefox/0.8

  • Mozilla 1.0.2

  • Opera 8.0

    • Mac

  • Safari/312

  • Safari/125

  • OmniWeb/v563.34

  • Firefox/1.0.1

  • Mozilla 1.7.3

    • UTF-8がNG

    linux

  • Konqueror/3.3

    • Win

  • なし

    • Mac

  • なし

    • そもそもresponseXMLを受け取れない

    linux

  • Konqueror/3.2以前

    • Win

  • N4以前

  • Operaは7.x以前

    • Mac

  • IE

  • Safari/1.1x以前

    • その他

  • Moz,Ff, Safari 等の未実装バージョンは今のところ不明

    • * Mozillaはmilestone 0.9.7（nightlyビルドの 2001-11-28 以降に実装）,Ffはすべてに実装,Safariは1.2x以降に実装

    【中締め的対策050424】
    Konquerorについて、とりあえず考えられそうな対策

    case(Konqueror)
    {

    • サーバー側で動的にUTF-16 LE BOM を吐き出す
      　　　　(末尾空白除去はあきらめる)

    • ブラウザ側で静的なUTF-16 LE BOM ファイルを取りに行く
      　　　　(末尾空白除去はあきらめる)

    • ブラウザ側でresponseText を使ってUTF-16 LE BOM ファイルを取りに行く

    • ブラウザ側でutf-8をutf-16へ書き換える
      　　　　(参考:utf.js (UTF-8 <-> UTF16 変換) ライブラリ)

    • Konquerorが対応するまで無視する

    }


    追記
    2005.4.28
    とりあえずの、

    2: responseText

    【中締め的結論050428】

    responseTextに関しては、UTF-8は、最もユーザーの多いWin IEやMozilla/Firefoxで使えますので、おおむね安全といえますが、Opera8やLinuxのKonqueror、MacのSafariは文字化けします。3ブラウザともBOM付のUTF-16ならOKです。

    FYI :
    * Konqueror/3.3　はsend(null)という書き方がエラーになりました。

    UTF-8がOK

    linux

  • Galeon/1.2.14

  • Firefox/0.10.1

  • Epiphany/1.0.4

  • Mozilla 1.7.3

    • Win

  • MSIE 6.0

  • Firefox/1.0.2

  • Firefox/0.8

  • Mozilla 1.0.2


    • Mac

  • OmniWeb/v563.34

  • Firefox/1.0.1

  • Mozilla 1.7.3

    • UTF-8がNG

    linux

  • Konqueror/3.3

    • Win

  • Opera 8.0

    • Mac

  • Safari/312

  • Safari/125

    • そもそもresponseXMLを受け取れない

    linux

  • Konqueror/3.2以前

    • Win

  • N4以前

  • Operaは7.x以前

    • Mac

  • IE

  • Safari/1.1x以前

    • その他

  • Moz,Ff, Safari 等の未実装バージョンは今のところ不明

    • * Mozillaはmilestone 0.9.7（nightlyビルドの 2001-11-28 以降に実装）,Ffはすべてに実装,Safariは1.2x以降に実装

    【中締め的対策050428】
    Konqueror、Safari、Opera8について、とりあえず考えられそうな対策

    case(Konqueror||Safari||Opera8)
    {

    • サーバー側で動的にUTF-16 BOM を吐き出す

    • ブラウザ側で静的なUTF-16 BOM ファイルを取りに行く

    • ブラウザ側でresponseXML を使ってUTF-8 にそろえる
      　　　　(ただしKonqueror以外)

    • ブラウザ側でutf-8をutf-16へ書き換える
      　　　　(参考:utf.js (UTF-8 <-> UTF16 変換) ライブラリ)

    • Konqueror、Safari、Opera8がUTF-8対応するまで無視する

    }

    *とはいえ、もし、日本語を使うなら、responseXML を使う方が安全といえるでしょう。

    【追記2006.8】
    AjaxでShift_JISやEUC-JPは使えるのか？-1- responseText編
    (XHR/responseTextで読み込むファイルのcharset別 動作ブラウザ)
    http://jsgt.org/ajax/ref/charset_test/responsetext/seu8/sample.htm
    AjaxでShift_JISやEUC-JPは使えるのか？-2- responseXML編
    http://jsgt.org/ajax/ref/charset_test/responsetext/seu8xml/sample.htm





    AllaboutのJavaScript記事を連載させていただいてます。最近は、jQueryを主に取り上げていますが、多少なりとも参考になれば幸いです。

    【広告】

    ジャパネットたかた　メディアミックスショッピング


    視力回復手術は銀座スポーツクリニック
    アスリートが選ぶレーシックは、銀座スポーツクリニック

    アウトレットコーナー：サンワサプライ直営【サンワダイレクト】

    夏休みのかみさんとまりもの帰省用にちょっと調査中---
    ≪国内格安航空券≫出張・帰省・旅行に最適
    全国どこでも出発！国内格安航空券