メイン

DOM APIを利用したHTMLの生成

DOMのAPIであるcreateElementやappendChildを利用して、JavaScriptで動的にHTMLを生成できます。ページをロードすること無く、一部をレンダリングするAJAXの基本的なテクニックです。

続きを読む "DOM APIを利用したHTMLの生成" »

JSON

JSONはJavascript Object Notationの略で、軽量なデータ交換フォーマットです。データ交換標準と言えばXMLと思いがちですが、軽快に動かしたいAJAXアプリケーションではJSONは有効な選択となります。

続きを読む "JSON" »

JavaScriptのコンストラクタ関数

AJAXが注目される前まで、JavaScriptはウィンドウのポップアップやFlushの代用などWebページのアクセサリ的な道具として使われてきました。ところがどっこい、充分にオブジェクト指向言語なのです。JavaScriptで独自のオブジェクトを生成し、メソッドやプロパティを定義できます。

続きを読む "JavaScriptのコンストラクタ関数" »

JavaScriptのタイマー

サーバの応答を繰り返し反映させる方法の一つに、HTTPのMETAタグによるリフレッシュがあります。よりスマートな別の方法は、JavaScriptのタイマー機能を利用することです。

続きを読む "JavaScriptのタイマー" »

JavaScriptオブジェクトの継承定義

JavaScriptはプロトタイプベースのオブジェクト指向言語と言われています。prototypeプロパティを使ってコンストラクタに新たなプロパティを追加したり、オブジェクトの継承関係を定義できます。

続きを読む "JavaScriptオブジェクトの継承定義" »

PHPによる動的スクリプト

JavaScriptを外部ファイルにする場合、foo.jsのように静的なファイルだけのように思いがちですが、PHPなどで動的にJavaScriptを生成することも可能です。

続きを読む "PHPによる動的スクリプト" »

XMLHttpRequestによるリクエスト送信

XMLHttpRequestオブジェクトを生成しxmlobjに割当てたとします。サーバ側にリクエストを送るにはGETとPOSTのいづれかのメソッドを用います。

続きを読む "XMLHttpRequestによるリクエスト送信" »

XMLHttpRequestのresponseTextの表示

XMLHttpRequestによるリクエストの結果はresponseTextとresponseXMLのプロパティに設定されます。最も簡単なresponseTextをブラウザ側に表示してみましょう。

続きを読む "XMLHttpRequestのresponseTextの表示" »

XMLHttpRequestのresponseXMLの表示

XMLHttpRequestによるリクエストの結果はresponseTextとresponseXMLのプロパティに設定されます。簡単なresponseXMLをブラウザ側に表示してみましょう。

続きを読む "XMLHttpRequestのresponseXMLの表示" »

XMLHttpRequestオブジェクトのインスタンス化

AJAXで利用するXMLHTTPRequestオブジェクトはFirefoxなどではネイティブにサポートされていますが、マイクロソフトのIEではActiveXコントロールを通じて実装されています。Javascriptではブラウザに応じてXMLHttpRequestオブジェクトをインスタンス化する必要があります。

続きを読む "XMLHttpRequestオブジェクトのインスタンス化" »

XMLHttpRequestオブジェクトのメソッドとプロパティ

XMLHttpRequestオブジェクトの主要なメソッドとプロパティをまとめます。

続きを読む "XMLHttpRequestオブジェクトのメソッドとプロパティ" »

onreadystatechageイベントハンドラ

AJAXでは非同期通信が一つの特徴になっていますが、サーバプロセスからのレスポンスの処理をコントロールするのがonreadystatechageに設定するイベントハンドラです。

続きを読む "onreadystatechageイベントハンドラ" »

prototype.js

もし、JavaScriptのコードで$("container").removeChild($("message"));といった$()表記を見たら、prototype.jsを使っているでしょう。

続きを読む "prototype.js" »

ウィンドウのロード時イベントハンドラ

ウィンドウのロード時に関数を呼び出したい場合、これまでは<body onload="func()">と書くことが一般的だったと思います。DOMの仕様ではないのですが、window.onloadにイベントハンドラを設定する書き方があります。

続きを読む "ウィンドウのロード時イベントハンドラ" »

サーバからの応答待ちに画像を表示

AJAX流ではページ全体のロードを行わないため、処理中であることをユーザに示す必要がある場合があります。例えば、GMailでは右上隅に赤い背景で「読込み中」とユーザに伝えています。イメージのスタイル属性の変更で処理中であることを示すのは簡単です。

続きを読む "サーバからの応答待ちに画像を表示" »

配列のlengthプロパティ

JavaScriptでの配列にlengthプロパティがあります。これを配列のインデックスとして利用するちょっとしたテクニックがあります。

続きを読む "配列のlengthプロパティ" »