PHP ဥပမာ - AJAX တိုက်ရိုက်ရှာဖွေမှု
ပိုမိုအသုံးပြုရလွယ်ကူပြီး အပြန်အလှန်အကျိုးပြုသော ရှာဖွေမှုများကို ဖန်တီးရန် AJAX ကို အသုံးပြုနိုင်သည်။
AJAX တိုက်ရိုက်ရှာဖွေမှု
အောက်ပါဥပမာသည် သင်ရိုက်နေစဉ် ရှာဖွေမှုရလဒ်များကို ရရှိသည့် တိုက်ရိုက်ရှာဖွေမှုကို သရုပ်ပြမည်ဖြစ်သည်။
တိုက်ရိုက်ရှာဖွေမှုသည် ရိုးရာရှာဖွေခြင်းထက် အကျိုးကျေးဇူးများစွာရှိသည်-
- သင်ရိုက်သည့်အတိုင်း ရလဒ်များကို ပြသသည်။
- သင်ဆက်ရိုက်နေစဉ် ရလဒ်များ ကျဉ်းသွားပါသည်။
- ရလဒ်များ ကျဉ်းမြောင်းလွန်းပါက ပိုမိုကျယ်ပြန့်သောရလဒ်ကို မြင်တွေ့နိုင်ရန် စာလုံးများကို ဖယ်ရှားပါ။
အောက်ပါထည့်သွင်းအကွက်တွင် W3Schools စာမျက်နှာကိုရှာဖွေပါ-
အထက်ဖော်ပြပါ ဥပမာရှိ ရလဒ်များကို XML ဖိုင် ( links.xml ) တွင် တွေ့ရှိရသည်။ ဤဥပမာကို သေးငယ်ပြီး ရိုးရှင်းစေရန်အတွက် ရလဒ်ခြောက်ခုသာ ရနိုင်ပါသည်။
နမူနာရှင်းပြထားသည် - HTML စာမျက်နှာ
အသုံးပြုသူတစ်ဦးသည် အထက်ဖော်ပြပါအကွက်တွင် ဇာတ်ကောင်တစ်ခုကို ရိုက်ထည့်သောအခါ၊ လုပ်ဆောင်ချက် "showResult()" ကို လုပ်ဆောင်သည်။ လုပ်ဆောင်ချက်ကို "onkeyup" ဖြစ်ရပ်မှ အစပျိုးသည်-
<html>
<head>
<script>
function showResult(str)
{
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("livesearch").innerHTML=this.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
အရင်းအမြစ်ကုဒ်၏ ရှင်းလင်းချက်
ထည့်သွင်းသည့်အကွက်သည် ဗလာဖြစ်နေပါက (str.length==0)၊ လုပ်ဆောင်ချက်သည် အသက်ရှင်ရှာဖွေမှုနေရာပေးသူ၏ အကြောင်းအရာကို ရှင်းလင်းပြီး လုပ်ဆောင်ချက်မှ ထွက်သည်။
ထည့်သွင်းသည့်အကွက်သည် ဗလာမဟုတ်ပါက၊ showResult() လုပ်ဆောင်ချက်သည် အောက်ပါတို့ကို လုပ်ဆောင်သည်-
- XMLHttpRequest object တစ်ခုကို ဖန်တီးပါ။
- ဆာဗာတုံ့ပြန်မှု အဆင်သင့်ဖြစ်သောအခါတွင် လုပ်ဆောင်ရန် လုပ်ဆောင်ချက်ကို ဖန်တီးပါ။
- တောင်းဆိုချက်ကို ဆာဗာပေါ်ရှိ ဖိုင်တစ်ခုသို့ ပေးပို့ပါ။
- ကန့်သတ်ချက် (q) ကို URL (ထည့်သွင်းမှုအကွက်၏ အကြောင်းအရာနှင့်အတူ) သို့ ထည့်ထားကြောင်း သတိပြုပါ။
PHP ဖိုင်
အထက်ဖော်ပြပါ JavaScript မှခေါ်သော ဆာဗာရှိ စာမျက်နှာသည် "livesearch.php" ဟုခေါ်သော PHP ဖိုင်တစ်ခုဖြစ်သည်။
"livesearch.php" ရှိ အရင်းအမြစ်ကုဒ်သည် ရှာဖွေမှုစာကြောင်းနှင့် ကိုက်ညီသော ခေါင်းစဉ်များအတွက် 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>";
}
}
}
}
}
// Set output to "no suggestion" if no hint was found
// or to the correct values
if ($hint=="") {
$response="no suggestion";
}
else {
$response=$hint;
}
//output the response
echo $response;
?>
JavaScript (strlen($q) > 0) မှ ပေးပို့ထားသော စာသားတစ်ခုခု ရှိပါက၊
- XML DOM အရာဝတ္တုအသစ်တွင် XML ဖိုင်တစ်ခုကို တင်ပါ။
- JavaScript မှပေးပို့သော စာသားများမှ ကိုက်ညီမှုများကို ရှာဖွေရန် <title> အစိတ်အပိုင်းများအားလုံးကို လှည့်ပတ်ကြည့်ရှုပါ။
- "$response" variable တွင် မှန်ကန်သော url နှင့် ခေါင်းစဉ်ကို သတ်မှတ်သည်။ ကိုက်ညီမှုတစ်ခုထက်ပိုပါက တွေ့ရှိပါက၊ ကိုက်ညီမှုအားလုံးကို ကိန်းရှင်သို့ ပေါင်းထည့်မည်ဖြစ်သည်။
- ကိုက်ညီမှုမရှိပါက၊ $response variable ကို "no suggestion" ဟု သတ်မှတ်သည်