Programming/Ajax の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Programming/Ajax へ行く。
• Programming/Ajax の差分を削除

-最近のはやりだ！はやり！なのでそろそろやっておくか！

*Ajaxとは [#u2510ba6]

要はJavaScriptを利用して、ページの読込とは別にHTTP通信してしまおうというものだ。一部分しか書き換えないのにページ全体をリロードするなどという無駄な処理がなくなるのでレスポンスもよくなる。セキュリティ上の制約として元のページと別のドメインとの通信はできないので注意。もし別のドメインと通信が無制限にできたら悪意のあるサイトがあなたの情報をいくらでも集めることができてしまう。

*用意するもの [#f263c2fd]

テキストエディタとブラウザ

*あったほうがいいもの [#u8400403]

FirefoxのFirebugプラグインがあると便利

*Ajaxでよく利用されるライブラリ [#v63c6f57]

**json.js [#q907f977]

JSONデータをやり取りする時に非常に重宝する。

**prototype.js [#h669ad20]

Web2.0的サイトを作る時に重宝するライブラリ

*Ajax通信でやり取りするフォーマットについて [#w691063f]

既存ものとやり取りする場合は選択の余地はないだろうが、データの送信側も自分で作れるならフォーマットも用途に合ったものを選びたい。

**プレーンテキスト [#nf15850d]

あんまり複雑なデータ構造でなければこれが一番だろう。けどそんなデータならそもそもAjaxにする意味あるのかという突っ込みをしたくなる。

**JSON [#zbdbe296]

これがそのままJavaScriptで利用できる変数に代入できる（セキュリティに注意だが）ので楽。

***送信側 [#vea6f2ed]

テキストで以下のように返す。JSONにはいろいろなデータ形式があるのであくまで一例

 { 
   "key1" : "value1",
 };


***受け側 [#e2c4f20b]

 eval("var ajaxData=" + responseの内容);

**XML [#xc223546]

一番汎用的だがパースが面倒かもしれない。速度的にいうとJSONのほうが早い。

*とりあえずAjaxでデータを変数に読み込むサンプル [#idf916b5]



*Ajaxトラブルシューティング [#jd9f4888]

**IEでキャッシュが使われる [#v6204f3d]

+POSTにする
+リクエストごとにGETの文字列がユニークになるように文字列を付加
+xmlHttp.setRequestHeader("If-Modified-Since", "Thu, 01 Jun 1970 00:00:00 GMT");