PHP & AJAX

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 ကို ဒီလို ေခၚထားျပီးသားပါ။


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


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 လုပ္ခ်င္တယ္

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

Write comment (0 Comments)
 

XMLHttpRequest Object readyState property

Saturday, 09 May 2009 13:06

ဒီ POST ကေတာ့ XMLHttpRequest မွာ ေျပာင္းလဲ ေနတဲ့ State ေတြအေၾကာင္းကို သိသေလာက္ ေရးထားတာပါ။ ကြၽန္ေတာ္တို႔ 

AJAX ေရးရင္ readystate ဆိုတာကို သုံးတဲ့ အခါ ခုေျပာမယ့္ State ေတြအေၾကာင္းကို နားလည္ထားမယ္ ဆိုရင္

ေလ့လာရတာ ပိုမိုလြယ္ကူမႈရွိ ပါလိမ့္မယ္။ "0" ကေန "4" ဆိုျပီး readyState ၅ ခုရွိပါတယ္။


0 - uninitialized

XMLHttpRequest object ကို initialized မလုပ္ေသးခင္ အခ်ိန္ပါ။


1 - Loading

XMLHttpRequest object က Data ကို loading တင္ျပီး server ကို request လုပ္လိုက္တဲ့ အခ်ိန္ကို ေျပာတာပါ။


2 - Loaded

Request လုပ္လိုက္တဲ့ Data အစိတ္အပိုင္း အခ်ိဳ႕တဝတ္ကို load လုပ္ျပီး ေနတဲ့ အခ်ိန္ပါ။ ဒါေပမယ့္ Request လုပ္လိုက္တဲ့

data အကုန္လုံး load လုပ္လို႕ေတာ့မျပီး ေသးတဲ့ အခ်ိန္ေလးပါ။ Server ကေနျပီး Response ကိုေတာ့ျပန္ရျပီးေနပါျပီ။


3 - interactive

Server ကေန ရလာတဲ့ data ေတြကို downloading လုပ္ေနတဲ့ အခ်ိန္ေလးပါ။ အဲဒီ တခ်ိန္ထည္းမွာပဲ download လုပ္ျပီးသား

dataေတြက XMLHttpRequest object နဲ႔ interact လုပ္ေနတဲ့ အခ်ိန္လည္း ျဖစ္ပါတယ္။


4 - Complete

Server နဲ႔ asynchronous လုပ္လိုက္တဲ့ data ေတြ အားလုံး download လုပ္ျပီး သြားတဲ့ အခ်ိန္ ကိုေျပာတာပါ။

eg.,
function doThis() {
if (xmlHttp.readyState==4) {
// do something with the response
}
}

Write comment (1 Comment)
 

AJAX XMLHttpRequest

Sunday, 03 May 2009 13:52

AJAX မွာ KEY လို႕ေျပာတဲ့ XMLHttpRequest အေၾကာင္းေလးကို ဆက္ေရးပါတယ္။


Creating An XMLHttpRequest Object

Browser ေတြကလည္း အမ်ိဳးမ်ိဳးရွိေလေတာ့ XMLHttpRequest object ကို create လုပ္ရာမွာလည္း browser ကိုလိုက္ျပီး

မတူညီတာကို ေတြ႔ရပါတယ္။ IE Browser ေတြမွာ ဆိုရင္ေတာ့ ActiveXObject ကိုသုံးျပီး တျခား Browser ေတြမွာဆိုရင္ေတာ့

JavaScript object ကိုသုံးျပီး XMLHttpRequest ကို create လုပ္ပါတယ္။ ဒါကေတာ့ sample code ေလးပါ။


var XMLHttp=null;
if (window.XMLHttpRequest)
  {
 //FOR Firefox, Mozilla, Opera, and Safari.
  XMLHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
 //IE
  XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }



ဒီ Code ကေတာ့ XMLHttpRequest ကို create လုပ္တဲ့ sample ေလးပါ။ ဒီမွာေတြ႔ ႏိုင္တာကေတာ့

Firefox, Mozilla, Opera, and Safari အတြတ္ ဆိုရင္ေတာ့  XMLHttp=new XMLHttpRequest(); ကိုသုံးျပီး IE ကိုေတာ့

အထက္မွာ ေျပာခဲ့ အတိုင္း ActiveXObject ကိုသုံးထားတာကို ေတြ႔ႏိုင္ပါတယ္။


ဒီ code ေလးကို ပိုျပီး safe ျဖစ္တဲ့ code အျဖစ္ ေျပာင္းလဲ ခ်င္တယ္ ဆိုရင္ေတာ့

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 မွာ IE အတြတ္ create လုပ္ရာမွာ   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");   ကေတာ့ IE6 ကေန

စျပီး latest version ေတြမွာ support လုပ္ပါတယ္။

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); ကေတာ့ IE version အနိမ့္ေတြ အတြတ္ပါ။ 


Write comment (2 Comments)
 

AJAX Intro

Saturday, 02 May 2009 17:28

ကြၽန္ေတာ္ PHP & AJAX ကို သုံးၾကည့္ရင္းနဲ႔ စိတ္ဝင္စားလာလို႕ ကြၽန္ေတာ္ သိထားသေလာက္ေလးကို ျပန္ျပီ Share

