මේ දවස්වල කැම්පස් එකේ නිවාඩු. කම්මැලිකම යන්නත් එක්ක මම හිතුවා ඔයාලට අද AJAX ගැන කියලා දෙන්න.
මොකක්ද මේ AJAX(Asynchronous JavaScript and XML).............
AJAX කියන්නේ සරලව ගත්තොත් Javascript පාවිච්චි කරන Technology එකක්.!!!!! ඇයි බය උනාද? (කියවගෙන යන්න...)
මේ පිංතූරය බලන්න....
මේකෙන් පෙන්නන්නේ HTTP හරහා Client කෙනෙක් Server එකක් එක්ක ගනුදෙනු කරන විදිය.
Client කෙනෙක් Request එකක් කරපුවහම Server එක Response කරනවා.
අපි ගොඩක් වෙලාවට Server එකට Data යවන්න එක්කෝ GET method නැත්නම් POST method යොදාගන්නවනේ. ඒක කරන්නේ අපේ මේ HTML coding එකෙන්.
අපි Form එකට අදාල Submit Button එක Click කරපුවහම තමයි Data ටික Server එකට යන්නේ.
ඒත් ඔයාලට මතක ඇති Form එක Submit වෙනවත් එක්කම Page එක Reload වෙනවා.
දැන් හොද වෙලාව AJAX ගාව ගන්න...
ඉතින් අපට ඕනෙනම් Page එක Refresh(Reload) නොකර Server එකට Data යවන්න හරි Server එකෙන් Data ගන්න හරි, ඒ වෙලාවට අපි AJAX යොදාගන්නවා....
Ex:
- අකුර බැගින් ටයිප් කරනවිට Suggestions පෙන්වීමට (Google Search,Youtube Search)
- E-mail Address එකක් අලුතින් හදන විට දැනට එම E-mail Address එක ලබාගෙන ඇතිද නැතිද යනවග බැලීමට (Yahoo Email Registration)
- List box Item එකක් select කරනවිට ඊට අදාල List එකක් පෙන්වීමට සහ එයිනුත් Item එකක් Select කරනවිට තවත් List එකක් පෙන්වීමට (Intel.com - Downloads)
ගොඩක් AJAX වලින් කරන වැඩ Facebook එකේ තියෙනවා.
දැන් ඔයාලට වල අවශ්‍යතාවය තේරෙනවනේ.
ඊලගට අපි ඒක ඉගෙනගන්න යන්නේ.
AJAX ඉගෙනගන්න ඔයාලා දැනගන සිටිය යුතු දේවල්....
- HTML Basics
- Javascript
- Any Server Side Scripting Language (Ex: PHP/ASP/ASP.NET)
දැන් කතා ඇති AJAX පටන්ගමු.......
Example 0 : Server එකේ ඇති Data එකක් ගෙන්වාගැනීම.
View Example : www.chikugossip.noads.biz/ajax/ajax-sam.html
Download Sample_0.zip
ajax-sam.html file එකේ coding එක.
<html>
<head>
<title>Ajax Sample - Chiku Gossips</title>
<script type="text/javascript" src="ajax.js"></script> <!-- imports ajaz.js --->
<!-- ajax.js file එක අපේ ajax-sam.html file එකට import කරගන්නවා ---->
</head>
<body>
<h1>Ajax Sample - 0</h1>
<div id="dataViewer">Data will display here</div>
<!-- server එකෙන් ගන්න data පෙන්නන්නේ මේ div එකේ --->
<br/><input type="button" onClick="grabData()" value="Show"/>
<!-- button එකේ onClick event එකේදි grabData() function එක call වෙනවා-->
</body></html>
ajax.js file එකේ coding එක.
var myObj =false; // Define XMLHttpRequest Object and Initilized to false
// XMLHttpRequest Object එකක් හදලා ඒකේ අගය false කරනවා
if(window.XMLHttpRequest){ // මේකෙන් කරන්නේ user ඉන්න browser එක මොකක්ද කියලා බලලා ඊට ගැලපෙන විදියට XMLHttpRequest ඔබ්ජෙක්ට් එක set කරනවා
myObj=new XMLHttpRequest(); // for Mozilla Firefox
}else if(window.ActiveXObject){
myObj=new ActiveXObject("Microsoft.XMLHTTP"); // for Internet Explorer
}
function grabData(){ //ajax-sam.html file එකේ දි call කරන්නේ මේ function එක
if(myObj){ // check myObj is true or not
var source='grabData.php'; // php file at the server
// server එකේ php file එකේ නම
myObj.open('GET',source); //open XMLHttpRequest ObjectmyObj.onreadystatechange=function(){
if(myObj.readyState == 4 && myObj.status == 200){
//XMLHttpRequest එකේ ready state එක 4 ද කියලා බලලා XMLHttpRequest එකේ status එක 200 ද කියලා බලනවා
//ready state එක 4 කියන්නේ complete
//status එක 200 කියන්නේ OK
document.getElementById('dataViewer').innerHTML=myObj.responseText;
//div (dataViewer) එකට XMLHttpRequest එකේ responseText එක දානවා
}}
myObj.send(null);
}
}
grabData.php file එකේ coding එක.
<?PHP
$nameArr=array('Chiku','Eda','Gaja','Bate','Luky','Dammi','Chicks','Gajamatix','Edison','Bada','Ediyananda');
echo($nameArr[rand(0,count($nameArr)-1)]." Is Here");
?>
$nameArr=array('Chiku','Eda','Gaja','Bate','Luky','Dammi','Chicks','Gajamatix','Edison','Bada','Ediyananda');
echo($nameArr[rand(0,count($nameArr)-1)]." Is Here");
?>
------------//------------
No comments:
Post a Comment