本書は、Ajax（エイジャックス : Asynchronous JavaScript + XML）の実践本です。Ajax とは何か？Ajax を使って何ができるのか？Ajax と呼べるアプリケーションを構築したい！Ajax ブームに乗っかりたい！という人のための本になっています。
本書は Ajax に関する4つの話題について書かれています。
- Ajax とは何か？Ajax を使う理由
- Ajax アプリケーションを取り巻くコア技術
- Ajax アプリケーションを実際に使えるようにするには、どういう点に気をつけるべきか
- Ajax アプリケーションを実際に作りながら、実践的なアプローチの仕方を学ぶ
Ajax では、よく知られているいくつかのウェブ技術を組み合わせ、それらを新しい興味深い方法で使用します。<中略> Ajax 技術そのものはすべてクライアントサイドの話であるものの、その特徴はサーバーサイドにも及びます。
本書の対象読者は、Ajax に興味のある人ですが、それなりにヘビーな内容になっています。本書を隅々まで読むには、Web の仕組み（HTTP 通信）を理解してることと、JavaScript が読める必要があります。Ajax とは何か？だけが知りたい人は別の書籍を当たったほうがよいと思います。本書は、Ajax 開発者向けの本になっています。
Ajax とは
Asynchronous JavaScript + XML
Ajax（エイジャックス）とは、Asynchronous JavaScript + XML のことで、古くからの Web 技術を組み合わせたものをあらわします。Ajax という技術があるわけではなく、Ajax は方法論のことです。Ajax は次のような技術がの集まりです。
- JavaScript
- XHTML
- XML
- XSLT
- Document Object Model（DOM）
- XMLHttpRequestオブジェクト
Ajax の目的
Ajax を使う目的は、Web 用のリッチユーザインターフェースを構築することにあります。「リッチ」 とは、色とりどりな装飾がされたという意味ではありません。Ajax におけるリッチとは、クライアントとの快適な対話モデルを指します。それは、入力手段に対する直感的な操作と反応があるというものです。クライアントが何かを入力したら、それに対する反応が即座に起こる。スタンドアローンのアプリケーションと変わらないユーザインターフェースを Web アプリケーションでも提供しようというのが Ajax の目的となります。
Ajax アプリケーションの例
Ajax の特徴
ブラウザが扱うのはコンテンツではなくアプリケーションである
従来型のページベースのアプリケーションでは、ブラウザは事実上、ダム端末です。ブラウザは、ユーザーが現在ワークフローのどの位置にいるのかについて何も知りません。通常は、その情報はすべて、ウェブサーバー上のユーザーセッションに保持されています。
つまり、従来型のアプリケーションでは、ブラウザはサーバが送ってくるコンテンツをただ表示するだけに過ぎなかったというわけです。サーバサイドでページ遷移の情報を管理し、データの管理を行っていました。Ajax を使うとこのモデルが次のようになります。
Ajax アプリケーションでは、アプリケーションロジックの一部をブラウザに移します。ユーザがログインすると、非常に複雑なドキュメントがブラウザに送られます。その大部分は JavaScript コードです。このドキュメントはセッション中ずっとユーザー側にとどまりますが、ユーザーがそのドキュメントと対話している間にその見た目を変化させることになります。
また、このドキュメントはユーザー入力に対する応答の方法を知っており、ユーザー入力自身で処理するか、ウェブサーバー（システムデータベースなどのリソースへのアクセスが可能）にリクエストとして渡すか、その両方を組み合わせるかを判断することができます。
Ajax アプリケーションでは、サーバサイドでしか管理していなかったビジネスロジックやワークフロー情報の一部を、クライアントサイドに移すことを考えます。こうすることで、ユーザとのリッチな対話モデルを実装しやすくなります。
- Information
- サーバサイドからクライアントサイドへ、ビジネスロジックやワークフローの一部を移動する。
サーバが配信するのはコンテンツではなくデータである
従来型の Web アプリケーションは、一度のリクエスト/レスポンスでやり取りされる情報に、コンテンツとデータの両方が含まれていました（コンテンツとは画像や広告やページレイアウトなど、データはショッピングカートの中身など）。
Ajax アプリケーションでは、コンテンツ部分のやり取りは最初の一度のみで、後は必要なデータのやり取りだけを行うという形をとります。これにより通信データ量を抑えることができ、パフォーマンスがよくなります。
Ajax アプリケーションでは、ユーザのログ印字に大規模で複雑なクライアントが一度に配信されるので、トラフィックは最初の負荷が大きくなります。しかし、その後のサーバーとの通信ははるかに効率がよくなります。短期滞在的アプリケーションの場合、累積トラフィックは従来のウェブページアプリケーションの方が少ないものの、対話時間が長くなるにつれて、Ajax アプリケーションの大域幅コストは従来のアプリケーションよりも少なくなります。
- Information
- ページ全体をやり取りするのではなく、データだけをやり取りする。
ユーザーとの対話は滑らかで継続的である
Ajax の A（Asynchronous） と DHTML によって、ページ全体をリフレッシュすることなく滑らかな反応を行うことができます。また、ユーザのブラウザに対するさまざまなイベントにフックできるため、洗練されたユーザインターフェース（ドラッグアンドドロップなど）を実現することができます。
ただし、ユーザビリティの観点からすると、このような自由度の高さはそれほど重要ではありません。私たちの想像力を活かせるという利点はありますが、その一方で、ユーザーとの対話とサーバーサイドリクエストを一緒くたにすることにもなるからです。
- Information
- ユーザをイライラさせない。
真のコーディングには規律が必要である
Ajax アプリケーションで使われる JavaScript は、従来型のアプリケーションで使われる JavaScript とは少し違ったものになります。従来型のアプリケーションでは、単に入力確認やページに少し装飾を行う程度の使い方でした。
Ajax アプリケーションにおける JavaScript は、ビジネスロジックの一部であったり、ワークフローの一部を担う複雑なものになります。そのため、アプリケーションを閉じるまでの間動作し続けるものでなければなりません。メモリリークや低速化が行われないように注意してコーディングを行う必要があります。
- Information
- やっつけ言語としての JavaScript ではなく、通常のコーディングと同じように規律を守ったコーディングを行う。
CSS セレクタ
スタイルクラスの定義
HTML タグの種類と関係ないスタイリングのためのクラスを定義するには、「.（ドット）」をつけて定義する。
.info { border: solid blue 1px; backgournd-color: cyan }クラスをネストすることもできる。
.info .help { font-size: small }
span.highlight { background-color: red }
HTML 内で id 属性によって指定されたものだけに適用されるようなスタイルクラスを定義するには、「#」を使う。
#close { color: red }擬似セレクタに基づいてスタイルを定義することもできる。
次は、任意の要素の一文字目を 500% の文字サイズで表示する。
*:first-letter { font-size: 500% }JSON
書けたら書く・・・
参考
- Ajax アプリケーションを書けるようになる本
- Ajax の基礎に適しています