PHP ਅਤੇ AJAX Live Search

پچھلے ویژن 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 页面包含一个简单的 HTML 表单，其中的文本框名为 "txt1"。

表单是这样工作的：

当用户在文本框中按键并松开按键时，会触发一个事件
当事件触发时，会执行名为 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 ("ਬਰਾਊਜ਼ਰ ਐੱਚਟੀਟੀਪੀ ਰਿਕਵੇਰ ਨਹੀਂ ਸਮਰਥਾਤਾ")
 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) ਤਾਂ ਫੰਕਸ਼ਨ ਵਾਪਸ ਫੀਲਡ ਨੂੰ ਖਾਲੀ ਸੈਟ ਕਰਦਾ ਹੈ ਅਤੇ ਆਲੇ ਦੁਆਲੇ ਦੇ ਕਿਸੇ ਵੀ ਬਾਰਡਰ ਨੂੰ ਹਟਾ ਦਿੰਦਾ ਹੈ。

ਪਰ ਜੇਕਰ ਟੈਕਸਟ ਫੀਲਡ ਵਿੱਚ ਇਨਪੁਟ ਹੈ ਤਾਂ ਫੰਕਸ਼ਨ ਇਹ ਚਲਾਉਂਦਾ ਹੈ:

ਸਰਵਰ ਨੂੰ ਭੇਜਣ ਵਾਲੀ ਯੂਰਲ (ਫਾਈਲ ਨਾਮ) ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ
ਇਨਪੁਟ ਬਕਸ ਦੇ ਸਮਾਗਮ ਨੂੰ (q) ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਯੂਰਲ ਵਿੱਚ ਜੋੜੋ
ਇੱਕ ਰੈਂਡਮ ਸੰਖਿਆ ਜੋੜੋ ਤਾਕਿ ਸਰਵਰ ਕੈਸ਼ ਫਾਈਲ ਦਾ ਉਪਯੋਗ ਨਾ ਕਰੇ
ਕੰਮ ਕਰਨ ਲਈ GetXmlHttpObject ਫੰਕਸ਼ਨ ਨੂੰ ਵਰਤੋਂ ਕਰਕੇ XMLHTTP ਆਬਜੈਕਟ ਬਣਾਓ ਅਤੇ ਇੱਕ ਬਦਲਾਅ ਟ੍ਰਿਗਰ ਕਰਨ ਉੱਤੇ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ stateChanged ਨਾਮ ਦੀ ਫੰਕਸ਼ਨ ਚਲਾਓ
使用给定的 url 来打开 XMLHTTP 对象
向服务器发送 HTTP 请求

stateChanged() 函数

每当 XMLHTTP 对象的状态发生变化时，该函数就会执行。

当状态变为 4 (或 "complete") 时，就会使用响应文本来填充 txtHint 占位符的内容，并在返回字周围设置一个边框。

PHP 页面

由 JavaScript 代码调用的服务器页面是名为 "livesearch.php" 的 PHP 文件。

"livesearch.php" ਵਿੱਚ ਦਿੱਤੇ ਹੋਏ ਕੋਡ ਉਹ XML ਦਸਤਾਵੇਜ "links.xml" ਦੇਖਦਾ ਹੈ। ਇਹ ਦਸਤਾਵੇਜ codew3c.com ਦੀਆਂ ਕੁਝ ਪੰਨਿਆਂ ਦੇ ਟਾਈਟਲ ਅਤੇ URL ਵਿੱਚ ਕੋਡ ਕੀਤਾ ਗਿਆ ਹੈ。

ਇਹ ਕੋਡ XML ਫਾਈਲ ਵਿੱਚ ਖੋਜ ਸਟਰਿੰਗ ਨਾਲ ਮੇਲ ਖਾਣ ਵਾਲੇ ਟਾਈਟਲ ਦੀ ਖੋਜ ਕਰੇਗਾ ਅਤੇ ਐੱਚਟੀਐੱਮਐੱਲ ਰੂਪ ਵਿੱਚ ਨਤੀਜੇ ਵਾਪਸ ਦੇਵੇਗਾ:

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

مثال کی تفسیر:

اگر جاوااسکریپت کی طرف سے کسی فلم کا متن فراہم کیا گیا ہے (strlen($q) > 0)، تو ہوگا:

PHP کی ایک XML DOM آئیٹم کی تعمیر کا "links.xml" فائل
تمام "title" عناصر (nodetypes = 1) تلاش کئے جائیں تاکہ جاوااسکریپت کی فراہم کردہ اعداد کا نام پائا جائے
صحیح عنوان والا لنک پائا جائے اور اس کو "$response" متغیر میں رکھا جائے گا، اگر زیادہ سے زیادہ ماتختیار پائی جائیں تو تمام ماتختیار متغیر میں شامل کئے جائیں گے
اگر کوئی ماتختیار نہ پائی جائے تو $response متغیر کو "no suggestion" رکھا جائے گا
$result لائیو سرچ مخطئ کے لئے اخراج کیا جاتا ہے

پچھلے ویژن AJAX responseXML
پائیدھی ویژن AJAX RSS ریڈر

ਕੋਰਸ ਸਾਰਣੀ

PHP ਮੁੱਢਲੀ ਸਿੱਖਿਆ

PHP ਫਾਰਮ

PHP ਉੱਚ ਪੱਧਰੀ ਸਿੱਖਿਆ

PHP Database

PHP XML