PHP と AJAX ライブ検索
- 前のページ AJAX responseXML
- 次のページ AJAX RSS リーダー
AJAX はユーザーによりフレンドリーでインタラクティブな検索体験を提供できます。
AJAX Live Search
以下の AJAX 例では、リアルタイムの検索を示します。
リアルタイムの検索は、伝統的な検索に比べて多くの利点があります：
- データを入力すると、一致する結果が表示されます
- データを続けて入力すると、結果がフィルタリングされます
- 結果が少ない場合は、文字を削除してより広範な範囲を取得できます
以下のテキストボックスで CodeW3C.com のページを検索してください
この例には 4 つの要素が含まれています：
- シンプルな HTML フォーム
- JavaScript
- PHPページ
- XML ドキュメント
この例では、結果が XML ドキュメント (links.xml) で検索を行います。この例を小さくシンプルにするために、8 つの結果のみを提供します。
HTML フォーム
これは HTML ページです。それはシンプルな HTML フォーム、そのフォームに対する CSS スタイル、そして JavaScript にリンクするためのものを含んでいます：
<html>
<head>
<script src="livesearch.js"></script>
<style type="text/css">
#livesearch
{
margin:0px;
width:194px;
}
#txt1
{
margin:0px;
}
</style>
</head>
<body>
<form>
<input type="text" id="txt1" size="30"
onkeyup="showResult(this.value)"
<div id="livesearch"></div>
</form>
</body>
</html>
例子解释 - HTML 表单
正如你看到的，HTML 页面包含一个简单的 HTML 表单，其中的文本框名为 "txt1"。
表单是这样工作的：
- 当用户在文本框中按键并松开按键时，会触发一个事件
- 当事件触发时，会执行名为 showResult() 的函数
- 表单下面是名为 "livesearch" 的 <div> 元素。它用作 showResult() 所返回数据的占位符
JavaScript
JavaScript 代码存储在与 HTML 文档连接的 "livesearch.js" 中：
var xmlHttp
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").
innerHTML="";
document.getElementById("livesearch").
style.border="0px";
return
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert("ブラウザはHTTPリクエストをサポートしていません")
return
}
var url="livesearch.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("livesearch").
innerHTML=xmlHttp.responseText;
document.getElementById("livesearch").
style.border="1px solid #A5ACB2";
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
例の説明：
GetXmlHttpObjectと PHP と AJAX リクエスト の例と同じです。
showResult()関数
テキストボックスに文字が入力されるたびに、関数は一度実行されます。
テキストフィールドに入力がない場合（str.length == 0）、関数は返却フィールドを空にし、周囲の任何のボーダーを削除します。
ただし、テキストフィールドに入力がある場合、関数は以下を実行します：
- サーバーに送信するURL（ファイル名）を定義します。
- 入力ボックスの内容を持つパラメータ(q)をURLに追加します。
- ランダムな数を追加して、サーバーがキャッシュファイルを使用しないようにします。
- GetXmlHttpObject関数を使用してXMLHTTPオブジェクトを作成し、変更が発生したときにstateChangedと呼ばれる関数を実行するように通知します。
- 指定されたURLを使用してXMLHTTPオブジェクトを開きます
- サーバーにHTTPリクエストを送信します
stateChanged()関数
XMLHTTPオブジェクトの状態が変更されると、この関数が実行されます。
ステータスが4（または「complete」）に変わると、レスポンステキストを使用してtxtHintプレースホルダーの内容を埋め込み、返信フィールドの周りに枠を設定します。
PHPページ
JavaScriptコードが呼び出すサーバー側のページは「livesearch.php」というPHPファイルです。
"livesearch.php" 中的コードは、"links.xml"というXMLドキュメントをチェックしています。このドキュメントはcodew3c.comの一部のページのタイトルとURLを含んでいます。
これらのコードは、XMLファイル内の検索文字列に一致するタイトルを検索し、HTMLで結果を返します：
<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
{
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1)
{
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if ($hint=="")
{
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
else
{
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
//ヒントが見つからない場合、出力を "no suggestion" に設定
//または正しい値に設定
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//レスポンスを出力
echo $response;
?>
例の説明：
JavaScript からテキストが送信された場合 (strlen($q) > 0)、以下のようになります：
- PHP で "links.xml" ファイルを作成するための XML DOM オブジェクト
- すべての "title" エレメント (nodetypes = 1) を巡回し、JavaScript が送信したデータの name に一致するものを見つけるために
- 正しい title を含む link が見つかり、$response 変数に設定されます。一致するものが複数見つかった場合、すべての一致は変数に追加されます
- 一致するものが見つからない場合、$response 変数は "no suggestion" に設定されます
- $result は "livesearch" プレースホルダーに送られる出力
- 前のページ AJAX responseXML
- 次のページ AJAX RSS リーダー
