@blog.justoneplanet.info

日々勉強

AjaxでresponseTextが文字化けする(UTF-8以外の時)

どこのサイトを見てもハッキリ書いてなかったので自分なり分かりやすくまとめてみました。

■結論

  • サーバーに設置するファイルはUTF-8を使用する事が望ましい(静的データの時)
  • この文字化けはブラウザの能力に依存する(ブラウザの能力による差がある)

■前提

  • テキストデータやそれに準ずる静的データをサーバーに設置する場合である
  • サーバー側にテキストファイルを置く(異なる文字コードを数種類)
  • それをJavaScript非同期通信で取得
  • 受信データー(responseText)を文字化けしてないか?チェックする

■詳細

  • EUC-JP、Shift-JISはOpera、Netscape、IE、Firefox共にダメでした。
  • 但しEUC-JPのHTML4.01をresponseTextで受け取ると文字化けするが、EUC-JPのXHTML1.0をresponseTextで受け取ると文字化けしなかった。(Firefox2.0、IE6~7)
  • Opera9.01のみUTF-16が一部受け取れた。(UTF-16なんて使うかな・・・)

■もっと詳細

こちらをどうぞ(なんか自分のブラウザが対応できるかチェックしてくれるぞ)

解決:window.open()を使いつつIEでRefererを渡す方法

■読む前に知って欲しい事

window.open()を使って他のHTMLファイルを開くと、IE以外のブラウザはちゃんとリクエストヘッダーに『Refererをつけて』くれる。

■InternetExplorer(以下、IE)は?

例えば、

window.open(“test.html”,”sub”●●●●●●) ;

とすると、なんとRefererをセットしない。

■困る事

  • アクセスログを取る際に困る
  • セキュリティ上の理由でRefererが必須になる場合、window.open()が使えない

■従来の解決策

target=”_blank”で通常通りリンクする

■これからの解決策

まず、これがソースだ!

function createHttpRequest(){
	if(window.XMLHttpRequest){
		return new XMLHttpRequest();
	}
	else{
		if(window.ActiveXObject){
			try{return new ActiveXObject("Msxml2.XMLHTTP");}
			catch(e){
				try{return new ActiveXObject("Microsoft.XMLHTTP");}
				catch(e2){return null;}
			}
		}
		return null;
	}
}
function openWindow(FILE){
	var request = createHttpRequest();
	request.open("POST", FILE + ".html");
	request.setRequestHeader("Referer",document.URL);
	request.send("");
	request.onreadystatechange = function(){
		if(request.readyState == 4 && request.status == 200){
			var tmpTxt = request.responseText;
			subWin= window.open("","sub","width=............................");
			top.subWin.document.write(tmpTxt);
			top.subWin.document.close();
			subWin.focus();
		}
	}
}

つまりwindow.open();で空のウインドウを開かせて
バックグラウンドでリファラー付きの非同期通信をし
飛び先のHTMLソースを取得しちゃう。

■注意点

  • ポップアップとして開くウインドウは必ずUTF-8で保存する事。
  • metaタグのcharsetも書き換えてね!
  • request.openのところは適宜GET、POSTを置き換えてください!(サーバーの設定によりますが静的データのリクエストにPOSTが使えない事が多いようです)

■+α(更に改善するには…)

  • Operaなんかはポップアップの警告が出るようになるのでブラウザごとに条件分岐してみる?
  • そもそもIEだけがRefererを飛ばさないのでIEだけに適用するようにする?
  • createHttpRequestをグローバルにしておくのはもったいない。

■今回の著作権について

  • 商用、非商用かかわらず自由にご利用ください。
  • リンクしてくれると、なお嬉しい!

WordPress(ME2.2.1)をsakuraインターネットに…

まずはダウンロード

http://sourceforge.jp/projects/wordpress/files/
ダウンロードしたら圧縮してあるので解凍しましょう。

ファイル名は「wordpress-me221.zip」
解凍後、 FTPクライアントでアップロードします。

  • FTPって何?という方・・・Googleで「ffftp ダウンロード vector」とか入力してダウンロードして使ってみてください。
  • 但し wordpress-me221の中に wordpressというフォルダが入っているのでwordpressのフォルダをアップしましょう。(間違えてもインストールは出来る)

さて僕の場合はwordpressフォルダをアップしたので、FFFTPで言うとFFFTPで言うと右側のwordpressフォルダで右クリック。属性変更を選択し707もしくは777を入力します。

そしたらhttp://www.example.com/wordpress/ をブラウザで入力します。WordPressをインストールしたディレクトリですね。
普通の人はこれでサクサクインストールできるらしい
その場合はディレクトリのパーミッションを705もしくは755に戻し、直にファイルを編集します。wp-admin/install.php、wp-admin/upgrade.php を削除します

.htaccessなど設置して http://www.example.com/wordpress/を直接たたけない方。というか僕。 wp-config.phpを直接テキストエディタで開き編集しましょう。

define('DB_NAME', '●●●●●●●●●');    // The name of the database
define('DB_USER', '●●●●●●●●●');     // Your MySQL username
define('DB_PASSWORD', '*******'); // ...and password
define('DB_HOST', 'mysql??.db.sakura.ne.jp');    // 99% chance you won't need

とデーターベースの設定をしましょう。
他に文字コードなども設定できますが特に僕は必要なかったので。

そしたらブラウザで・・・/wp-admin/install.phpと入力→データーベースにテーブルが作成されます。
画面にadminとパスワードが表示されます。
絶対にパスワードは忘れないで下さいね。

別のphpファイル用のphp.iniがまずかったらしく

WordPress用のディレクトリには被らないようにして
何とか正しく表示されるようになりました♪