PHP 개발 기본 튜토리얼 AJAX 실시간 검색

AJAX 실시간 검색

AJAX는 사용자에게 더욱 친숙하고 대화형 검색 환경을 제공할 수 있습니다.

예제

다음 예에서는 실시간 검색을 보여드리겠습니다. 데이터.

실시간 검색은 기존 검색에 비해 많은 장점이 있습니다.
데이터를 입력하면 일치하는 결과가 표시됩니다.
계속해서 데이터를 입력하면서 결과를 필터링하세요.
결과가 너무 적으면 문자를 삭제하여 더 넓은 범위를 얻으세요.

출력 효과는 오른쪽과 같습니다

위 예제의 결과는 XML 파일(3.xml)에서 검색됩니다. 이 예제를 작고 단순하게 유지하기 위해 6개의 결과만 제공합니다.

이 예는 세 부분으로 구성됩니다

HTML 양식 페이지
PHP 파일
XML 파일

HTML 폼 페이지

소스코드 1.php는 다음과 같습니다

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showResult(str)
{
	//如果输入框是空的（str.length==0），该函数会清空 livesearch 占位符的内容，并退出该函数
	if (str.length==0)
	{ 
		document.getElementById("livesearch").innerHTML="";
		document.getElementById("livesearch").style.border="0px";
		return;
	}
	//输入框不是空的，则showResult() 会执行以下代码
	//创建 XMLHttpRequest 对象
	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","2.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>
<!-- 键盘按键被松开时onkeyup 事件发生 ,调用showResult()函数-->
<form>
<p>在下面的文本框中输入 "HTML"，搜索包含 HTML 的页面：</p>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>

</body>
</html>

소스 코드 설명:

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

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

XMLHttpRequest 객체 생성
Create 함수는 서버 응답이 준비되었을 때 실행됩니다.
서버에 있는 파일에 요청을 보냅니다.
매개변수(q)를 참고하세요. URL 끝에 추가(입력창 내용 포함)

PHP 파일

위 단락에서 JavaScript가 호출한 서버 페이지는 "2.php"라는 이름의 PHP 파일입니다.

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

소스 코드는 2.php를 참조하세요

<?php
//创建XML DOM对象
$xmlDoc=new DOMDocument();
//加载XML文件到新的XML DOM对象
$xmlDoc->load("3.xml");
//将标签名为“link”的对象的集合赋值给$x
$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)//元素的节点类型，1：元素节点，2：属性节点
		{
			// 找到匹配搜索的链接
			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에서 전달한 텍스트와 일치하는 텍스트를 찾습니다.
다음을 포함하는 링크를 찾습니다. 올바른 제목을 지정하고 설정합니다. "$response" 변수의 경우 일치하는 항목이 두 개 이상 발견되면 모든 일치 항목이 변수에 추가됩니다.
일치하는 항목이 없으면 $response 변수를 "제안 없음"으로 설정합니다.
$response는 "livesearch" 자리 표시자로 전송된 출력입니다.

XML 파일

소스 코드는 3.php

를 참조하세요.

<?xml version="1.0" encoding="UTF-8"?>
<pages>
<link>
<title>HTML a 标签</title>
<url>http://www.php.cn/tags/tag-a.html</url>
</link>
<link>
<title>HTML br 标签</title>
<url>http://www.php.cn/tags/tag-br.html</url>
</link>
<link>
<title>CSS background 属性</title>
<url>http://www.php.cn/cssref/css3-pr-background.html</url>
</link>
<link>
<title>CSS border 属性</title>
<url>http://www.php.cn/cssref/pr-border.html</url>
</link>
<link>
<title>JavaScript Date 对象</title>
<url>http://www.php.cn/jsref/jsref-obj-date.html</url>
</link>
<link>
<title>JavaScript Array 对象</title>
<url>http://www.php.cn/jsref/jsref-obj-array.html</url>
</link>
</pages>

학습 경험

이 예에는 주로 다음 지식 포인트가 포함됩니다.

양식 기본
onkeyup 이벤트 : 키보드 키를 놓았을 때 발생
함수 호출, 함수 값 전달
AJAX XMLHttpRequest 객체 생성, 서버 응답 함수 실행 실행 시 서버에 있는 파일에 요청 보내기: 학습 경험은 1-5 참조
HTML DOM getElementById() 메서드: 지정된 ID를 가진 첫 번째 개체를 반환합니다. 참조
l XML 관련 지식

XML DOM 객체 생성

새 XML DOM 객체에 XML 파일 로드
특정 태그 이름의 객체 가져오기: getElementsByTagName()
특정 요소의 하위 섹션 컬렉션 가져오기: HTML DOM childNodes
첫 번째 버튼 요소의 노드 값 가져오기: HTML DOM nodeValue
요소의 첫 번째 하위 노드 반환: HTML DOM item() 메서드