DOM APIを利用したHTMLの生成
DOMのAPIであるcreateElementやappendChildを利用して、JavaScriptで動的にHTMLを生成できます。ページをロードすること無く、一部をレンダリングするAJAXの基本的なテクニックです。
DOMのAPIであるcreateElementやappendChildを利用して、JavaScriptで動的にHTMLを生成できます。ページをロードすること無く、一部をレンダリングするAJAXの基本的なテクニックです。
JSONはJavascript Object Notationの略で、軽量なデータ交換フォーマットです。データ交換標準と言えばXMLと思いがちですが、軽快に動かしたいAJAXアプリケーションではJSONは有効な選択となります。
AJAXが注目される前まで、JavaScriptはウィンドウのポップアップやFlushの代用などWebページのアクセサリ的な道具として使われてきました。ところがどっこい、充分にオブジェクト指向言語なのです。JavaScriptで独自のオブジェクトを生成し、メソッドやプロパティを定義できます。
サーバの応答を繰り返し反映させる方法の一つに、HTTPのMETAタグによるリフレッシュがあります。よりスマートな別の方法は、JavaScriptのタイマー機能を利用することです。
JavaScriptはプロトタイプベースのオブジェクト指向言語と言われています。prototypeプロパティを使ってコンストラクタに新たなプロパティを追加したり、オブジェクトの継承関係を定義できます。
JavaScriptを外部ファイルにする場合、foo.jsのように静的なファイルだけのように思いがちですが、PHPなどで動的にJavaScriptを生成することも可能です。
XMLHttpRequestオブジェクトを生成しxmlobjに割当てたとします。サーバ側にリクエストを送るにはGETとPOSTのいづれかのメソッドを用います。
XMLHttpRequestによるリクエストの結果はresponseTextとresponseXMLのプロパティに設定されます。最も簡単なresponseTextをブラウザ側に表示してみましょう。
XMLHttpRequestによるリクエストの結果はresponseTextとresponseXMLのプロパティに設定されます。簡単なresponseXMLをブラウザ側に表示してみましょう。
AJAXで利用するXMLHTTPRequestオブジェクトはFirefoxなどではネイティブにサポートされていますが、マイクロソフトのIEではActiveXコントロールを通じて実装されています。Javascriptではブラウザに応じてXMLHttpRequestオブジェクトをインスタンス化する必要があります。
XMLHttpRequestオブジェクトの主要なメソッドとプロパティをまとめます。
AJAXでは非同期通信が一つの特徴になっていますが、サーバプロセスからのレスポンスの処理をコントロールするのがonreadystatechageに設定するイベントハンドラです。
もし、JavaScriptのコードで$("container").removeChild($("message"));といった$()表記を見たら、prototype.jsを使っているでしょう。
ウィンドウのロード時に関数を呼び出したい場合、これまでは<body onload="func()">と書くことが一般的だったと思います。DOMの仕様ではないのですが、window.onloadにイベントハンドラを設定する書き方があります。
AJAX流ではページ全体のロードを行わないため、処理中であることをユーザに示す必要がある場合があります。例えば、GMailでは右上隅に赤い背景で「読込み中」とユーザに伝えています。イメージのスタイル属性の変更で処理中であることを示すのは簡単です。
JavaScriptでの配列にlengthプロパティがあります。これを配列のインデックスとして利用するちょっとしたテクニックがあります。