Ajax memo

メモです。javascript 自体が学習中なので間違いを含んでいる可能性があります。

Ajax 概要

javascript + DOM + CSS + XML(XMLHttpRequest) によって実現される RIA 。

メリットとデメリット

メリット

サーバの負荷軽減（インターフェイス構築をブラウザ側で行う）

ユーザビリティ向上

非同期通信による待ち時間ストレスの解消/作業効率の向上

なんとなくカッコイイ

デメリット

サーバへのリクエスト増加（XML取得回数の増加）

勉強することが増える

リンク

解説

Ajax: Web アプリケーション開発の新しいアプローチ

ドキュメントオブジェクトモデル（DOM）

XMLHttpRequestについて

導入例

Google マップ

XMLHttpRequest

Ajax の肝。ブラウザは画面遷移せず、非同期的に XML を受信してくるオブジェクト。

ブラウザを自動判別して XMLHttpRequest オブジェクトを生成する関数

function createXMLHttpRequest(){
 var xmlhttp=false;
 /*@cc_on @*/
 /*@if (@_jscript_version >= 5)
 // JScript gives us Conditional compilation, we can cope with old IE versions.
 // and security blocked creation of the objects.
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
 @end @*/
 if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
 }
 return xmlhttp;
}

処理完了時のイベントハンドラ

obj.onreadystatechange = function() {
 if (this.readyState==4) {
  //リクエストが戻ってきたときの処理を記述
 }
}

• ブラウザごとにオブジェクトの生成方法が違う為、上の関数を使って生成する。
• 受け取った XML は DOM で処理できる。
• 同一ドメインへしかリクエストできない。（外部サイトの RSS 受信などは不可。）

DOM

• 要素のテキストデータは Element.firstChild.nodeValue 。
• HTML を追記/書き換える場合、 innerHTML より DOM で操作した方が速い。for で回す場合は特に。
• 要素の中にテキストを追加する場合は Element.appendChild(document.createTextNode("文字列")) 。
• getElementById() の戻り値はは要素オブジェクト、 getElementsByTagName() は要素オブジェクトのコレクション。
• 文書中の要素の ID 属性の値は文書内で一意。
• 要素にイベントハンドラを設定する場合、 setAttribute() ではダメ。 Element.onclick = function(){ 関数定義 } のように設定する。

XML

• DOM でアクセス。

CSS

• 要素の CSS プロパティの中身は文字列。足す場合は px などの単位を削る。

サーバサイドの処理

XMLHttpRequest からのリクエストに返答するドキュメント/スクリプトが必要です。

動的ドキュメント

POST や GET で。

PHP (XML でリクエストを返す場合ヘッダ (Content-type:application/xml) が必要？)

HTML その他(ただのテキストデータも受信できます。)

静的ドキュメント

XML

HTML その他