[ACY] Outside of School Hours: PHP-MySQL連携 (AJAX)

以下のファイルを，ajaxフォルダ以下に配置する．

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 = "new_schema";
 $db_host  = "10.5.1.240";

//create xml
    header('Content-type: text/xml; charset=utf-8');
    echo '<?xml version="1.0"?><sa>';

 $search_key = null;

 if(isset($_GET['search_key'])) {
  $search_key = $_GET['search_key'];

  $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, name, score FROM [DB name] WHERE name LIKE '%".$search_key."%';";
  $res = mysql_query($strsql,$con);

  while ($item = mysql_fetch_array($res)) {
   print "<list><id>".$item[0]."</id><name>".$item[1]."</name><score>".$item[2]."</score></list>";
  }
  mysql_close($con);
    }

    echo '</sa>'; 
?>

index.html

<html>
<head>
    <meta http-equiv=content-type content="text/html; charset=UTF-8">
 <title>real-time search sample(AJAX)</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");
        nameListTags = document.getElementsByTagName("name");
        scoreListTags = document.getElementsByTagName("score");
        idLen = idListTags.length;

        resultText = "<table class='table1'><tr><th colspan=4>list</th></tr><tr><td><b>id</b></td><td><b>name</b></td><td><b>score</b></td></tr>";
        for(i=0; i<idLen; i++){
            id = idListTags[i].childNodes[0].nodeValue;
            name = nameListTags[i].childNodes[0].nodeValue;
            score = scoreListTags[i].childNodes[0].nodeValue;
            str = name.match(findText);
            if (str){
                resultText += "<tr><td>" + id + "</td><td><a href='http://10.5.1.240/~" + name + "' target='_blank'>" + name + "</a></td><td>" + score + "</td></tr>";
            }
        }
        resultText += "</table>";
        return resultText;
    }

    function inputCheck(){
        findText = document.ajaxForm.requestText.value;
        if (findText != findTextOld) {
            str_search = "./backend.php?search_key=" + 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="s" name="requestText">
</form>
<div id="result"></div>
</body>
</html>

10.2.5.2	共有サーバ(１学期使用)
10.2.5.101	折笠
10.2.5.102	金本
10.2.5.103	鈴木
10.2.5.104	西崎
10.2.5.105	西村
10.2.5.106	マナハン
10.2.5.107	荒井
10.2.5.108	小沼
10.2.5.109	小谷田
10.2.5.110	城田
10.2.5.111	中山
10.2.5.112	萩原
10.2.5.113	花山
10.2.5.114	樋口
10.2.5.115	船谷
10.2.5.116	星野
10.2.5.117	間宮
10.2.5.118	佐藤

[ACY] Outside of School Hours

TAG LINK

2011年6月16日木曜日

PHP-MySQL連携 (AJAX)

0 件のコメント: