Tutorial asas pembangunan PHP AJAX carian masa nyata

Carian masa nyata AJAX

AJAX boleh memberikan pengguna pengalaman carian yang lebih mesra dan interaktif.

Contoh

Dalam contoh berikut, kami akan menunjukkan carian masa nyata dan hasil carian boleh diperoleh semasa anda menaip data .

Carian masa nyata mempunyai banyak kelebihan berbanding carian tradisional:
Apabila data dimasukkan, hasil yang sepadan akan dipaparkan
Semasa anda meneruskan menaip data, tapis hasil
Jika terdapat terlalu sedikit hasil carian, alih keluar aksara untuk mendapatkan julat yang lebih luas

Kesan output adalah seperti yang ditunjukkan di sebelah kanan

Keputusan dalam contoh di atas dicari dalam fail XML (3.xml). Untuk memastikan contoh ini kecil dan mudah, kami hanya menyediakan 6 hasil.

Contoh ini termasuk tiga bahagian

Halaman borang HTML
Fail PHP
Fail XML

Halaman borang HTML

Kod sumber 1.php adalah seperti berikut

<!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>

Penjelasan kod sumber:

Jika kotak input kosong (str.length==0), fungsi ini akan mengosongkan kandungan ruang letak carian langsung dan keluar dari fungsi.

Jika kotak input tidak kosong, maka showResult() akan melaksanakan langkah berikut:

Cipta objek XMLHttpRequest
Buat Fungsi dilaksanakan apabila respons pelayan sedia
Hantar permintaan ke fail pada pelayan
Sila ambil perhatian parameter (q) ditambahkan pada penghujung URL (Termasuk kandungan kotak input)

fail PHP

Pelayan yang dipanggil oleh JavaScript dalam perenggan di atas Halaman adalah fail PHP bernama "2.php".

Kod sumber dalam "2.php" akan mencari fail XML untuk tajuk yang sepadan dengan rentetan carian dan mengembalikan hasil:

Lihat 2.php untuk kod sumber

<?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;// 输出结果
?>

Jika JavaScript menghantar sebarang teks (iaitu strlen($q) > 0), apakah yang berlaku:

PHP mencipta objek XML DOM bagi fail "links.xml"
Lintas semua <title> elemen (nodetypes = 1) untuk mencari teks yang sepadan dengan teks yang diluluskan oleh JavaScript
Cari pautan yang mengandungi tajuk yang betul dan tetapkannya Untuk pembolehubah "$response", jika lebih daripada satu padanan ditemui, semua padanan ditambahkan pada pembolehubah.
Jika tiada padanan ditemui, tetapkan pembolehubah $response kepada "tiada cadangan".
$response ialah output yang dihantar kepada pemegang tempat "livesearch"

Fail XML

Lihat 3.php

untuk kod sumber

<?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>

Pengalaman pembelajaran

Contoh ini terutamanya termasuk perkara pengetahuan berikut:

Asas borang
Peristiwa onkeyup: Berlaku apabila kekunci papan kekunci dilepaskan
Panggilan fungsi, hantaran nilai fungsi
Penciptaan objek AJAX XMLHttpRequest, respons pelayan Fungsi dilaksanakan semasa melaksanakan, menghantar permintaan kepada fail pada pelayan: Lihat 1-5 untuk pengalaman pembelajaran
kaedah HTML DOM getElementById(): Mengembalikan objek pertama dengan Rujukan ID yang ditentukan
l pengetahuan berkaitan XML

Cipta objek XML DOM

Muat fail XML ke objek XML DOM baharu
Dapatkan objek nama teg tertentu: getElementsByTagName()
Dapatkan koleksi bahagian kanak-kanak bagi elemen tertentu: HTML DOM childNodes
Dapatkan nilai nod elemen butang pertama: HTML DOM nodeValue
Kembalikan nod anak pertama elemen: kaedah HTML DOM item()

Fungsi berkaitan:

Strlen(): Mengembalikan panjang rentetan
Sstritr( ) : Cari kejadian pertama rentetan dalam rentetan lain

bahagian seterusnya

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik

Skrin penuh