လိုက္ပါတယ္ ခင္ဗ်ာ။ တကယ္ေတာ့ AJAX ရယ္လို႕ ျဖစ္ခဲ့တာကေတာ့ ေလာက္မွာကတည္းကပါ။ ခုေနာက္ပိုင္းၾကမွသာ

ေတာ္ေတာ္ေလးကို တြင္တြင္က်ယ္က်ယ္ သုံးလာတာပါ။ FaceBook,Naing စတဲ့ community site ေတြမွာ AJAX ကိုေတာ္ေတာ္

ေလးကို သုံးထားတာကို ၾကည့္ျခင္းအားျဖင့္ အသုံးဝင္တဲ့ technology တစ္ခုဆိုတာ ျငင္းမရပါဘူး။ AJAX မွာ အဓိကက်တာ

ကေတာ့ XMLHttpRequest ဆိုတဲ့ object ပဲျဖစ္ပါတယ္။Microsoft က 1999 ေလာက္မွာထဲက  ဒီ Object ကို IE5 Browser မွာ

support ဖို႔ကို ထဲေပးထားထားပါတယ္။ ခုအခ်ိန္မွာေတာ့ Mozilla, Safari စတဲ့ Browser ေတြမွာပါ XMLHttpRequest Object

ကို support လုပ္ေနပါျပီ။ Asynchronous JavaScript And XML ကို AJAX လို႕ အတိုေကာက္ ေခၚတာျဖစ္ပါတယ္။

တကယ္ေတာ့ AJAX ဆိုိုတာ New Technology တစ္ခုျဖစ္ျပီး New Programming Language တစ္ခုမဟုတ္ပါ။

 

Javascript + XML ကိုသုံးျပီး web server နဲ႔ web browser ၾကားမွာ data ကို send & retrieve ၾကားမွာ synchronize

လုပ္ေပးတဲ့ technology တစ္ခုပါ။ AJAX ရဲ႔ ေကာင္းတဲ့ feature ကေတာ့ Web Page ေပၚမွာ AJAX event တစ္ခုေျပာင္း

လိုက္တိုင္း Page တစ္ခုလုံးကို ျပန္ျပီး loading တင္စရာမလိုပဲ သူေနရာေလး တစ္ခုပဲ ကြတ္ျပီး refresh ျဖစ္သြားတာမ်ိဳးက

ေတြ႔ႏိုင္ပါတယ္။ AJAX တစ္ခုဖန္တီးရာမွာ JavaScript, XML, HTML and CSS တို႔ကို အတူတကြ သုံးႏိုင္ပါတယ္။

HTML Form ေတြမွာ AJAX ကိုထဲ့ျပီးသုံးမယ္ဆိုရင္ User Friendly လည္းျဖစ္ျပီး ပိုမို႔ ျမန္ဆန္တာကိုလည္း ေတြ႔ျမင္ႏိုင္ပါတယ္။


AJAX Uses XML And HTTP Requests

ဟိုအရင္တုန္းက Web Page ေတြမွာက user က from ကို submit လုပ္တဲ့အခါ web server ကိုသြားျပီ လုပ္သင့္တဲ့ process

ေတြကိုလုပ္ေဆာင္ျပီး client browser ကို New Page အေနနဲ႔ ျပန္ျပတဲ့ အတြတ္ loading timeေရာ၊ user friendly အပိုင္းမွာပါ

user ေတြစိတ္ကသိကေအာက္ ျဖစ္ခဲ့ရပါတယ္။ ဒီအားနည္းခ်က္ေတြကို ေျပလည္ေစဖို႔ Javascipt & XML ကိုသုံးျပီး page ကို

partially load လုပ္ႏိုင္ေအာင္ AJAX ကေျပာင္းလဲေပးခဲ့ပါတယ္။ server ကေန send လိုက္တဲ့ HTTP Request တစ္ခုျပီးသြားတဲ့

အခါမွာ return ျပန္လိုက္တဲ့ Javascript ေပၚမူတည္ျပီး page အစိတ္အပိုင္း တစ္ခုထည္း modify လုပ္ႏိုင္ပါတယ္။ ဒီလိုလုပ္တဲ့

ေနရာမွာ server မွာရွိေနတဲ့ XML Data ကို Javascript သုံးျပီး ဖတ္လိုက္တာျဖစ္ပါတယ္။ ဒါကေတာ့ AJAX ကို Intro လုပ္လိုက္တဲ့

POST ေလးပါ။ ေနာက္ပိုင္းမွာေတာ့ PHP & AJAX ကိုဘယ္လို တြဲဖတ္သုံးတယ္ဆိုတာ ဆက္ျပီး ေရးပါတယ္။ ကြၽန္ေတာ္ေရးတာ

မွားေနတာေတြ႔ရင္ ဝင္ျပီး comment ေပးေဆြေႏြးေပးဖို႔ ဖိတ္ေခၚပါတယ္။ Smile

 

 

 

Write comment (2 Comments)
 

Latest Post

Login Form



Categories Table View

Most read article

RSS Feed

feed-image Feed Entries
JoomlaWatch Stats 1.2.9 by Matej Koval

Facebook Share

Share on facebook

mod_joomtouch

Version Iphone

Version Iphone by JoomTouch