トップ 差分 一覧 ソース 検索 ヘルプ PDF RSS ログイン

Ajax

[カテゴリ:基礎技術]

始めに

1週間ほど前に作っていたJavaScript+XML+DOMを使ったとあるプログラムで「XMLHttpRequest」を使おうかとふと頭をよぎり、いろいろと調査していたところ、『Ajax』なるものを見つけました。

最近話題になってるんですね。
いろいろと調べてみましたが、『Ajax』という名前が与えられたがゆえに話題になってる感はぬぐえません・・・
「名付け親が偉い!」、そして実装した「Googleが偉い!」と思いました。

Jax(←そんな言葉ありません^^;)ならやったことあるんですけどね。

Ajax』の『A』、Asynchronous が肝ですね。
過去、もっと大量のデータを処理する要件があれば『A』の利用も考えていたかも?
それとも「そんなの実現無理だ〜」ってあきらめてたかも?

Ajaxって何だ?

adaptive path - Ajax: A New Approach to Web Applications(英)
http://www.adaptivepath.com/publications/essays/archives/000385.php

antipop2.0 - Ajax: Web アプリケーション開発の新しいアプローチ(上URLの日本語訳)
http://antipop.zapto.org/docs/translations/ajax.html

Ajax とは "Asynchronous JavaScript + XML" の略称

Ajax は技術そのものではない。それは、それぞれに繁栄している様々な技術を、新しいやり方で強力に組み合わせることなのだ。Ajax は次の技術の組み合わせである。

・XHTML と CSS を用いた、Web 標準に基づくプレゼンテーション

・Document Object Model によるダイナミックな表示と相互作用

・XML と XSLT による、データの変換や操作

・XMLHttpRequest による、データの非同期的な取得

・それらを JavaScript によって結びつける

実用レベルになっているAjaxなサービス

Google Maps
# JavaScriptだけでこれを実現してるのは脱帽ですね。。。
http://maps.google.com/

Google Suggest(日本語版ベータ)
# 見た目はいつものGoogleですが、検索文字を入力してみると。。。ね。
http://www.google.co.jp/webhp?complete=1&hl=ja

マピオンラボ
# 会員登録しないと見れないみたいだけど、いい感じみたいですね。
http://lab.mapion.co.jp/

訳GO.com
# 日英/英日辞書を Google Suggest っぽく色づけ。
http://www.yakugo.com/WebHint/Quick.aspx

最速インターフェース研究会 - 2chスレッド最速検索
# 個人サイト。テストっぽいですけど、すごいので載せちゃいました。。
http://x.ma.la/

Widegle-Ajax ALPHA
# 個人サイト。一画面閲覧型の検索ユーザーインターフェイス実験サイトのAjax
http://cafe.eyln.com/x/widegle/

個人的まとめ

現行手法との違い

現在の一般的な手法では・・・

  • Webにおける画面の更新は『HTTPにおけるGET、POSTタイミングと同じ』である。(=同期的な動き)
  • 『ボタンやリンクをクリックしたタイミング』に支配されていることを意味する。
  • 『ユーザがクリックという操作を行うまでは待機状態である』

Ajaxな手法を積極的に活用することで・・・

  • HTTPのGET、POSTの呪縛から解放される。(=非同期な動き)

ようは 『ブラウザの能力が向上してきたので、今までサーバに任せていた処理の一部をブラウザにまかせてしまおう!』ということです。(と理解しました^^;)

Ajaxな手法の暗黒面

  • クロスブラウザでの開発の難しさ。(これは従来のWeb開発でもありますね)
  • 非同期で開発することの難しさ。(処理が直列でなくなりますから…)
  • サーバ、クライアントの役割分担の難しさ。

歴史は繰り返す・・・

サーバ、クライアントの役割の綱引きで、またクライアント側に役割が回ってきたということですね。

ブラウザの位置付けの変化

<現行>
 +----------+----------+----------+
 |JavaApplet|  Flash   |Shockwave |←ユーザI/F
 +----------+----------+----------+
 |            ブラウザ            |
 +--------------------------------+
<Ajaxの出現により>
 +----------+----------+----------+----------+
 |JavaApplet|  Flash   |Shockwave |   Ajax   |←ユーザI/F
 +----------+----------+----------+..........|
 |            ブラウザ                       |
 +-------------------------------------------+
  • 現状のシェアとしては「Flash>Shockwave>JavaApplet」かな。
  • Ajaxは特別なプラグイン不要というのがかなり大きな利点だと思います。
  • Ajaxがどこまで食い込めるか楽しみですね。
