『入門Ajax 増補改訂版』を読む その2
Posted by Junya HOSONO 2008年5月18日 PM 4:32
前の記事で『他の記事の合間に更新していきます』と書いたにもかかわらず、いきなりはじめてしまいます。
この本の目次は以下のようになっています。
- CHAPTER01 Ajax の基礎知識
- CHAPTER02 Ajax を構成する技術とツール
- CHAPTER03 XMLHttpRequest リファレンス
- CHAPTER04 クロスブラウザ対策と文字コード
- CHAPTER05 Ajax ライブラリ
- CHAPTER06 Ajax 基本サンプル
- CHAPTER07 送信時イベントタイプ別サンプル
- CHAPTER08 入出力エフェクトサンプル
- CHAPTER09 XML を使ったサンプル
- CHAPTER10 その他のサンプル
- CHAPTER11 Google Maps API
- CHAPTER12 UI ライブラリ群の利用
- APPENDIX HTTP 1.0/1.1 リファレンス
より詳細な目次に関しては、本屋さんで実物を手に取っていただくか、サポートサイトのほうに掲載されていますのでそちらを参照してください。
個人的には、早いとこ CHAPTER06（Ajax 基本サンプル） と CHAPTER11（Google Maps API） まで行きたいな、という感じです。こういうのは、実際に動くものを作れるようになってナンボですから。
べつに、この本のネタばれをしていくつもりはなく、またよりわかりやすい説明を連ねていくことも難しいので、技術面などからみて重要な点・今後使いたい点をピックアップおよび実際に試してみる、といったようにしていきたいと思います。
CHAPTER01 Ajax の基礎知識
まずはお約束ですが、「Ajax」という言葉の語源の紹介。
Ajax の代表的なものとしてよくあげられるのがGoogle MAP 。Ajax を構成する技術として特徴的なのは、やはり Javascript （で駆動する非同期通信の仕組み）と Javascript ライブラリ。Javascript は Ajax によって完全に復権しましたね。
Ajax の一番の特徴としては、
- ブラウザが（ユーザーからの指示で）サーバとやり取りをする間にも、ユーザーがその処理の終わりを待つ必要がない
- ページの移動なしで、（サーバ側の情報を元に）ページの内容を書き換えられる
ということがあげられるでしょう。具体的には、サーバからのレスポンスを待ち受けて実行されるコールバック関数をJavasciptでブラウザ側に設置する、ということです。
このあたりの感覚は、一度でもマルチタスクのウィンドウシステムに関するプログラミング（いわゆるイベントドリブン形式）をしたことがある人は理解しやすいですね（そういや10年以上前にペゾルド本やSX-Windowに関する本なんかを読んでたっけ...）。
あとは、Ajax 利用に関するメリット・デメリットの記述がいくつか。メリットはともかく、デメリットは要考慮ですね。一通りあげておきます。
- クロスブラウザ化が必要
- Ajax を使えないブラウザへの配慮が必要
- リクエストが多発するとサーバ側に負担がかかる
- セキュリティ対策：クロスサイトスクリプティング
- セキュリティ対策：SQL/OS コマンドインジェクション
CHAPTER02 Ajax を構成する技術とツール
前半は、オブジェクト指向の観点から Javascript の文法の説明。関数/変数のスコープの話やオブジェクトリテラルの記法、続いてDOM（Document Object Model）へ。このあたりはいちいち打ち込んで確かめる、というよりも理解する、という感じですね。
ここで、DOM の代表的なメソッドである、getElementById, getElementsByTagName のサンプルを試してみます。
実際のソースは以下のようになります。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>『入門Ajax 増補改訂版』60ページ</title>
</head>
<body>
<script type="text/javascript">
// データ
var a = new Array();
a[0] = 'data0';
a[1] = 'data1';
a[2] = 'data2';
a[3] = 'data3';
// 書き換え処理
function chgTable(textoj)
{
// 対象テーブルを特定
tbl0 = document.getElementById("table0");
// 対象テーブル内TDのノードリストを取得
tds = tbl0.getElementsByTagName("TD");
// TDをitem(0)から順番にスキャンする
for( i=0; i<tds.length; i++ )
{
// 各LIの最初の子をセット
oj = tds.item(i).firstChild;
// 最初の子がTEXTノードなら書き換える
if( oj.nodeType == 3 )
oj.nodeValue = textoj[i];
}
}
</script>
<table id="table0" border="1">
<tr>
<td>データ０</td>
<td>データ１</td>
</tr>
<tr>
<td>データ２</td>
<td>データ３</td>
</tr>
</table>
<form>
<input type=button
value=" chgTable(a) "
onclick="chgTable(a);">
</form>
</body>
</html>
これは、「ボタンが押されたらテーブル内の内容を書き換える」というもの。上であげた、「ページの移動なしで、（サーバ側の情報を元に）ページの内容を書き換えられる」という特徴を示したものです（「（サーバ側の情報を元に）」という部分は抜きですが）。
また、DOM を使えばページ内の任意の要素を書き換えられる、という意味のサンプルでもありますね。コレ自体はまったく面白くはないですが、こういった細かいことを積み重ねて Google Map になる、と考えれば、「なにごとも基礎が大事！」ということで確認しときしましょう。
その後、responseXML、XMLHttpRequest を用いてのサーバとの非同期通信のサンプルがありますが、これに関しては、次回、CHAPTER03 と一緒にみていきたいと思います。Ajax 習得に関しては、これがひとつ目のヤマですかね。
このブログ記事に対するトラックバックURL: http://www.ngo-jvc.net/~gt205119/mt/mt-tb-jvcweb.cgi/157/jvcwebtb/XXXXXXXX
※トラックバックスパム対策のため、お手数ですがトラックバックURL末尾のXXXXXXXX 部分を下記画像の数字列に書き換えてからご利用ください。
コメント(0)
コメントする