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

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








スポンサーサイト 

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

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

Webの新しい風 Ajaxを使ってみる 

Webアプリケーションに新しい道が拓かれたか?
Part2:試用編


「@IT 古くて新しいAjaxの真実を見極める」を読んで

■全体手順
Ajax(Asynchronous JavaScript and XM)は、その名の通り JacaScriptとXMLから成り立っている。
JavaScripptで XMLHttpRequestを作成し、サーバとの通信を行い、取得したデータをJavaScriptでHTMLに反映する。


■Ajax利用手順1
XMLHttpRequestオブジェクトを作成する。
とはいえプラグインのダウンロードやインストールは必要ない。
しかし、少し厄介なことに、XMLHttpRequestオブジェクトはIEとその他のブラウザで作成方法が異なっている。
(以下の内容についてはhttp://web.paulownia.jp/script/ajax/xmlhttp2.htmlを参照)

また、XMLHttpRequestオブジェクトは、IE4,5の時代からActiveXとして提供されていたらしく、IEのバージョンによってオブジェクトの違いがあるとのこと。また厄介だと思っていたら、new ActiveXObject("Microsoft.XMLHTTP") でIEのバージョンに関係なく作成できるらしい。
従って、IEとそれ以外のブラウザの二通りの作成方法を実装する。

XMLHttpRequestオブジェクト作成関数
function createAjax(){
// IE用
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
// IE以外
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}

■Ajax利用手順2
サーバと通信してデータを取得するメイン関数を作る。
引数で指定されたサーバ上のファイルの内容を取得し、ページの表示エリアの中身を変更する。
XMLHttpRequestオブジェクト名は objAjax
表示エリアは displayArea
XMLHttpRequestメイン関数
function getData(serverURL) {
xmlhttp.open("GET", serverURL);
  if xmlhttp.onreadystatechange = function() {
   if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
   displayArea.innerHTML = xmlhttp.responseText;
  }
}
  xmlhttp.send(null);
}


■Ajax利用手順3
XMLHttpRequestオブジェクトから読み込み状態が変化したとき(onreadystatechange )に呼ばれる関数と通信完了時に結果を反映する関数を作る

XMLHttpRequestオブジェクトのステータス
4 で読み込み完了
200 でファイルの正常取得
関数内で上記ステータスをチェックして、この2つの条件をを満たした場合にHTMLに反映

//XMLHttpRequest通信状態監視&結果反映関数
function finishAjax() {
if ( objAjax.readyState == 4 && objAjax.status == 200) {
  displayArea.innerHTML = objAjax.responseText;
}
}


■Ajax利用手順4
Ajaxを使うHTMLを作成
ページには、Ajaxを実行するためのボタンが1つ
onClickイベントでJavaScriptのXMLHttpRequest通信&結果反映関数を呼ぶ

■最終的に出来あがった簡単簡素AJaxHTML
<html>
<head>
<title>Ajax Simple Sample</title>
<script language="javascript">
<!--

//XMLHttpRequestメイン関数
function mainAjax(serverURL) {
objAjax = createAjax();
objAjax.open("GET", serverURL);
  objAjax.onreadystatechange = finishAjax;
  objAjax.send(null);
}

// XMLHttpRequestオブジェクト作成関数
function createAjax(){
// IE用
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
// IE以外
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}

//XMLHttpRequest通信状態監視&結果反映関数
function finishAjax() {
if ( objAjax.readyState == 4 && objAjax.status == 200) {
  displayArea.innerHTML = objAjax.responseText;
}
}
// -->
</script>
</head>
<body>
<form>
<input type=button value="XMLHttpRequest通信&結果反映" onClick="mainAjax('test.txt'); return false;">
</form>

<hr>
<div id="displayArea"><p>ボタンを押すとこのテキストが書き換わります。</p></div>
</body>
</html>

Ajax Simple Sample


■サンプルを作ってみた時点のAjaxへの感想
簡単に利用できる → JavaScriptは比較的簡単に書ける
資料となるサイトが思ったより少ない → XMLHttpRequestを理解する必要があるが、参考になるサイトが少ない
文字コードやMIMEタイプの扱いが大変 → 実はサンプルも漢字コードには対応していない

OnClickでの取得だと Ajaxのありがたみが分かりにくい。周りに見せても、イマイチ反応が少ない。時間があったら、入力値に対応して通信をするような見本を作ります。今日はここまで。


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

コメントの投稿













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

トラックバック

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








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