Cari Live AJAX dan PHP

AJAX dapat memberikan pengalaman pencarian yang ramah dan interaktif bagi pengguna.

AJAX Live Search

在下面的 AJAX 例子中，我们将演示一个实时的搜索。

实时的搜索与传统搜索相比，具有很多优势：

  • 当键入数据时，就会显示出匹配的结果
  • 当继续键入数据时，对结果进行过滤
  • 如果结果太少，删除字符就可以获得更宽的范围

在下面的文本框中搜索 CodeW3C.com 的页面

本例包括四个元素：

  • 简单的 HTML 表单
  • JavaScript
  • Halaman 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 页面包含一个简单的 HTML 表单，其中的文本框名为 "txt1"。

表单是这样工作的：

  1. 当用户在文本框中按键并松开按键时，会触发一个事件
  2. 当事件触发时，会执行名为 showResult() 的函数
  3. 表单下面是名为 "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";
 kembalikan
 }
xmlHttp=GetXmlHttpObject()
jika (xmlHttp==null)
 {
 alert ("Browser tidak mendukung permintaan HTTP")
 kembalikan
 }
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
 {
 // 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");
  }
 }
kembalikan xmlHttp;
}

Pengertian Contoh:

GetXmlHttpObject dengan Permintaan AJAX dan PHP contoh yang sama.

Fungsi showResult()

Fungsi ini akan dieksekusi setiap kali karakter yang dimasukkan ke kotak teks

Jika kotak teks kosong (str.length == 0), fungsi ini mengatur field kembalian menjadi kosong, dan menghapus garis tepi yang ada

Namun, jika ada input di kotak teks, fungsi ini akan dieksekusi:

  1. Definisi url yang dikirim ke server (nama berkas)
  2. Tambahkan parameter yang berisi konten kotak input (q) ke url
  3. Tambahkan angka acak untuk mencegah server menggunakan berkas penyangga
  4. Panggil fungsi GetXmlHttpObject untuk membuat objek XMLHTTP, dan beritahu fungsi ini untuk menjalankan fungsi yang bernama stateChanged saat terjadi perubahan
  5. Membuka objek XMLHTTP menggunakan url yang diberikan
  6. Mengirim permintaan HTTP ke server

Fungsi stateChanged()

Fungsi ini akan dijalankan setiap kali status objek XMLHTTP berubah.

Ketika status menjadi 4 (atau "complete") maka teks tanggapan akan digunakan untuk mengisi konten placeholder txtHint dan mengatur garis pinggir di sekitar bidang pengembalian.

Halaman PHP

Halaman server yang dipanggil oleh kode JavaScript adalah berkas PHP dengan nama "livesearch.php"。

"livesearch.php" 中的代码检查那个 XML 文档 "links.xml"。该文档 codew3c.com 上的一些页面的标题和 URL。

Kode ini akan mencari judul yang cocok dengan string pencarian di berkas XML dan mengembalikan hasil dalam bentuk 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>";
    }
   }
  }
 }
}
//Atur output ke "no suggestion" jika tidak ditemukan tip
//atau ke nilai yang benar
if ($hint == "")
 {
 $response="no suggestion";
 }
else
 {
 $response=$hint;
 }
//Outputkan tanggapan
echo $response;
?>

Pengertian Contoh:

Jika ada teks yang dikirim dari JavaScript (strlen($q) > 0), maka terjadi:

  1. Objek XML DOM yang dibuat PHP untuk menghasilkan berkas "links.xml"
  2. Lompati semua elemen "title" (nodetypes = 1), untuk menemukan yang cocok dengan data yang disampaikan JavaScript
  3. Temukan link yang mengandung judul yang benar, dan atur variabel "$response". Jika ditemukan lebih dari satu cocokan, semua cocokan akan ditambahkan ke variabel
  4. Jika tidak ditemukan yang cocok, variabel $response diatur menjadi "no suggestion"
  5. $result adalah output yang dikirim ke placeholder "livesearch"