AJAX Suggest Sample

Monday, 11 May 2009 15:16

ဒီ sample ေလးကေတာ့ w3schools ကေနျပီး ရယူထားတာျဖစ္ပါတယ္။ ဒီ program ရဲ ့သေဘာကေတာ့ Textbox

ရဲ ့keyup လုပ္လိုက္တိုင္းမွာ AJAX ကို trigger လုပ္ထားတဲ့ sample ေလးပါ။ ဒီ sample မွာ Textbox တစ္ခုရွိပါတယ္။

အဲ့ဒီ Textbox မွာ character တစ္ခု ရိုက္ျပီး Keypress လုပ္လိုက္ရင္ သူက AJAX ကို သံုးျပီး match ျဖစ္တဲ့ suggestion

words ကို ရွာျပီး ျပန္ျပေပးတာျဖစ္ပါတယ္။

ဥပမာ သင္က a လို ့ရိုက္လိုက္ရင္ သူက a နဲ ့စတဲ့ words ေတြကို ရွာျပီး ျပန္ျပေပးတာျဖစ္ပါတယ္။

ဒီ sample မွာ simple html Form တစ္ခု ၊ Javascript တစ္ File ၊ ျပီးေတာ့ PHP Page တစ္ခုပဲ ပါပါတယ္။

တစ္ခုုခ်င္းစီက ဘယ္လို အလုပ္လုပ္တယ္ဆိုတာကို ရွင္းျပေပးပါမယ္။ ဒါကေတာ့ HTML Form ပဲ ျဖစ္ပါတယ္။

<html>
<head>
<script src="clienthint.js"></script>
</head>

<body>

<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>

<p>Suggestions: <span id="txtHint"></span></p>

</body>
</html>

ဒီ code မွာ textbox ရဲ ့ onkeyup လုပ္တိုင္းမွာ Show Hint ဆိုတဲ့ Javascript Function ကို Run ပါလိမ့္မယ္။ အဲ့ဒီလိုမ်ိဳး

Trigger လုပ္ႏိုင္ဖို ့အတြက္ clienthint.js ဆိုတဲ့ Javascript File ကို ဒီလို ေခၚထားျပီးသားပါ။

clienthint.js ကို ဆက္ျပီး ၾကည့္လိုက္မယ္ဆိုရင္ေတာ့

var xmlHttp;

function showHint(str)
{
     if (str.length==0)
     {
         document.getElementById("txtHint").innerHTML="";
         return;
      }
      xmlHttp=GetXmlHttpObject();
      if (xmlHttp==null)
     {
        alert ("Browser does not support HTTP Request");
        return;
     }
     var url="gethint.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("txtHint").innerHTML=xmlHttp.responseText;
    }
}
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");
   }
   }
   return xmlHttp;
}

ဒီ code မွာ ေတြ ့ႏိုင္တာကေတာ့ function 3 ခုရွိပါတယ္။

. showHint

. stateChanged

. GetXmlHttpObject

ဒီ Function 3 ခုမွာ stateChanged နဲ ့ GetXmlHttpObject ေတြ ကေတာ့ AJAX ေရးမယ္ဆိုရင္ လိုအပ္တာေတြကို create

လုပ္ေပးဖုိ ့ ေရးထားတာျဖစ္ပါတယ္။ GetXmlHttpObject ကေတာ့ XMLHttpRequest Object ရဲ ့ readyState ကို ဖတ္

ထားတဲ့ Function ပါ။ showHint ကေတာ့ XMLHttpRequest Object ကို create လုပ္ျပီး readystate ကို ၾကည့္ျပီး server side

မွာ ရွိေနတဲ့ php file ကို လွမ္းျပီး Run ထားတာျဖစ္ပါတယ္။

function showHint ထဲမွာ server ကို လွမ္းေခၚျပီး asynchronous လုပ္ထားတဲ့ ေနရာကေတာ့ ဒီ code ပါ။

var url="gethint.php";

url=url+"?q="+str;

url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=stateChanged;

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

ဒီမွာ ေခၚထားတဲ့ gethint.php ကို ဆက္ျပီး ၾကည့္ၾကရေအာင္

<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
    $hint="";
    for($i=0; $i<count($a); $i++)
    {
        if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
        {
          if ($hint=="")
          {
             $hint=$a[$i];
           }
           else
           {
            $hint=$hint." , ".$a[$i];
           }
        }
    }
}

//Set output to "no suggestion" if no hint were found
//or to the correct values
    if ($hint == "")
    {
     $response="no suggestion";
    }
   else
   {
    $response=$hint;
    }
//output the response
echo $response;
?>

ဒီ code မွာ a ဆိုတဲ့ Array တစ္ခု ရွိပါတယ္။ ဒီ Array ထဲမွာ match လုပ္မယ့္ words ေတြ အားလံုးကို ထည့္ထား

ပါတယ္။ q ဆိုတဲ့ variable ထဲကိုေတာ့ client ကေန pass လုပ္လိုက္တဲ့ value ကို $_GET သံုးျပီး ထည့္ထားပါတယ္။

ဒီ For Loop ကေတာ့ client ကေနေပးလိုက္တဲ့ value နဲ ့ a ဆိုတဲ့ Array ထဲမွာ ရွိေနတဲ့ words ေတြကို တိုက္စစ္ထားတာ

ျဖစ္ပါတယ္။

for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}

ဒီ sample ေလးကို test လုပ္ၾကည့္ခ်င္တယ္ဆိုရင္ ဒီ Link မွာ စမ္းႏိုင္ပါတယ္။ တစ္ကယ္လို ့ Download လုပ္ခ်င္တယ္

ဆိုရင္ေတာ့ ဒီမွာ ေဒါင္းႏိုင္ပါတယ္။

Add New
Search

Comments (3)

2010-11-17 17:20:15 |Registered| fish - Ajax

ကို zack ,
download လုပ္ၿပီး စမ္းၾကည့္တာ ..
text box မွာ type ရိုက္လိုက္တိုင္း suggestions ရဲ႕ ေဘးမွာ name ေတြမေပၚဘဲနဲ႔ 0 if (strlen($q) > 0) { $hint=""; for($i=0; $i .. အဲဒါေတြ ေပၚေနတယ္ ...
ဘယ္လိုလုပ္ရမလဲ ..
နည္းနည္း ကလိၾကည့္လိုက္မယ္ေနာ္..
- 0
- 0
Reply Quote

2011-02-10 13:49:25 |118.143.230.xxx| ငယ္ေလး

ajax ကိုစေလ့လာခ်င္ရင္ ဘာစာအုပ္ကေနစဖတ္ရမလဲသိ၀ူး။ ေျပာျပေပးပါလား။
- 0
- 0
Reply Quote

2011-02-10 23:10:22 |SAdministrator| admin - Re:

I wrote something at here:
http://www.zack-notes.net/joomzack15/php-&-ajax/
and then W3school also quite good at here:
http://www.w3schools.com/php/php_ajax_intro.asp

When I study ajax, I just read w3school so it is enough for beginner.

Good Luck!
- 0
- 0
Reply Quote