Blog

AJAXとは

2007年3月4日

Ajaxについては、検索すればいくらでも情報があり、プログラマーではない僕でもなんとなく理解することができます。でもこれを実際に作る事を考えると、プログラミングをしない僕にはどうすればいいかまったく見当もつかず、サーバーサイドのプログラム言語は何を使うの?Javascriptで処理するデータフォーマットはXML?やっぱりセキュリティー上危険が多いの?といった数々の疑問が浮かんでくるかと思います。そうなるとかなりの情報を調べないといけないことに気づかされます。

そこで自分の頭の整理のためにも基本的な

という観点から整理してみようと思います。

この記事の内容

AJAXとは何か

DHTMLとAJAX

まず最初にAJAXとDHTML(Javascript+HTML+CSSなどクライアントサイドでの処理手法)の違いを理解する必要があります。AJAX とはサーバーサイドのデータとの非同期通信であり、DHTMLはJavascript によってクライアントサイドのデータを操作する事だという違いがあります。

使用するデータフォーマット(XML、データベース、etc..)について

AjaxはAsynchronous (エイシンクロナス/アシンクロナス、非同期) JavaScript + XML の略なのでXMLを使用するのが当たり前だと思ってしまいがちですが、一般的なWEBサービスではデータはデータベースに蓄積されていてPHPなどからSQL文を使って引き出すのがスタンダードです。

しかし非同期にデータを(X)HTMLに出力したりデータを送信したりするためにはJavascriptでデータを処理する必要があります。Javascriptで処理できるデータにはテキストファイル、(X)HTML、XML、JSONなどがあります。

非同期にデータを扱う場合、XMLのデータはセキュリティーの関係で同一ドメイン、同一サーバーの物しか扱えないという制約があります。しかし一般的にデータを同一ドメイン、同一サーバーに置いてあることはまずないと思います。そこで別ドメイン、別サーバーのデータを使うクロスドメイン対策が必要になります。

一番スタンダードな方法がデータベースの情報をPHPなどのサーバーサイドプログラム言語でXMLのフォーマットで生成し、クライアントサイドにJSON形式に変換することになります。Jkl-parsexml.jsというXMLをJSONに変換する便利なライブラリがありますので、こういったライブラリを使用する方法などもあります。

しかし、サーバーサイドプログラムの知識を持たない僕ではなかなかAJAXを活用することができません。そこでサーバーを通さず、クライアントサイドのみでクロスドメインでの使用もできることで人気あるのがJSONP(JSON+Padding)です。GoogleやAmazonなども最近はこのJSONPを扱っています。簡単に説明するとJSONデータに少しの記述を付けてJavascriptで関数として呼び出すという事です。XMLをサーバーに通したりしてもいいのですが、こちらのほうがスマートだという事で人気があるのかもしれません。

この方法だとサーバーサイドの技術がなくとも簡単にAmazonやソーシャルメディアのデータを使ったAJAXのシステムを簡単に作ることができますね。

AJAXのサービスを展開するには何の知識が必要か

必須になるプログラム言語はJavascript、サーバーサイドとの通信を行うためにPHP、RUBY、JAVAなどのサーバーサイドプログラム言語とデータベースとの接続のためにSQLも覚えておかなければなりません。その他Javascriptで(X)HTMLやCSSを操作しなければならないので、(X)HTML、CSSも覚えておかなければならないでしょう。

どういう危険性があるか 

AJAXはデータをクライアントサイドで処理するためにセキュリティ上大変危険です。なぜかというとブラウザのURLが表示されていうる部分にJavascriptを記述すると実行されてしまうため、ユーザー情報などが漏れてしまうことや、GmailなどのAJAXを利用したサービスのメールでプレビューを実行した時にユーザー情報を非同期通信を利用してデータをハックされる問題などがあります。※Gmailの問題は既に解決しています。
そのためにはデータの扱いを暗号化することやPHPなどのサーバーサイドプログラムで危険を回避するエスケープなどの処理をする必要性や、ログインを設けて、ユーザーのデータとその他のパブリック向けのデータを振り分けておく対策などのセキュリティー対策が必要になってきます。