ပထမဆုံး "keyCapture.html" လို့ခေါ်တဲ့ HTML page တစ်ခု ဖန်တီးပါမယ်။ သူ့မှာ server ကပြန်ပို့တဲ့ စာကို ဖော်ပြဖို့ DIV element တစ်ခု ထည့်ထားပါတယ်။ နောက် သပ်သပ်ခွဲရေးထားတဲ့ JavaScript ဖိုင်ကို head ထဲမှာ ချိတ်ထားပါမယ်။
<html>
<head>
<title>Key Capture</title>
<script src='keyCapture.js'></script>
</head>
<body>
<form>
Press a key to send to server.
<div id='text1' style="font-size: 40px; color:blue;">
</div>
</form>
</body>
</html>
ဒုတိယ အနေနဲ့ ကီးတွေကိုဖမ်းဖို့၊ AJAX ကိုသုံးပြီး server ကိုပို့ဖို့ "keyCapture.js" ဖိုင်ကို အောက်ပါ အတိုင်း ရေးပါမယ်။ နောက်မှာ သူ့ကို အသေးစိတ် ရှင်းထားပါတယ်။
var xmlHttp;
document.onkeypress = DisplayMsg;
function DisplayMsg(key_event) {
var keyChar;
if (document.all) {
keyChar = String.fromCharCode(event.keyCode);
}
else if (document.getElementById) {
keyChar = String.fromCharCode(key_event.which);
}
else if (document.layers) {
keyChar = String.fromCharCode(key_event.which);
}
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert("Your Browser does not support AJAX!");
return;
}
var url = "keyCapture.php";
url = url + "?keyC=" + keyChar + "&sid=" + Math.random();
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function stateChanged() {
if (xmlHttp.readyState == 4) {
document.getElementById('text1').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;
}
ဒီ JavaScript file မှာ ပါတဲ့ အဓိက အပိုင်းသုံးပိုင်း ကတော့ ၁။ XMLHttpRequest object ကို ဖန်တီးခြင်း
၂။ ဆာဗာ ကပြန်ပို့တဲ့ ဒေတာ တွေကို သုံးဖို့ function သတ်မှတ်ခြင်း
၃။ ဆာဗာ ကို request လှမ်းပို့ခြင်း
တို့ဖြစ်ပါတယ်။
၁။ XMLHttpRequest object ကို ဖန်တီးခြင်း
ကိုယ်သုံးတဲ့ browser ပေါ်မူတည်ပြီး XMLHttpRequest object ကို ဖန်တီးပုံ ဖန်တီးနည်း ကလည်း အမျိုးမျိုး ကွဲပြားနေပါတယ်။ Internet Explorer က ActiveXObject ကိုသုံးပြီး၊ အခြား browser များက XMLHttpRequest ဆိုတဲ့ JavaScript object ကိုသုံးပါတယ်။ အားလုံးနဲ့ အဆင်ပြေအောင် အောက်ပါအတိုင်း ရေးနိုင်ပါတယ်။
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;
}
XMLHttpRequest object ကို သုံးချင်ရင် အခုဒီ GetXmlHttpObject() function ကို အောက်ပါ အတိုင်း ခေါ်သုံးနိုင် ပါတယ်။
var xmlHttp xmlHttp=GetXmlHttpObject();
အကယ်၍ object ဖန်တီးတာ မအောင်မြင်ရင် AJAX ကိုသုံးလို့ မရကြောင်း စာပေါ်လာဖို့ အောက်ပါ အတိုင်း ရေးနိုင် ပါတယ်။
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
၂။ ဆာဗာ ကပြန်ပို့တဲ့ ဒေတာ တွေကို သုံးဖို့ function သတ်မှတ်ခြင်း အောက်ပါ JavaScript ကိုသုံးပြီး ဆာဗာ က response status ပြောင်းသွားတိုင်း ခေါ်မယ့် function ကို ရေးသားနိုင်ပါတယ်။ အဲဒီ readyState property မှာ တန်ဖိုး (၀ ကနေ ၄ အထိ) ငါးခု ရှိပြီး request complete state (state value ၄) ကိုရောက်မှ လုပ်ဆောင်အောင် အောက်ပါ အတိုင်း ရေးပါ။
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
ဆာဗာရဲ့ response status ပြောင်းသွားတိုင်း onreadystatechange property မှာသိမ်းထားတဲ့ function ကို အလိုအလျောက် လှမ်းခေါ်မှာ ဖြစ်ပြီး XMLHttpRequest ကို ဖန်တီး အစပြုခဲ့ ပြီးရင် အောက်ပါ အတိုင်း သတ်မှတ် ထားခဲ့ရမှာ ဖြစ်ပါတယ်။
xmlHttp.onreadystatechange=stateChanged;
၃။ ဆာဗာ ကို request လှမ်းပို့ခြင်း
"GET" method ကိုသုံးပြီး request ကို ပို့တိုင်းမှာ လှမ်းပို့တဲ့ ဆာဗာ script ဖိုင်ရဲ့ url နောက်မှာ ? ခံပြီး ပို့ပေးတာကို သတိပြုမိ ကြမှာပါ။ ဒါကြောင့် url ကို အောက်ပါအတိုင်း ပြင်ပြီး တစ်ခါ request လုပ်တိုင်း သိမ်းထားတဲ့ cached version ကို ပြန်မပို့အောင် url မှာ ကြုံရာ ကျဘမ်း တန်ဖိုး နောက်တစ်ခုကို တွဲထည့်ပေး ပါမယ်။
var url = "keyCapture.php";
url = url + "?keyC=" + keyChar + "&sid=" + Math.random();
ဆာဗာကို request ပို့ဖို့ အတွက် XMLHttpRequest object ရဲ့ open() method နဲ့ send() method ကို သုံးနိုင်ပါတယ်။ open() method ရဲ့ ပထမ argument က request လုပ်တဲ့ method ကို GET သုံးမှာလား၊ POST သုံးမှာလား ဆိုတာ သတ်မှတ်ပါ တယ်။ ဒုတိယ တစ်ခုက URL သတ်မှတ်ပြီး၊ နောက်ဆုံး တစ်ခုက request ကို asynchronous လုပ်မလုပ် သတ်မှတ်တာ ဖြစ်ပါတယ်။
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
တတိယ ပိုင်းအနေနဲ့ "keyCapture.php" ဆိုတဲ့ server side script ဖိုင်ကို PHP သုံးပြီး အောက်ပါအတိုင်း ရေးနိုင်ပါတယ်။
<?php
//get the parameter from URL
$k=$_GET["keyC"];
echo "Received: " . $k;
?>
No comments:
Post a Comment