|
1. Ajaxの基本2006.02.23 株式会社四次元データ 藤本将光
Ajax 1章 Ajaxの基本
本章では、Ajaxの概要を述べ、非本的な通信の流れについて説明します。また、実際の簡単なサンプルを見ながら、Ajaxの仕組みについて解説しています。 1.1. Ajaxとは？Ajax とは、Asynchronous JavaScript + XMLの略称です。 HTTP通信を実行するためのJavaScript の組み込みクラスである XMLHttpRequest を利用して非同期通信を行うと、非常にユーザビリティの高いインタフェースが構築可能となります。Ajax はこの技術そのものを指すわけではなく、実際には、DHTML (JavaScript、CSS、DOM) や XMLHttpRequest、 サーバーサイドのウェブアプリケーションなどを組み合わせることを指しています。 これまではサーバとの通信時(レスポンスの受信時)には必ず画面遷移が発生していました。Ajax はこの通信部分を裏側で行い、取得した情報を画面遷移なしで提供することで、ユーザに通信していることを感じさせずに情報を利用させることに成功しているのです。 Ajax を用いて構築されたインタフェースの代表として Google Suggest や Google Maps が挙げられます。 1.2. XMLHttpRequest を利用した通信の流れ基本的には、サーバー側へリクエストを送り、responseTextまたは、responseXML プロパティによってサーバーが持つデータファイルでを受信する仕組みです。 以下に、基本的な通信の流れを示します。
1.3. 簡単なサンプルでは、実際のサンプルを見てみましょう。 このサンプルは、非同期通信によって、テキストファイルの中身を取ってくるものです。 「4DD」のボタンにマウスを乗せ、「4DD Company」のボタンをクリックして下さい。 上記の例では、「4DD」のボタンにマウスが乗っているときは、サーバー上ののテキストファイルから非同期通信でテキストを取得し、「4DD company」のボタンをクリックすると、取得したデータがテキストエリア内に表示されます。 以下にサンプルのソースを示します。 （サンプルのソース） <head>
<script language="JavaScript">
<!--
function createHttpRequest()・・・ (1) XMLHttpRequestオブジェクトの作成
{
if(window.ActiveXObject) ・・・Windows e4,e5,e6用
{
try {
return new ActiveXObject("Msxml2.XMLHTTP") ;
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
return null ;
}
}
} else if(window.XMLHttpRequest) ・・・Win Mac Linux m1,f1,o8 Mac s1 Linux k3用
{
return new XMLHttpRequest() ;
} else {
return null ;
}
}
function getData(pageURL) ・・・ (2) 送信時の関数の設定
{
oj = createHttpRequest();
if (oj)
{
oj.onreadystatechange = setPageData;
・・・ (3) onreadystate値が変化した際に、setPageData関数を呼び出す
oj.open('GET', pageURL,true); ・・・ (4) オープンメソッド
oj.send(null); ・・・ (5) センドメソッド
}else{
alert("XMLHttpRequest失敗");
}
}
var restext;
function setPageData()
{
if (oj.readyState == 4 && oj.status == 200 ) ・・・ (6) データ受信時の設定
{
restext = oj.responseText; ・・・ (7) responseTextによるテキストデータの取得
}
}
function writeText()
{
document.myArea.result.value += restext+"\n";
}
//-->
</script>
</head>
<form name="myArea">
<input type="button" value="4DD" onmouseover="getData (’添付ファイルのURL’)"><br>
<input type="button" value="4DD Company" onClick="writeText()"><br>
<textarea rows="10" cols="30" type="text" name="result" ></textarea>
</form>
このサンプルでは、リクエストの送信時に、onreadystateプロパティが変化したとき、setPageData関数の呼び出し（値は返さない）を設定し、利用しています。 （4）や（5）において、リクエストをopen,あるいはsendする際に、readystateが変化するので、この際に、（3）によって、setPageData関数が呼び出されます。 なお、readystateプロパティは0から4を示し、それぞれ0：読み込み中、1：初期化されていない状態、2：読み込み完了、3：制御可能、4：完了 を示しています。 注） 受信完了に oj.status==200を使用しているが、これはサーバーを介した通信時のみ有効である。
|
|
