Ajax ရဲ႕အဓိကလုပ္ေဆာင္တာကေတာ႔ XMLHttpRequest object ပဲ႔ျဖစ္ပါတယ္
ဒီေတာ႔ XMLHttpRequest Object ကအေရးၾကီးတာေပါ႔
ေနာက္ပိုင္းထြက္လာတဲ႔ Brower ေတာ္ေတာ္မ်ားမ်ားမွာေတာ႔ XMLHttpRequest Object ကိုေကာင္းေကာင္းအလုပ္လုပ္ပါတယ္
အရင္ version ေတြျဖစ္တဲ႔ IE5 နဲ႔ IE6 မွာေတာ႔ ActiveXObject ပံုစံနဲ႔အသံုးျပဳရမွာပါ
ဘာေၾကာင္႔ XMLHttpRequest Object ကိုသံုးရလဲဆိုရင္ server ေနာက္ကြယ္ကေန data ေတြကိုေျပာင္းလဲေပးဖို႔အတြက္ပါပဲ႔
ဆိုလိုတာက ကၽြန္္ေတာ္တို႔ၾကည္႔ေနတဲ႔ webpage ၾကီးတစ္ခုလံုးကို အျမဲတမ္း Update ျဖစ္ေနေအာင္ေပါ႔ ျပီးေတာ႔ အဲဒီ webpage ၾကီးကိုလည္း
Loading လုပ္ေနစရာမလိုေတာ႔အခ်ိန္ကုန္တာလည္းေတာ္ေတာ္ကိုသက္သာေစပါတယ္ စိတ္ခ်မ္းသာတာေပါ႔
ဥပမာ live Score လိုမ်ိဳး .Live Show လိုမ်ိဳး အမ်ားၾကီးရွိပါတယ္ Server မွာေျပာင္းသြားတာနဲ႔ သက္ဆိုင္တဲ႔ webpage ထဲမွာရွိတဲ႔ data လည္း
တစ္ခ်ိန္တည္းမွာ reloading လုပ္စရာမလိုပဲ႔တစ္ခါတည္းေျပာင္းသြားေတာ႔ေတာ္ေတာ္ကိုအဆင္ေျပမွာပါ
ေနာက္ပိုင္းထြက္လာတဲ႔ browser (IE7+, Firefox, Chrome, Safari, and Opera) ေတြမွာ XMLHttpRequest Object ကတစ္ခါတည္းပါလာပါတယ္
ဥပမာ ကၽြန္ေတာ္က XMLHttpRequest Object တစ္ခုကိုဖန္တီးခ်င္တယ္ဆိုပါစို႔
နမူနာ
xmlhttp = new XMLHttpRequest();
Internet Explorer (IE5 and IE6) ရဲ႕version အေပာာင္းဆိုရင္ေတာ႔ ActiveX Object ကိုသံုးျပီးေအာက္ကလိုမ်ိဳးေရးနိုင္ပါတယ္
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
ဒါေၾကာင္႔ browser ေတြအားလံုးမွာအဆင္ေျပေစဖို႔အတြက္ XMLHttpRequest Object နဲ႔ ActiveXObject နွစ္ခုလံုးကိုထည္႔ေရးေပးရင္ေတာ႔ပိုအဆင္ေျပဆံုးပါပဲ႔
နမူနာတစ္ခုေလာက္ေရးၾကည္႔ရေအာင္
အဲဒါ မေရးခင္ welcome.txt ဖိုင္တစ္ခုအရင္ေရးလိုက္ပါ
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{ //ေနာက္ထြက္တဲ႔ browser ေတြအတြက္အဆင္ေျပပါတယ္
xmlhttp=new XMLHttpRequest();
}
else
{ // for IE6, IE5 အတြက္ပါ
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() //ကဲ႔ အဆင္သင္႔ျဖစ္ရင္ function ကို run ဖို႔အတြက္ေရးထားတာပါ
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) //request လုပ္လို႔ျပီးသြားျပီး && ok တယ္ဆိုရင္ေတာ႔
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; //server ကေနျပန္ေပးတဲ႔ data ေတြကို String အျဖစ္ေျပာင္းဖို႔ responseText
}
}
xmlhttp.open("GET","ajax_info.txt",true); //response အဆင္သင္႔ျဖစ္တဲ႔အခါ function ကိုတစ္ခါတည္း run လို႔ေျပာထားတာပါ
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Please,Change me lol.......</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Text</button>
</body>
</html>
အေသးစိတ္ကိုေတာ႔ေနာက္ထပ္လာမယ္႔သင္ခန္းစာေတြမွာရွင္းျပေပးသြားမွာပါ
Written by cyberoot
www.cyberoot.blogspot.com
Ref:w3schools
No comments:
Post a Comment
Thanks for your comments
Welcome from cyberoot