Dec
18th

How to develop Web Application with Ajax

Files under AJAX, JavaScript | Posted by thiha

ဒီ Tutorial ေလးကေတာ့ AJAX((Asynchronous Javascript and XML applications) ကို အသံုးျပဳၿပီး Web Application တစ္ခု တည္ေဆာက္ပံုကို အရိုးရွင္းဆံုး ပံုစံနဲ႔ တင္ျပထားတာ ျဖစ္ပါတယ္။ Ajax ရဲ႕ အဓိက အားသာခ်က္ကေတာ့ Web Page အစိတ္အပိုင္းတစ္ခုက ေျပာင္းသြားတဲ့အခါ Page တစ္ခုလံုးကို Reload လုပ္စရာမလိုပဲ သူ႔အပိုင္းေလး သီးသန္႔ load လုပ္ ႏိုင္တာပါပဲ။ Web နည္းပညာမွာ ေနာက္ဆံုးနည္းပညာတစ္ခု ဆိုရင္လည္း မမွားပါဘူး။ JavaScript ဆိုရင္ AJAX နဲ႔ တြဲသြားတဲ့ အထိလြမ္းမိုးထားပါတယ္။ www.ning.com တို႔လို Web 2.0 Web Site ေတြမွာ ေလ့လာၾကည့္ရင္ Ajax ေတြ ေနရတကာ သံုးထားတာ ေတြ႔ရပါမယ္။ Web နည္းပညာအရ ေျပာရရင္ေတာ့ Ajax ဆိုတာXML က Data ေတြကို Javascript နဲ႔ ဖတ္တာပါပဲ။ ဒီ tutorial မွာ remote (server) မွာရွိတဲ့ XML ဖိုင္ကို web page ကေန ajax ကို အသံုးျပဳၿပီး ဘယ္လို ဖတ္တယ္ဆိုတာကို တင္ျပမွာျဖစ္ပါတယ္။

ပထမဦးဆံုးအေနနဲ႔ XML ဖိုင္တစ္ခုကို တည္ေဆာက္ရပါမယ္။ data.xml လိုေပးပါ့မယ္။


<?xml version="1.0" encoding="UTF-8">

<root>

<data>

This is some sample data. It is in an XML file and retrieved by JavaScript.

</data>

</root>

အဲဒါၿပီးရင္ ေနာက္ထပ္ HTML ဖိုင္တစ္ခု တည္ေဆာက္ရပါမယ္။ ဒီဖိုင္မွာ JavaScript ေတြထည့္ၿပီး Ajax ကို တည္ေဆာက္ရပါမယ္။ နာမည္ကို ajax.html လို႔ေပးလိုက္ပါ။


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Developing Web Applications with Ajax - Example</title>
</head>
<body>
<h1 id="58_developing-web-appli_1" >Developing Web Applications with Ajax</h1>
<p>This page demonstrates the use of Asynchronous Javascript and XML (Ajax) technology to
update a web page's content by reading from a remote file dynamically -- no page reloading
is required. Note that this operation does not work for users without JavaScript enabled.</p>
<p id="xmlObj">
This is some sample data. It is the default data for this web page. <a href="data.xml"
title="View the XML data." onclick="ajaxRead('data.xml'); this.style.display='none'; return false">View XML data.</a>
</p>
</body>
</html>

ဒီအထိၿပီးလို႔ စမ္းၾကည့္ရင္ JavaScript Error တက္ေနပါလိမ့္မယ္ ajaxRead(’data.xml’); ဆိုတဲ့ေနရာမွာ error တက္ေနပါလိမ့္မယ္ … ဒီေတာ့ ေအာက္ဖက္က source code ေတြကို <head> …. </head> tag မွာထည့္ေပးပါ။


<script type="text/javascript">

<!--
function ajaxRead(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
//--></script>

ဒီ Source Code ေလးထည့္လိုက္ရင္ေတာ့ Error မတက္ေတာ့ပါဘူး … ဘာျဖစ္လို႔လဲဆိုရင္ Ajax function တစ္ခုျဖစ္တဲ့ ajaxRead() က အလုပ္လုပ္လို႔ပါ …

ဒီ Function ထဲမွာ xmlObj ကို သတ္မွတ္ပါတယ္။ သူက User(Web Site ကို အသံုးျပဳသူ)နဲ႔ Server ၾကားမွာ ၾကားခံကိုယ္စားလွယ္အေနနဲ႔ ေဆာင္ရြက္ပါလိမ့္မယ္။ ဒီလိုသတ္မွတ္တာကို if/else statement ထဲမွာထားပါတယ္။


</p>
function ajaxRead(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}

ဒီလို if/else statement ထဲမွာထားရတာဟာ အဓိကကေတာ့ XMLHttpRequest() ဆိုတဲ့ function က Browser မွာ အလုပ္လုပ္သလား၊ ရွိသလားဆိုတာကို စမ္းသပ္တာျဖစ္ပါတယ္။ Browser အားလံုးကေတာ့ ရွိၾကပါတယ္။ တစ္ခ်ဳိ႕ browser ေတြအတြက္သာ error မတက္ေအာင္ထည့္ တဲ့သေဘာျဖစ္ပါတယ္။

ေနာက္တစ္ပိုင္းက


xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}

XMLHttpRequest ရဲ႕ အေျခအေနေျပာင္းတိုင္း ေျပာင္းတိုင္း onreadystatechange ဆိုတဲ့ event ကို trigger လုပ္ပါတယ္(ျဖစ္ေပၚေစပါတယ္)။

xmlObj.onreadystatechange = function(){ …… } ကို သံုးျခင္းအားျဖင့္ XMLHttpRequest object မွာ ေျပာင္းလဲမႈျဖစ္တိုင္း ဒီ function ကို တည္ေဆာက္တယ္ အလုပ္လုပ္ ေစပါတယ္။ XMLHttpRequest မွာ ေျပာင္းလဲမႈအေျခအေန ငါးခုရွိပါတယ္။ 0 ကေန စၿပီး 4 အထိရွိပါတယ္။

0 - uninitialized (XMLHttpRequest မတိုင္ခင္)

1 - loading (XMLHttpRequest မွာ data initialized လုပ္ၿပီးစ (server ကေန response မရေသးခင္))

2 - loaded (XMLHttpRequest က server ကေန response ရၿပီးခ်ိန္)

3 - interactive (XMLHttpRequest object အေနနဲ႔ Server ကို ခ်ိတ္ေနတဲ့အခ်ိန္)

4 - complete (အားလံုးၿပီးသြားတဲ့အခ်ိန္)

ေနာက္ဆံုးအဆင့္က ကၽြန္ေတာ္တို႔ အတြက္ Data ကို ေသေသခ်ာခ်ာရတဲ့ အခ်ိန္ပါ။ ဒါေၾကာင့္ xmlObj.readyState == 4 ဆိုၿပီး စစ္ရတာပါ။ ေနာက္တစ္ခုက updateObj(….) function အေနနဲ႔ parameters ႏွစ္ခုလိုပါတယ္။ ပထမတစ္ခုက update လုပ္ေပးရမယ့္ Current Web Page က element ID (ဒီ program မွာဆိုရင္ေတာ့ xmlObj ပါ)၊ ေနာက္တစ္ခုက အဲဒီ element ကို ျဖည့္ေပးရမယ့္ Data ပါ။


5 Responses to “How to develop Web Application with Ajax”

  1. By Yan Naing on May 6, 2008 | Reply

    Hello, OpenXTeam!

  2. By Yan Naing on May 6, 2008 | Reply

    Yes, I am.

  3. By LoRdiE on Jul 30, 2008 | Reply

    It’s helpful. You should write more tutorial.

  4. By ksw on Aug 2, 2008 | Reply

    Thank for u sharing

  5. By coco on Nov 24, 2008 | Reply

    The XML page cannot be displayed
    Cannot view XML input using style sheet. Please correct the error and then click the Refresh button, or try again later.

    ——————————————————————————–

    Expecting whitespace or ‘?’. Error processing resource ‘file:///D:/my files/Script/test ajax/data.xml’. Line 1, Position 37

    ….when click this link ” View XML data “…above error appear in data.xml page

Post a Comment