PHP와 AJAX 실시간 검색
- 이전 페이지 AJAX responseXML
- 다음 페이지 AJAX RSS 리더
AJAX는 사용자에게 더 친절하고 상호작용성이 높은 검색 경험을 제공할 수 있습니다.
AJAX Live Search
아래 AJAX 예제에서, 우리는 실시간 검색을 보여줍니다.
실시간 검색은 전통적인 검색에 비해 많은 장점이 있습니다：
- 데이터를 입력하면, 일치하는 결과가 표시됩니다
- 데이터를 계속 입력하면, 결과를 필터링합니다
- 결과가 너무 적으면, 문자를 제거하여 더 넓은 범위를 얻을 수 있습니다
아래 텍스트 박스에서 CodeW3C.com의 페이지를 검색하세요
이 예제는 네 가지 요소를 포함하고 있습니다：
- 간단한 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 페이지는 "txt1"라는 이름의 텍스트 박스를 포함한 간단한 HTML 양식을 포함하고 있습니다.
양식은 이렇게 작동합니다：
- 사용자가 텍스트 박스에서 키를 누른 후 키를 떼 때, 이벤트가 발생합니다
- 이벤트가 발생할 때, 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
{
// 파이어폭스, 오퍼라 8.0+, 사파리
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// 인터넷 익스플로러
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 리더
