Contents
PHP&AJAX
AJAXとは何か?
AJAXは、XML、HTML、CSS、Java Scriptを利用して、より高速でよりインタラクティブなWebアプリケーションを作成するための新しい技術です。JAVAとかXMLの頭文字からこのような名前がついてます。
たとえば、submitが押されたときにAJAXを使用すると、JavaScriptはサーバーにリクエストを行い、結果を解釈して現在の画面を更新します。
PHPとAJAXの例
AjaxとPHPを使用してデータベースから情報にアクセスすることがいかに簡単かを説明します
最初にMySQLの設定
CREATE TABLE `ajax_example` ( `name` varchar(50) NOT NULL, `age` int(11) NOT NULL, `sex` varchar(1) NOT NULL, `wpm` int(11) NOT NULL, PRIMARY KEY (`name`) )
次のSQL文を使用して、このテーブルに次のデータをいれましょう。
INSERT INTO `ajax_example` VALUES ('Jerry', 120, 'm', 20); INSERT INTO `ajax_example` VALUES ('Regis', 75, 'm', 44); INSERT INTO `ajax_example` VALUES ('Frank', 45, 'm', 87); INSERT INTO `ajax_example` VALUES ('Jill', 22, 'f', 72); INSERT INTO `ajax_example` VALUES ('Tracy', 27, 'f', 0); INSERT INTO `ajax_example` VALUES ('Julie', 35, 'f', 90);
クライアント側のHTMLファイル
ではクライアント側のHTMLファイルの作成を行います:ajax.htmlで作成してください
<html> <body> <script language = "javascript" type = "text/javascript"> <!-- //ブラウザをサポートするコードになります function ajaxFunction(){ var ajaxRequest; // AVAXを動かす変数 try { // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); }catch (e) { // インターネットブラウザ try { ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); }catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){ // 適応しない場合 alert("ブラウザが適用外です"); return false; } } } // データを受け取る機能を作る // サーバーから送信され更新される // div sectionは同じページ ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxDiv'); ajaxDisplay.innerHTML = ajaxRequest.responseText; } } // いまここでユーザーからvalueを受けてサーバースクリプトにわたす var age = document.getElementById('age').value; var wpm = document.getElementById('wpm').value; var sex = document.getElementById('sex').value; var queryString = "?age=" + age ; queryString += "&wpm=" + wpm + "&sex=" + sex; ajaxRequest.open("GET", "ajax-example.php" + queryString, true); ajaxRequest.send(null); } //--> </script> <form name = 'myForm'> Max Age: <input type = 'text' id = 'age' /> <br /> Max WPM: <input type = 'text' id = 'wpm' /> <br /> Sex: <select id = 'sex'> <option value = "m">m</option> <option value = "f">f</option> </select> <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/> </form> <div id = 'ajaxDiv'>ここにあなたのリクエストが出てきます</div> </body> </html>
サーバーサイドPHPファイル
これでクライアント側のスクリプトが完成しました。今度は、データベースから年齢、wpm、性別を取得し、それをクライアントに送り返すサーバーサイドスクリプトを書く必要があります。次のコードを “ajax-example.php”ファイルに入れてください。
<?php $dbhost = "localhost"; $dbuser = "dbusername"; $dbpass = "dbpassword"; $dbname = "dbname"; //SQLサーバーにログイン$dbhost, $dbuser, $dbpass //はご自身で設定したものになります mysql_connect($dbhost, $dbuser, $dbpass); //データベースを選びましょう mysql_select_db($dbname) or die(mysql_error()); // クエリからデータを取得する $age = $_GET['age']; $sex = $_GET['sex']; $wpm = $_GET['wpm']; // SQLインジェクションを防ぐためユーザー入力 //をエスケープする $age = mysql_real_escape_string($age); $sex = mysql_real_escape_string($sex); $wpm = mysql_real_escape_string($wpm); //クエリを検索 $query = "SELECT * FROM ajax_example WHERE sex = '$sex'"; if(is_numeric($age)) $query .= " AND age <= $age"; if(is_numeric($wpm)) $query .= " AND wpm <= $wpm"; //クエリを実行 $qry_result = mysql_query($query) or die(mysql_error()); //検索結果の文字列の作成 $display_string = "<table>"; $display_string .= "<tr>"; $display_string .= "<th>Name</th>"; $display_string .= "<th>Age</th>"; $display_string .= "<th>Sex</th>"; $display_string .= "<th>WPM</th>"; $display_string .= "</tr>"; //返された値(人物)ごとにテーブルに新しい行を //挿入する。 while($row = mysql_fetch_array($qry_result)) { $display_string .= "<tr>"; $display_string .= "<td>$row[name]</td>"; $display_string .= "<td>$row[age]</td>"; $display_string .= "<td>$row[sex]</td>"; $display_string .= "<td>$row[wpm]</td>"; $display_string .= "</tr>"; } echo "Query: " . $query . "<br />"; $display_string .= "</table>"; echo $display_string; ?>
次のページ⑧PHP&XML