Ajax非同期通信の変更点 - 闘うITエンジニアの覚え書き

追加された行はこの色です。
削除された行はこの色です。
Ajax非同期通信へ行く。
* Ajax非同期通信 [#h69004e9]

・Ajaxとは「Asynchronous JavaScript and XML」の略で、一言で言えば「画面遷移を使わない非同期データ処理」。~
　具体的には、JavaScriptの組み込みクラス（XMLHttpRequest）を利用してブラウザのHTTPによるページ遷移とは非同期に~
　サーバとやりとりして「動的に」ページ内容を変更する仕組み。~
　（Ajaxという技術が存在しているわけではなく。上記の既存技術の組み合わせの事をAjaxと呼ぶ。）~
 
　XMLで通信した場合、データを取り出す為のDOM操作のコードが煩雑になりがだが、~
　JKL.ParseXML( http&#58;//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>
&br;
◆呼び出される側
 <?php
 echo "ボタンが押されました";
 ?>

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

これだけだとあまりにもつまらないのでXMLデータをやりとりする処理も作ってみる。~
　└ &ref(http://localhost/pukiwiki/index_edit.php?plugin=attach&pcmd=open&file=sample_ajax.php&refer=Ajax%C8%F3%C6%B1%B4%FC%C4%CC%BF%AE&require=1,,入力された商品コードの名称を非同期通信で取得する処理);~
　└ &ref(index.php?plugin=attach&pcmd=open&file=sample_ajax.php&refer=Ajax%C8%F3%C6%B1%B4%FC%C4%CC%BF%AE&require=1,,入力された商品コードの名称を非同期通信で取得する処理);~
　　（汎用機とか古いシステムでありがちな処理。）
JKL.ParseXMLを使えばもっとスマートに書けそうだ。~
~
※参考：http&#58;//developer.apple.com/internet/webcontent/xmlhttpreq.html
Ajax非同期通信 の変更点 - 闘うITエンジニアの覚え書き

Ajax非同期通信の変更点 - 闘うITエンジニアの覚え書き
