Ajaxとは

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

用意するもの

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

あったほうがいいもの

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

Ajaxでよく利用されるライブラリ

json.js

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

prototype.js

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

Ajax通信でやり取りするフォーマットについて

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

プレーンテキスト

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

JSON

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

送信側

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

{ 
  "key1" : "value1",
};

受け側

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

XML

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

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

Ajaxトラブルシューティング

IEでキャッシュが使われる

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

トップ   編集 凍結 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2022-10-14 (金) 13:16:53