大昔:「サーバで集中処理」ユーザはサーバにつながったリモート端末で操作
小昔:「クライアント(UI担当)+サーバ(DB担当)」
現在:「ブラウザ+アプリサーバ+DBサーバ」
将来?:「ブラウザ(Ajax)+(アプリサーバ兼DBサーバ)」アプリサーバが小さくなり、小昔へ戻る???

どの技術を組み合わせるか?

Ajaxは既存技術の組合せであるので、どのような構成にするかは開発者の選択に任されている。

+--------+                        +--------+
|        |    (1)データ要求       |        |
|        |→→→→→→→→→→→→|        |
|ブラウザ|←←←←←←←←←←←←| サーバ |
|        |    (2)データ応答       |        |
|        |                        |        |
+--------+                        +--------+
(3)再描画
  • (1)(2)
    • XMLHttpRequestを使用する。
    • iframeを使用する方法もあるみたい。
    • 同期/非同期の制御のやりやすさではXMLHttpRequestがよいみたい。
    • ようはRPCなわけで・・・真面目に実装するとSOAP、XML-RPCになったりするのかもね。。。
    • まぁ、ブラウザ・サーバ間でのみ意思疎通できればよいので、現状は独自フォーマットでやり取りしてますね。
  • (3)
    • (2)でどのようなデータをもらうかにもよるが・・・
    • HTMLでデータもらったら、そのままinnerHTMLでぶっこめる。
    • XMLでデータをもらい、XSLTで整形してinnerHTMLでぶっこむとか。
    • XMLでデータをもらい、DOMで解析して必要なところを抜き出し、HTML作ってinnerHTMLでぶっこむとか。

というようにそれぞれ一長一短で「Ajaxと言えばこうでしょう」というものは今のところ無い。

難しいところを何とかしようという試み

Ajaxの手法をとったときに難しいであろうところを解決できるかもしれないヒントのまとめ

XMLHttpRequest関連

Hawk's W3 Laboratory - XMLHttpRequestについて(日本語)
# 各種ブラウザのXMLHttpRequestの挙動について解説
http://www.hawk.34sp.com/stdpls/xml/xmlhttprequest.html

libXmlRequest Library(英語)
# XMLHttpRequestの各種ブラウザ対応のライブラリ
http://www.whitefrost.com/servlet/connector?file=reference/2003/06/17/libXmlRequest.html

jsolait.net - JavaScript O Lait - Module urllib(英語)
# XMLHttpRequestの各種ブラウザ対応のライブラリ
http://jsolait.net/doc/urllib.xhtml

JavaScriptによるHTML生成関連

TrimPath - JavaScriptTemplates(英語)
# HTMLテンプレートにJSTのタグを書いておき、データと合成することで動的なHTMLを生成できる。
# JSP、ASPのJS版みたいなかんじ。
# クライアントでHTMLを生成するときにつかえば、楽できるかも。
http://trimpath.com/project/wiki/JavaScriptTemplates

JavaScriptによるRPC関連

JSON - JavaScript Object Notation (英語)
# JSデータのシリアライズ化を目的としたシンプル(テキスト形式)な仕様
# サーバからJSON形式のデータを返すようにすれば、ブラウザ側で楽できそう。
http://www.crockford.com/JSON/index.html

json-rpc.org(英語)
# JavaScriptによる、JSON-RPCの実装
http://json-rpc.org/
http://jsolait.net/doc/jsonrpc.xhtml

どんぞこ日誌 - 2005/3/16
# JSON-RPCのperlサーバ側の実装
http://www.donzoko.net/cgi-bin/tdiary/20050316.html

vcXMLRPC Library - XML-RPC Implementation in Javascript(英語)
# JavaScriptによる、XML-RPCの実装
http://www.vcdn.org/Public/XMLRPC/

jsolait.net - JavaScript O Lait - Module xmlrpc
# JavaScriptによる、XML-RPCの実装
http://jsolait.net/doc/xmlrpc.xhtml

Ajaxネタ収集元

javascript:xmlhttprequest [JPSPAN](英語)
http://jpspan.sourceforge.net/wiki/doku.php?id=javascript:xmlhttprequest

最速インターフェース研究会(日本語)
http://la.ma.la/blog/

antipop2.0(日本語)
http://antipop.zapto.org/mt/

blog.bulknews.net(日本語)
http://blog.bulknews.net/mt/mt-search.cgi?IncludeBlogs=1&search=Ajax

Ajaxに関する記事など

最速インターフェース研究会 - GoogleMaps
http://ma.la/mirrorman/wiki.cgi/GoogleMaps

nazonoDiary - Google Mapsとマピオンラボ(CODEGURIGURI)
http://d.hatena.ne.jp/nazoking/20050209#1107903727


最終更新時間:2007年06月14日 19時00分15秒