AJAX は、よりフレンドリーでインタラクティブな検索エクスペリエンスをユーザーに提供します。
AJAX ライブ検索
以下の AJAX の例では、ライブ検索を示します。
リアルタイム検索には、従来の検索に比べて多くの利点があります。
データを入力すると、一致する結果が表示され、結果が少なすぎる場合は、結果がフィルタされます。 の範囲が広い下のテキスト ボックスで W3School ページを検索します
この例には 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 ページには、「txt1」という名前のテキスト ボックスを持つ単純な HTML フォームが含まれています。
フォームの仕組みは次のとおりです:
ユーザーがテキスト ボックスでキーを押してキーを放すと、イベントがトリガーされ、フォームの下で showResult() という名前の関数が実行されます。 < 名前は "livesearch" ;div> 要素です。 showResult() によって返されるデータのプレースホルダーとして使用されますJavaScript
JavaScript コードは、HTML ドキュメントに接続された「livesearch.js」に保存されます:
var xmlHttpfunction showResult(str){if (str.length==0) { document.getElementById("livesearch"). innerHTML=""; document.getElementById("livesearch"). style.border="0px"; return }xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return }var url="livesearch.php"url=url+"?q="+strurl=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 オブジェクトを開きます。 . stateChanged() 関数XMLHTTP オブジェクトの状態が変化したときにこの関数が実行されます。
ステータスが 4 (または「完了」) に変化すると、txtHint プレースホルダーの内容が応答テキストで埋められ、戻りフィールドの周囲に境界線が設定されます。
PHP ページ
JavaScript コードによって呼び出されるサーバー ページは、「livesearch.php」という名前の PHP ファイルです。
「livesearch.php」のコードは、XML ドキュメント「links.xml」をチェックします。この文書の w3school.com.cn 上の一部のページのタイトルと 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>0if (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>"; } } } }}// Set output to "no suggestion" if no hint were found// or to the correct valuesif ($hint == "") { $response="no suggestion"; }else { $response=$hint; } //output the responseecho $response;?>
JavaScript からテキストが送信された場合 (strlen($q) > 0)、何が起こりますか? :
PHP は、「links.xml」ファイルの XML DOM オブジェクトを作成します。すべての「title」要素 (nodetypes = 1) を反復処理して、正しいタイトルを含むリンクを見つけて設定します。それを「$response」変数に追加します。複数の一致が見つかった場合、すべての一致が変数に追加されます。一致が見つからなかった場合、$response 変数は「提案なし」に設定されます。$result は、「livesearch」プレースホルダーに送信される出力です