入門Ajax

入門 Ajax

入門 Ajax

研究室のM1に「サンプルが、大学のサーバだと動くのにローカルのWindowsだと動かないんだけど助けて」と言われて、3時間ほど費やした。サーバサイドのPHPプログラムにPOSTして返ってきた結果をalertで表示するもの。実行すると「未定義の変数を参照している」旨のエラーが出る。

サンプルはこいつ

まず、入門Ajaxで提供されているラッパーを保存してあるjsファイルの文字コードShift_JISなのにもかかわらず、charset=utf-8として読み込んでいたので、jsファイルの文字コードutf-8に修正。返す刀でhtmlも文字コードutf-8に変更し、ついでにphpプログラムも文字コードutf-8にした。

これでひとまず動くようになったが、alertの内容が文字化けで日本語が読めない。むむ。

まじめにプログラムを見てみると、まずXmlHttpRequestで返ってきた結果をdecodeURIComponentでdecodeしているのが気になった。なんでURIでもないのにURIエンコーディングが必要やねん。ひとまずURIエンコーディング/デコーディングを外してみた。やっぱり文字化け。うーむ。

PHPプログラムを直接表示してみると、文字化けしている。IE文字コード自動判定でEUCになっているが、出力している文字列は、一度mb_convert_stringでutf-8にしてるはず。なので、utf-8にしてみたらあっさり読めた。(しかし、このプログラムはなんでmb_convert_stringで文字列をutf-8に変更してるのに、mb_http_outputでもう一回utf-8に設定してるんだろう。)

それじゃあということで、HTMLからAjaxで読んでみるとやっぱり文字化けする。入力された日本語をmb_convert_stringでutf-8に変換している部分で、日本語が消えてしまっているらしい。mb_convert_stringの仕様をよく読むと、サンプルではmb_convert_string($data, 'utf-8')としているが、3引数で実行もできるようである。そこでmb_convert_string($data, 'utf-8', auto)に変えてみたら、文字が消えてしまう問題は解決した。PHP4からPHP5で、仕様変更があったらしい。

しかし、やっぱりalertで出てくる文字化けは治らない。ひとまず、サンプルどおりにURIエンコードして送ってみたところ、なんとかきれいに表示された。

めでたしめでたし。

でも、やっぱりURIエンコードが必要なのは納得がいかんぞ。というわけで第二章。

教訓

  • Webのサンプルをコピペする場合には、保存するファイルの文字コードに注意すべし
    • メモ帳は捨てれ
  • PHPのバージョンに注意しなくてはいけない