Ajax ဆိုတာဘာလဲ?
လူေတြေျပာၾကတာကေတာ႔ Asynchronous JavaScript and XML ဆိုပဲ႔ ဆိုလိုတာက Javascript နဲ႔ XML ကို asynchronous လုပ္ထားတာပါAsynchronous ဆိုတာကေကာ ဘာလဲ အရင္ကကၽြန္ေတာ္လည္းမသိပါဘူး ကၽြန္ေတာ္သိတာကေတာ႔
Synchronous = ဥပမာ ကၽြန္ေတာ္ကသင္႔ကို တာတာလိုလက္ျပျပီးနုတ္ဆက္တယ္ဗ်ာ ကၽြန္ေတာ္လက္ျပတာျမင္က ခင္ဗ်ားကလည္း တာတာလို႔ျပန္ျပတယ္
တစ္ခုျပီးမွတစ္ခုေပါ႔ ။ကၽြန္ေတာ္လက္ျပတာျမင္ျပီးမွ သင္႔က လက္ျပန္ျပတာပါ ျပီးေတာ႔ ဖုန္းေျပာတာကမ်ိဳးလည္း Synchronous လုပ္တာပါ
ကၽြန္ေတာ္တို႔က Hello လို႔အရင္ေျပာတယ္ ကၽြန္ေတာ္ေျပာတာကိုနားေထာင္ျပီးမွ ဟိုဘက္ကလည္း Hello လို႔ျပန္ေျပာတယ္ေလ ဟုတ္
Asynchronous= သူကေတာ႔ ကၽြန္ေတာ္တို႔ ဖုန္းေျပာသလိုမ်ိဳးပါပဲ႔ အေပၚမွာေျပာခဲ႔တဲ႔ပံုစံနဲ႔ဖုန္းေျပာတာမ်ိဳးေတာ႔မဟုတ္ဘူး ဖုန္းထဲမွာရန္ျဖစ္ေနတဲ႔ပံုစံနဲ႔တူပါတယ္
တစ္ဘက္ကေျပာတာျပီးေအာင္မေစာင္႔ဘူးဗ်ာ သူေျပာခ်င္တာကိုေျပာတာ ဒီဘက္ကလည္းဟိုဘက္ကေျပာတာ ျပီးတာမျပီးတာနားမလည္ဘူးသူလည္းစိတ္ထဲ႔ကရွိတာေျပာတယ္
icon နဲ႔ဖုနး္ေျပာေနတာလည္း asynchronous လုပ္တာပါပဲ႔ ရဲေတြေျပာတာေတြ႔ဖူးလား ေျပာခ်င္တဲ႔လူကျပာ က်န္တဲလူေတြကၾကားေနရတယ္ ေျပာခ်င္တဲ႔လူကၾကားထဲကေန၀င္ေျပာတယ္
အဲဒါဆို Asynchronous ေပါ႔
Ajax ဆိုတာက အေပၚကေျပာခဲ႔သလိုပါ႔ပဲ႔ ကၽြန္ေတာ္တို႔ program အလုပ္လုပ္ေနတဲ႔အခ်ိန္မွာ ေနာက္ကြယ္ကေန Javascript နဲ႔ xml ဖိုင္ကို
Asynchronous လုပ္ေပးတာေပါ႔ အဆင္ေျပမယ္လို႔ထင္ပါတယ္
ျပီးေတာ႔ အခ်ိဳ႕လူေတြက Ajax ဆိုတာ programming language အသစ္လို႔ထင္ၾကတယ္ တစ္ကယ္ေတာ႔ လက္ရွိရွိျပီးသားျဖစ္တဲ႔ language ကို
modified လုပ္ထားတဲ႔ Technology တစ္ခုပဲ႔ျဖစ္ပါတယ္
ဘာေတြလုပ္နိုင္လဲဆိုရင္ေတာ႔ Server က Data ေတြကိုေျပာင္းလဲလို႔ရတယ္ ျပီးေတာ႔ webpage တစ္ခုလံုးကို reloading လုပ္စရာမလိုပဲ႔ လိုအပ္တဲ႔ အပိုင္းေတြေလာက္ပဲ႔
ျမန္ျမန္ဆန္ဆန္ Update လုပ္ေပးနိုင္တယ္
ဥပမာ Fackbook လိုမ်ိဳးဟာက ေနာက္တက္လာမယ္႔ post or comment ေတြကိုေနာက္ကြယ္ကေန ajax သံုးျပီး Loading လုပ္ေပးပါတယ္
Ajax နမူနာပံုစံ
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
ဒါကနမူနာပါ နည္းနည္းေတာ႔ရွုပ္ေနလိမ္႔မယ္ ေနာက္ပိုင္းမွာနားလည္သြားမွာပါ Don't worry my Friends , Life is fighting
Ajax ကိုစေလ႔လာေတာ႔မယ္ဆိုရင္ Html , Css , Javascript / DOM ကိုသိဖိုေတာ႔လိုပါတယ္
Dynamic web site ေတြကိုပိုမိုျမန္ဆန္ေစဖို႔အတြက္ Ajax နည္းပညာကိုအသံုးျပဳၾကပါတယ္
Server ေနာက္ကြယ္ကေနျပီးေတာ႔ လိုအပ္တဲ႔ data ေတြကို ေျပာင္းလဲဖို႔အတြက္ ajax ကလုပ္ေဆာင္ေပးနိုင္ပါတယ္
ဆိုလိုတာက အေပၚမွာေျပာသလိုပဲ႔ web page တစ္ခုလံုးကို loading လုပ္စရာမလိုပဲ႔ လိုအပ္တာကိုပဲ႔ကြက္ျပီး အလြယ္တကူလုပ္ေဆာင္နိုင္ပါတယ္
Ajax နည္းပညာသံုးထားတဲ႔ နာမည္ၾကီး website ေတြကေတာ႔ Google Maps, Gmail, Youtube, and Facebook tabs.
ဒါဆို Ajax ဘယ္ေလာက္အေရးပါလဲဆိုတာ သေဘာေပါက္မယ္ထင္ပါတယ္
သူရဲအလုပ္လုပ္ပံုပါ
Ajax နည္းပညာကို internet Standards အေပၚမွာအေျခခံျပီးတည္ေဆာက္ထားတာပါ
Server က data ကို ေျပာင္းလဲဖို႔အတြက္ XMLHttpRequest ဆိုတဲ႔ object ကိုသံုးထားပါတယ္
information လုပ္ေဆာင္ခ်က္ေတြကိုျပေပးဖို႔အတြက္ Javascript / Dom ကိုသံုးထားပါတယ္
Data ရဲ႕ Design လုပ္ဖို႔အတြက္ Css ကိုအသံုးျပဳထားပါတယ္
Google က Ajax ကို 2005 ခုနွစ္ေလာက္မွာပိုျပီး Popular ျဖစ္လာေစခဲ႔တယ္
Google Search box ထဲမွာစာစရိုက္လိုက္တာနဲ႔ Javascript က ရိုက္လိုက္တဲ႔ စာကို server ကိုပို႔ေပးျပီးေတာ႔ server ကေန return ျပန္လာတဲ႔
list ကိုျပန္ျပေပးပါတယ္
အေပၚကနမူနာေရးထားတဲ႔ ajax ကိုနည္းနည္းေလာက္ရွင္းျပေပးခ်င္ပါတယ္
ေရးထားတဲ႔ Code ေအာက္နားေလးမွာ div section တစ္ခုနဲ႔ button တစ္ခုပါတယ္ဆိုတာသတိျပဳမိမွာပါ
ကၽြန္ေတာ္က div section ကိုေတာ႔ Server ကေနျပန္လာတဲ႔ information ကို return ျပန္ျပဖို႔အတြက္အသံုးျပဳထားပါတယ္
Button ကိုေတာ႔ loadXMLDoc() ဆိုတဲ႔ function ကိုေခၚဖို႔အတြက္အသံုးျပဳထားျခင္းျဖစ္ပါတယ္
အရင္ဆံုးအေပၚကလိုမေရးခင္ ရုိးရိုးေလး ေရးၾကည္မယ္
<html>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
ေနာက္ထပ္ script ကိုေတာ႔ html ရဲ႕ head section ထဲမွာေပါင္းျပီးေရးထည္႔ပါတယ္
script ထဲမွာေတာ႔ loadXMLDoc() function ကိုထည္႔ေရးထားပါတယ္ ဒီေတာ႔
<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>
ဒီေန႔ေတာ႔ဒီေလာက္ပါပဲ႔ ေနာက္မွဆက္ရေအာင္ဗ်ာ
Written by cyberoot
(MHU Team)
http://cyberoot.blogspot.com(I miss my Home)
Ref:w3schools
