Ajax非同期通信 †・Ajaxとは「Asynchronous JavaScript and XML」の略で、一言で言えば「画面遷移を使わない非同期データ処理」。 XMLで通信した場合、データを取り出す為のDOM操作のコードが煩雑になりがだが、 ※以前にiframeとjavaScriptのFunctionオブジェクトを利用して非同期通信をする画面を作った事があるが ◆メイン画面(呼び出し側) <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データをやりとりする処理も作ってみる。 |