 |
| fig. 1 |
１．index.html, xmlhttp.js, backend.phpを，/var/www/html/ajaxに配置
index.html : ベースファイル
xmlhttp.js : フォームに入力された文字列を，リアルタイムにbackend.phpに渡し，結果を受け取る
backend.php : DBに接続し，結果をXMLとして出力
２．backend.phpに実行権限を付与(chmod 755 backend.php)
３．以下のアドレスにアクセスし，表示される項目を確認
（A）AJAXを利用し，表示項目を動的に絞り込み
http://[サーバのアドレス]/ajax/index.html
（B）MySQLから受け取ったデータをXML形式で表示
http://[サーバのアドレス]/ajax/backend.php?host_name=sa01
index.html
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<title>server_list search result</title>
<STYLE TYPE="text/css">
<!--
.table1 {
width: 400px;
border-collapse: collapse;
border: 1px #708090 solid;
}
.table1 TD {
border: 1px #708090 solid;
}
-->
</STYLE>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript">
<!--
findText = findTextOld = "";
function loadXmlFile(fName){
httpObj = createXMLHttpRequest(displayData);
if (httpObj){
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}
function displayData(){
if ((httpObj.readyState == 4) && (httpObj.status == 200)){
xmlData = httpObj.responseXML;
$("result").innerHTML = parseXmlData(httpObj.responseText);
}else{
$("result").innerHTML = "Loading ...";
}
}
function parseXmlData(xmlData){
$("result").innerHTML = xmlData;
idListTags = document.getElementsByTagName("id");
numListTags = document.getElementsByTagName("num");
host_nameListTags = document.getElementsByTagName("host_name");
ip_addressListTags = document.getElementsByTagName("ip_address");
idLen = idListTags.length;
resultText = "<table class='table1'><tr><th colspan=4>server_list search result</th></tr><tr><td><b>id</b></td><td><b>num</b></td><td><b>host_name</b></td><td><b>ip_address</b></td></tr>";
for(i=0; i<idLen; i++){
id = idListTags[i].childNodes[0].nodeValue;
num = numListTags[i].childNodes[0].nodeValue;
host_name = host_nameListTags[i].childNodes[0].nodeValue;
ip_address = ip_addressListTags[i].childNodes[0].nodeValue;
str = host_name.match(findText);
if (str){
resultText += "<tr><td>" + id + "</td><td>" + num + "</td><td>" + host_name + "</td><td><a href='http://" + ip_address + "' target='_blank'>" + ip_address + "</a></td></tr>";
}
}
resultText += "</table>";
return resultText;
}
function inputCheck(){
findText = document.ajaxForm.requestText.value;
if (findText != findTextOld) {
str_search = "./backend.php?host_name=" + findText
loadXmlFile(str_search);
findTextOld = findText;
}else{
// $("result").innerHTML = "Loading ...";
}
setTimeout(" inputCheck()",500); // 0.5秒毎
}
window.onload = inputCheck;
// -->
</script>
</head>
<body>
<form name="ajaxForm" onSubmit="return false">
<input type="text" value="sa00" name="requestText">
</form>
<div id="result"></div>
</body>
</html>
xmlhttp.js
// HTTP通信用、共通関数
function createXMLHttpRequest(cbFunc){
var XMLhttpObject = null;
try{
XMLhttpObject = new XMLHttpRequest();
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return null;
}
}
}
if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc;
return XMLhttpObject;
}
// document.getElementById
function $(tagId){
return document.getElementById(tagId);
}
backend.php
<?php
$db_user = "[user name]";
$db_password = "[password]";
$db_name = "[database name]";
$db_host = "localhost";
//create xml
header('Content-type: text/xml; charset=utf-8');
echo '<?xml version="1.0"?><sa>';
$host_name = null;
if(isset($_GET['host_name'])) {
$host_name = $_GET['host_name'];
$con = mysql_connect($db_host,$db_user,$db_password) or die("error!");
mysql_select_db($db_name,$con) or die("DB is not exist");
$strsql = "SET CHARACTER SET UTF8";
mysql_query($strsql,$con);
$strsql = "SELECT id, num, host_name, ip_address FROM server_list WHERE host_name LIKE '%".$host_name."%';";
$res = mysql_query($strsql,$con);
while ($item = mysql_fetch_array($res)) {
print "<server_list><id>".$item[0]."</id><num>".$item[1]."</num><host_name>".$item[2]."</host_name><ip_address>".$item[3]."</ip_address></server_list>";
}
mysql_close($con);
}
echo '</sa>';
?>
0 件のコメント:
コメントを投稿