AJAX 실시간 검색

PHP 예시 - AJAX 실시간 검색

예제 설명 - HTML 페이지

사용자가 위의 입력창에 문자를 입력하면 "showResult()" 함수가 실행됩니다. 이 함수는 "onkeyup" 이벤트에 의해 실행됩니다:

<html>
 <head>
     <script>
         function showResult(str)
         {
             if (str.length==0)
             {
                 document.getElementById("livesearch").innerHTML="";
                 document.getElementById("livesearch").style.border="0px";
                 return;
             }
             if (window.XMLHttpRequest)
             {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行
                 xmlhttp=new XMLHttpRequest();
             }
             else
             {// IE6, IE5 浏览器执行
                 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
             xmlhttp.onreadystatechange=function()
             {
                 if (xmlhttp.readyState==4 && xmlhttp.status==200)
                 {
                     document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
                     document.getElementById("livesearch").style.border="1px solid #A5ACB2";
                 }
             }
             xmlhttp.open("GET","livesearch.php?q="+str,true);
             xmlhttp.send();
         }
     </script>
 </head>
 <body>
 <form>
     <input type="text" size="30" onkeyup="showResult(this.value)">
     <div id="livesearch"></div>
 </form>
 </body>
 </html>

소스 코드 설명:

입력 상자가 비어 있는 경우(str.length==0), 이 함수는 함수는 실시간 검색 자리 표시자의 내용을 지우고 함수를 종료합니다.

입력 상자가 비어 있지 않으면 showResult()는 다음 단계를 수행합니다.

· XMLHttpRequest 객체 생성

· 다음 단계를 수행합니다. 서버 응답 준비됨

· 서버에 있는 파일에 요청 보내기

· URL 끝에 추가된 매개변수(q)에 주의하세요(입력 내용 포함) box)

PHP 파일

위에서 JavaScript를 통해 호출되는 서버 페이지는 "livesearch.php"라는 이름의 PHP 파일입니다.

"livesearch.php"의 소스 코드는 XML 파일에서 검색 문자열과 일치하는 제목을 검색하고 결과를 반환합니다.

<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
 
$x=$xmlDoc->getElementsByTagName('link');
 
// 从 URL 中获取参数 q 的值
$q=$_GET["q"];
 
// 如果 q 参数存在则从 xml 文件中查找数据
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)
               {
                       // 找到匹配搜索的链接
                       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), 어떻게 될까요?

· ” XML 파일을 새 XML DOM 개체에 로드할 수 없습니다.

· -” 모든 <title> 요소를 순회합니다. JavaScript<에서 전달한 텍스트와 일치하는 텍스트를 찾으려면 🎜>

· "$response" 변수에 올바른 URL과 제목을 설정하세요. 일치하는 항목이 두 개 이상 발견되면 모든 일치 항목이 변수에 추가됩니다.

· 일치하는 항목이 없으면 $response 변수를 "제안 없음"으로 설정합니다.

지속적인 학습

새로운 파일

<html> <head> <script> function showResult(str) { if (str.length==0) { document.getElementById("livesearch").innerHTML=""; document.getElementById("livesearch").style.border="0px"; return; } if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行 xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 浏览器执行 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("livesearch").innerHTML=xmlhttp.responseText; document.getElementById("livesearch").style.border="1px solid #A5ACB2"; } } xmlhttp.open("GET","livesearch.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> <input type="text" size="30" onkeyup="showResult(this.value)"> <div id="livesearch"></div> </form> </body> </html>

제출하다 코드 재설정

자동운전