Ajaxについて教えてください。（定義と実装方法について）

質問

Ajaxについて教えてください。
（定義について）
http://www.atmarkit.co.jp/fwcr/rensai/imasara03/imasara03_1.html
（サンプル集）
http://jsajax.com/default.aspx

【定義について】
＞＞Ajaxは略語で、正式名称は「Asynchronous JavaScript ＋ XML」となります。Asynchronousは「非同期」という意味

とされいるようなのです。他にも調べてみると、
「Javascriptを使い，Webページとは非同期（Asynchronous）にXML形式（もしくはテキスト形式）のデータ通信を行う手法」といった風にかかれています。

この「Webページとは非同期」という部分がわからないのですが、どういったものを指しているのでしょうか？

【実践方法について】
　Ajaxの実装はどういった手順で行うものなのでしょうか？

　参考でみたホームページで、ライトボックスをみて感動したので、早速使ってみたいと思いました。いざAjaxサンプルページに載っている、ライトボックスのコードをコピー＆ペーストで、自分のＰＣ上で試してみたのですが、動かず悩んでいます。（汗）

　調べていくうちに、ライブラリが必要なようなのですが、どのように実装することで、ライトボックスは使用できるようになるのでしょうか？

　AjaxサンプルのURLにjQueryを使い倒せ!ということから、jQueryという、Ajax用のライブラリがあるのでしょうか？

回答No.1

mtaka2 · ベストアンサー

・Ajaxの「非同期」とは
通常のネットサーフィン(Webブラウズ)では、

ページが表示される
　↓
ページ上で操作(クリックなど)を行う)
　↓(操作結果をサーバに送り、次のページデータがサーバから送られてくるのを待つ)
次のページが表示される

という「操作」と「表示」の繰り返しになります。
一度、リンクをクリックしたりすると、次のページが表示されるまで、何もできません。
これが「同期的」ということです。

一方、Ajaxでは、サーバから次のデータが届くまでの間も、
ユーザは操作が可能です。
これが、「サーバからデータが届くのを待つ」のと「ユーザが操作を行う」のを非同期的に(並行して)処理している、ということなのです。

・Ajaxの実装方法
Ajaxはそういう「実現結果」を示す言葉にすぎませんので、
その実現方法には、さまざまな手段があります。

ですが、Ajaxを実現するのは結構手間がかかりますので、
それを簡単に行うためのさまざまなライブラリが
いろいろなところが作って公開しています。
jQueryもその一つです。
jQueryの他にも、prototype.js 、MooTools 、YahooUI Library といったAjaxライブラリがあります。
どれもAjaxに必要な機能が一通り揃ってますから、どれを使うかは「趣味」の世界になるかと思います。

ただし、ライトボックスの実現には、「ページ内に動的にウィンドウっぽいものを作る」必要があります。これは、Ajaxの範囲ではありません。
そういった「画面描画機能」を用意しているかどうかは、Ajax用のライブラリによって変わってきます。
たとえば、Ajaxライブラリの中でも初期のものである prototype.js なんかは「ビジュアルをお手軽に」といった機能が弱いです。
逆に、YahooUI Library の方は、「ビジュアルを実現」する方がメインのライブラリで、Ajax の方がおまけなぐらいです。

お礼

ありがとうございます。

・Ajaxの「非同期」について
　サーバからデータが来てない間も、ユーザー側で操作ができるということですね。

回答いただき、頭の中がすっきりしてきました。

ふとした疑問なのですが
「(1)サーバからデータが届くのを待つ」のと「(2)ユーザが操作を行う」という状況の中。

(1)サーバからデータが届くのを待つ
　これが「次のページに遷移する」という内容だったとき

(2)ユーザーが操作を行う
　これがユーザーが遷移前の画面に処理を行うものであるとき

　次のページに遷移してしまった後に、前の画面に対して操作する、という処理になってると予想したのですが、
　こういった場合は、次のページに遷移するという処理が優先され、前の画面に対しての操作の処理は行われないものでしょうか？

・実践方法について

＞Ajax用のライブラリによって変わってきます。
Ajax用のライブラリとはそういうものなのですね（驚）
となれば提供されているライブラリの多くは「HTML、JavaScript、CSSを上手いこと連携して作られた“機能セット”」といった感じでしょうか？

Ajax用のライブラリ（機能セット）については、
作者が「こういう機能を寄せ集めしよう」として作ったものと考えても間違いはないでしょうか？

回答No.3

x_jouet_x

皆さん的確な回答をされていらっしゃるので、私は補足的な意味を込めて…。

Ajaxとは狭義ではJavaScriptが持っているXMLHttpRequest通信機能を使用してサーバと通信を行い、サーバからのレスポンスをもとにDOMを使ってWebページの一部を更新することを意味します。
AjaxはAjaxライブラリを使用しなくても、割と簡単にその機能を実装することは可能です。
ただ、自分で実装するとなるとクロスブラウザ問題等を意識する必要が生じるのでAjaxライブラリを使用する方が無難です。

しかし最近のAjaxライブラリはAjaxの機能よりも、例えばツリービュー、グリッドあるいはチャートが表示できたりとRIA(Rich Internet Applications)向けライブラリに化しているのが現状です。

ちなみに私はExt JSというAjaxライブラリを利用していますが、これはRIA向けライブラリの典型と言っても過言ではないでしょう。

お礼

どうも、ありがとうございます。
お返事が遅くなってすみません。

Ajaxのライブラリでは
クロスブラウザの対応までされているのですね（驚）
かなり便利いいですね！

回答No.2

mtaka2

> (1)サーバからデータが届くのを待つ
> 　これが「次のページに遷移する」という内容だったとき

Ajax では、そういうことはしません。
ページを遷移させずに、今表示しているページそのものを書き換える形で、
ユーザが行った操作の結果を画面に反映させます。

そのため、
> 　こういった場合は、次のページに遷移するという処理が優先され、前の画面に対しての操作の処理は行われないものでしょうか？
ということにはなりません。
(というか、そういうことにならないようにするため、Ajaxでは非同期なページ遷移は行わないようにするものなのです)

> となれば提供されているライブラリの多くは「HTML、JavaScript、CSSを上手いこと連携して作られた“機能セット”」といった感じでしょうか？

Ajaxのライブラリは「JavaScriptの機能セット」です。
JavaScriptを用いて、「非同期にサーバからなんらかのデータを取得する」機能や、取得したデータを元に「表示しているページそのものを書き換える」ための機能などを提供しています。
「HTML(DOM)やCSSに対して操作を行う」機能は提供していますが、
ライブラリがHTMLやCSSから成り立っているわけではありません。

> 作者が「こういう機能を寄せ集めしよう」として作ったものと考えても間違いはないでしょうか？

寄せ集めというと語弊がありますが、それぞれの作者が「Ajaxを実現するためによく使う機能の実装」を取りまとめたものであるのは確かです。

お礼

ありがとうございます。

遷移せずに、今表示しているページそのものを置き換えるのですね。
すみません、どうも勘違いしていたみいです（汗

ライブラリについては
JavaScriptの機能セットなのですね。

Ajaxとても面白いです。
いろいろと教えていただき、ありがとうございます。