Ajax非同期通信 †

・Ajaxとは「Asynchronous JavaScript and XML」の略で、一言で言えば「画面遷移を使わない非同期データ処理」。
　具体的には、JavaScriptの組み込みクラス（XMLHttpRequest）を利用してブラウザのHTTPによるページ遷移とは非同期に
　サーバとやりとりして「動的に」ページ内容を変更する仕組み。
　（Ajaxという技術が存在しているわけではなく。上記の既存技術の組み合わせの事をAjaxと呼ぶ。）

　XMLで通信した場合、データを取り出す為のDOM操作のコードが煩雑になりがだが、
　JKL.ParseXML( http://www.kawa.net/works/js/jkl/parsexml.html ) を使うとXMLを配列に展開でき、比較的簡単に操作が記述できる。

　※以前にiframeとjavaScriptのFunctionオブジェクトを利用して非同期通信をする画面を作った事があるが
　　あれも１種のAjaxといえるのかも。。

◆メイン画面（呼び出し側）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Expires" content="Mon,  1 Jan 1990 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<title>Ajaxサンプル</title>
<script src="./script.js"  language="javascript"></script>
<script>
<!--
ajax = false;

// IE以外
if(window.XMLHttpRequest) {
　　　ajax = new XMLHttpRequest();
// IE用
} else if(window.ActiveXObject) {
　　　try {
　　　　　　ajax = new ActiveXObject("Msxml2.XMLHTTP");
　　　} catch(e) {
　　　　　　ajax = new ActiveXObject("Microsoft.XMLHTTP");
　　　}
}

var no = 0;
function getData(objID) {

	serverURL = 'sample_ajax_getdata.php';

	no = no + 1;

	serverURL = serverURL + '?rid=' + no;
	ajax.open("POST",serverURL);
	ajax.onreadystatechange = function() {
		if (ajax.readyState == 4 && ajax.status == 200) {
			var obj = document.getElementById(objID);
			obj.innerHTML = ajax.responseText;
		}
	}
	ajax.send(null);
}
// -->
</script>
</head>
<body>

<form>
<input type=button value="取得＆書き換え" onClick="getData('maintext'); return false;">
</form>

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

</body>
</html>


◆呼び出される側

<?php
echo "ボタンが押されました";
?>

※XMLデータを返すような処理にしておけば複数行のデータなども扱える。 　（但し、JavaScriptの処理がちょっとメンドクなるが。。）

これだけだとあまりにもつまらないのでXMLデータをやりとりする処理も作ってみる。
　└ &ref(): File not found: "index.php?plugin=attach&pcmd=open&file=sample_ajax.php&refer=Ajax%C8%F3%C6%B1%B4%FC%C4%CC%BF%AE&require=1" at page "Ajax非同期通信";
　　（汎用機とか古いシステムでありがちな処理。） JKL.ParseXMLを使えばもっとスマートに書けそうだ。

※参考：http://developer.apple.com/internet/webcontent/xmlhttpreq.html
添付ファイル: filesample_ajax_getdata.php 93件 [詳細] filesample_ajax.php 140件 [詳細]
トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2009-06-11 (木) 00:48:26 (5426d)