Ajaxの世界観

Ajaxに関する世界観です。

Ajax

Ajaxを上手く使うことで、WebサービスでもGUIアプリケーションに負けない操作性を持ったアプリケーションを作ることができます。

きっかけは、Google Mapsのような、Webサービスなのにボタンやリンクが備わっていて、インタラクティブに操作・反応するWebアプリケーションの登場です。

そのごろは、XMLHttpRequestとXMLを上手く使うことで、Google Mapsのような操作性を実現していました。今では、JSONを使ったり、時にはjQueryを使うこともあります。

Ajaxの特徴は、「インタラクティブ」であることと、その上で「非同期にサーバーとデータをやり取りする」ということです。

JavaScriptとDOMを用いて、ページ遷移だけではなく、さまざまなボタンやクリックに反応して、インタラクティブにマウスなどの操作に反応する、という、「GUIと同じことをHTMLとJavaScriptでやる」というのが、まず重要です。

そして、インタラクティブな操作の中で、非同期にサーバーとデータをやり取りします。これにより、アメリカの地図を拡大した時に、ページ遷移は起きず、ブラウザの地図の描画領域の中に、拡大したアメリカの地図を、サーバーから非同期にダウンロードして、それを表示します。

この非同期のデータのやり取りのために、XMLHttpRequestを使います。また、データの形式にはXMLあるいはJSONを使います。

Ajaxは非同期通信の技術で、Google Mapsなどに使われている。最近はXMLよりJSONが使われることが多い。

基本的に、JavaScriptとXML/JSONを用いて、XMLHttpRequest APIを利用する。

技術	説明
XMLHttpRequest	ブラウザとサーバーの間でHTTP通信を行うAPI。
DOM	XMLをツリー構造のドキュメントモデルで操作することのできるAPI。
XML/JSON	Ajaxで使われることの多いデータ形式。最近はXMLよりJSONというデータ形式が使われることが多い。

また、素のJavaScriptを触らなくても、jQueryやJavaScriptフレームワークを用いてAjaxを行うことも一般的である。あるいはRuby on Railsなどの機能を使う方法もある。

基本的に、最初にvar xhr = new XMLHttpRequest()とする。

xhrに対して、xhr.open()で'GET'とサーバのURL（データが格納されている場所）を設定し、xhr.setRequestHeader()でリクエストヘッダを指定し、xhr.send()でリクエストを送信する。

レスポンスに対して、テキストの場合は、xhr.responseTextが得られる。

XMLの場合は、var xml = xhr.responseXMLを得た後で、DOM操作を使って要素の値にアクセスする。

JSONの場合は、var json = JSON.parse(xhr.responseText)とする。ここでJSONデータは、

{ "hoge": "Hoge" }

となっているとする。この状態でjson.hogeにアクセスすると値"Hoge"が得られる。