Ajaxの覚え書き＠じゅえ - 各ライブラリを使ったサンプル集

このサイトについて

このサイトは、The Yahoo! User Interface Library(YUI)、Ext JS、Dojo ToolkitなどのAjaxライブラリやGoogle AJAX APIを用いて作成したAjaxのサンプルやRich Internet Applications(RIA)のサンプルを公開しています。
詳細については、このサイトについてをご覧下さい。

公開しているサンプルを追加・更新した場合は、 RSSフィードおよび管理者ブログにてお知らせします。

掲載中のAjaxサンプル集

Ajaxとは？

Ajaxとは、Asynchronous(非同期) + JavaScript + XMLの略で、ブラウザに実装されているHTTP通信機能(XMLHttpRequest)を使ってブラウザとサーバとの間でXMLデータのやり取りで処理を行う技術のことです。

Ajaxの動作を実感するために、まずは下の「XHR実行」ボタンを押してみて下さい。
テキストエリアが表示され、Ajaxによって読み込まれたテキストファイルに書かれた内容がそこに表示されると思います。

Ajaxを実現するJavaScriptは下記のように記述しています。
function createHttpRequest() { // ブラウザがWindows IEの場合 if (window.ActiveXObject) { try { // MSXML2以降 return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { // 旧MSXML return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { return null; } } } // XMLHttpRequestオブジェクトが実装されているブラウザの場合 else if (window.XMLHttpRequest) { return new XMLHttpRequest(); } // 上記以外のブラウザの場合 else { return null; } } function requestFile(data, method, fileName, async) { // XMLHttpRequestオブジェクトの生成 var httpObj = createHttpRequest(); // openメソッドの呼び出し httpObj.open(method, fileName, async); // 受信イベントハンドラ httpObj.onreadystatechange = function() { // 正常に受信が完了した場合 if ((httpObj.readyState == 4) && (httpObj.status == 200)) { handleSuccess(httpObj); // コールバック } }; // sendメソッドの呼び出し httpObj.send(data); } function handleSuccess(obj) { var data = obj.responseText; // <div id="result">要素の取得 var resultObj = document.getElementById("result"); // テキストエリアの生成 var textareaObj = document.createElement("textarea"); textareaObj.setAttribute("cols", "50"); textareaObj.setAttribute("rows", "3"); textareaObj.setAttribute("readonly", "readonly"); textareaObj.value = data; // テキストエリアを<div id="result">要素の子要素として追加 if (resultObj.firstChild) { resultObj.replaceChild(textareaObj, resultObj.firstChild); } else { resultObj.appendChild(textareaObj); } }

また、「XHR実行」ボタンが押されたら
requestFile("", "GET", "/data/xhr.txt", true); を実行して、Ajaxによってテキストファイルを読み込むようにしています。

requestFile()メソッドは正常にテキストファイルが読み込まれると、handleSuccess()メソッドが呼び出され、このメソッドでテキストエリアを表示する処理を行います。

なお、handleSuccess()メソッドのようなメソッドのことをコールバックメソッドと言います。

Ajaxライブラリについて

上記のAjaxを実現するJavaScriptのcreateHttpRequest()メソッドを見ると分かりますが、ブラウザの種類によってその仕様が異なるため、どのブラウザでも同様に動作するようにJavaScriptを記述する必要があります(クロスブラウザ問題)。

またhandleSuccess()メソッドに記述してあるように、DOM(ドキュメント・オブジェクト・モデル)を使ってXML(HTML)文書処理を行う場合、冗長になりやすいという問題があります。

Ajaxライブラリを使用すると、基本的にこれらの問題を解決してより簡便に各処理を実装することができるようになります。
またライブラリによってはグリッド表示やツリー表示あるいはグラフを表示する等、リッチなユーザインタフェースを作成することが可能になります。

代表的なAjaxライブラリの公式サイトを挙げておきます。

Ajaxの覚え書き＠じゅえトップページ

このサイトについて

掲載中のAjaxサンプル集

Ajaxとは？

Ajaxライブラリについて

Ajaxライブラリの関連サイト

Ajaxの覚え書き＠じゅえ トップページ

このサイトについて

掲載中のAjaxサンプル集

Ajaxとは？

Ajaxライブラリについて

Ajaxライブラリの関連サイト

Ajaxの覚え書き＠じゅえトップページ