診断士の経営視点とSEのシステム技術の両面からIT・システム開発・Web技術+アウトドア情報を提供しています

トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報








スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[--------] スポンサー広告 | |

Webの新しい風 Ajaxの仕組み 

Webアプリケーションに新しい道が拓かれたか?
Part3:仕組み編


前回はとりあえずAjaxを使ってみることを優先したが、今回は少しAjaxの仕組みについて調べることにした。

ALL ABOUT 「Ajaxはじめの一歩 XMLHttpRequest」 を参考にさせていただき、前回のソースに手を入れて、改良を図る。

■AjaxはJavaScritptを使って、XMLオブジェクトであるXMLHttpRequestオブジェクトを操作し、ブラウザとサーバの非同期通信を行う仕組みである。
従って、XMLHttpRequestの仕組みを理解する必要がある。

■XMLHttpRequestの処理の流れ
郵便番号をブラウザからサーバに送信し、サーバで該当する住所を検索し、返信された住所をブラウザで表示する という流れをXMLHttpRequestに沿ってチャート化する

1.XMLHttpRequest オブジェクト生成
   ↓
2.open メソッド
   ↓
3.send メソッド (データ送信)
   ↓
(サーバー側が処理を行う)
   ↓
4.受信状態監視&終了検知
   ↓
5.受信データの処理

4の受信状態監視は、IEでは onreadystatechange イベントのみが使える。IE以外では onloadイベントが使え、このイベントが使えると、受信終了時にコールバックされるので処理が簡単になるようだがIEははずせない。残念。

では、上記のチャートに従って、処理を書いていく。
(前回作成した関数とHTMLを元に、修正、変更を加える。)

■1.XMLHttpRequest オブジェクト生成
IEとそれ以外のブラウザの分けて、XMLHttpRequestオブジェクトを生成して返す。生成に失敗すればnullを返す。

XMLHttpRequestオブジェクト作成関数
function createXMLHttpRequest(){
// fro IE
if (window.ActiveXObject) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (ex) {
alert("createXMLHttpRequest : IE Create Error");
}
// for Not IE
} else if (window.XMLHttpRequest) {
try {
return new XMLHttpRequest();
} catch (ex) {
alert("createXMLHttpRequest : Not IE Create Error");
}
} else {
alert("createXMLHttpRequest : No Object");
return null;
}
}

IEのXMLHttpRequestオブジェクトのもバージョンの違いがあるようだが、new ActiveXObject("Microsoft.XMLHTTP") で作成できるとのことなので、統一しておく。

■2.open メソッド
送信方法(Method POST/GET)、送信先サーバのURL、同期モードの設定を行う。
サーバURLはHTMLのあるサーバのみという制限がある。
同期モード ture:非同期 false:同期
同期にすると通信が完了するまで操作はできなくなる。Ajaxの効果を実感するため非同期にする。
open(Method, 送信先URL, 同期モード)

XMLHttpRequestをオープンするスクリプト
XMLHttpRequest.open("GET", serverURL, true);


■3.send メソッド (データ送信)
ブラウザからサーバにリクエストを送信する。
郵便番号を送信して、住所を得たいときは、郵便番号を引数として渡すが、ここではまだ何も設定しない。NULLを設定している例もあるが引用サイトによると特定のブラウザ問題が起こるようなので、’’とする。
  XMLHttpRequest.send('');

■(サーバー側が処理を行う)
ブラウザからのリクエストを受け取ったサーバは処理を開始する。

■4.受信状態監視
ブラウザはサーバの処理が終わり、返信が返ってくるのを待つ。
具体的にはXMLHttpRequestオブジェクトの受信状態変化イベントに、受信状態監視関数を設定する。
前述の通り、IEでは onreadystatechange イベントしか使えない。

XMLHttpRequestのonreadystatechangeイベントへの関数を記述し、受信結果反映関数を呼ぶ
XMLHttpRequest.onreadystatechange = function() {
if ( XMLHttpRequest.readyState == 4 ) {
if ( XMLHttpRequest.status == 200) {
結果反映関数;
}
}
}

XMLHttpRequest.readyStateが 4:読み込み完了
かつ
XMLHttpRequest.statusが 200:ファイルの正常取得 なとき、オブジェクトを引数にして結果反映関数を呼ぶ

■5.受信データの処理
画面下の DisplayArea にテキストを追加
XMLHttpRequest受信結果反映関数
function resultFunction(objAjax) {
displayArea.innerHTML = displayArea.innerHTML + objAjax.responseText;
}


■完成したサンプルHTML
前回はボタンをクリックした結果としてサーバのファイルを取得していたので、イマイチ驚きにかけていた。今回は参照サイトで後で出てくるように、テキストの上にマウスを乗せると、サーバのファイルを取得して、画面に追加するようにした。
参考にしたサイトでは、チャートの3send は 4受信状態監視の後に置かないとIEで動作しない とあるが、当方で確認したところ、動作したのでチャートの順にしてある。

サンプルHTMLを実行する


<html>
<head>
<title>Ajax Simple Sample</title>
<script language="javascript">
<!--
// XMLHttpRequestメイン関数
// data : サーバに送信するデータ
// method : 送信メソッドを示す文字列 POST / GET
// fileName : サーバから取得するファイルの名前
// async : 非同期モード 非同期 true 同期 false
// result : 受信した結果に対する処理を行う関数
function mainXMLHttpRequest(data, method, fileName, async, resultFunction) {
// XMLHttpRequest作成 ローカル変数
var objAjax = createXMLHttpRequest();

// XMLHttpRequestオープン
objAjax.open(method, fileName, async);

// XMLHttpRequest送信 IEでは受信状態監視の後に置くこと
  objAjax.send(data);

//XMLHttpRequest受信状態監視
objAjax.onreadystatechange = function() {
if ( objAjax.readyState == 4 ) {
if ( objAjax.status == 200) {
// 受信結果処理関数
resultFunction(objAjax);
}
}
}
}

// XMLHttpRequestオブジェクト作成関数
function createXMLHttpRequest(){
// fro IE
if (window.ActiveXObject) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (ex) {
alert("createXMLHttpRequest : IE Create Error");
}
// for Not IE
} else if (window.XMLHttpRequest) {
try {
return new XMLHttpRequest();
} catch (ex) {
alert("createXMLHttpRequest : Not IE Create Error");
}
} else {
alert("createXMLHttpRequest : No Object");
return null;
}
}

// XMLHttpRequest受信結果反映関数
function dispData(obj) {
displayArea.innerHTML = obj.responseText;
}
// -->
</script>
</head>
<body>
<form>
<input type="text" value="File A"
onMousemove="mainXMLHttpRequest('','GET', 'testA.txt', true
,dispData); return false;">
<input type="text" value="File B"
onMousemove="mainXMLHttpRequest('','GET', 'testB.txt', true
, dispData); return false;">
<input type="text" value="File C"
onMousemove="mainXMLHttpRequest('','GET', 'testC.txt', true
, dispData); return false;">
<input type="text" value="File Clear"
onMousemove="mainXMLHttpRequest('','GET', 'testClear.txt', true
, dispData); return false;">
</form>

<hr>
<div id="displayArea"><p>
テキストボックスの上にマウスを乗せると、
ここにサーバのテキストが表示されます。
</p></div>
</body>
</html>



[2005-08-12] システム開発 | TB(0) | CM(0)

コメントの投稿













管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://wiz2.blog16.fc2.com/tb.php/6-307f672e








トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。