Sunday, May 23, 2010

AJAX තනියෙන් ඉගෙනගන්න - 3

මම හිතනවා ඔයගොල්ලන්ට AJAX ගැන තරමක දැනුමක් ලැබෙන්න ඇති කියලා...
දැන් අපි  දැනට කරපු උදාහරණ වලට පොඩි කොටසක් එකතු කරලා අපේ Web Page එක ලස්සන (add Some Professional look) කරගමු.

User button එක click කරලා server එකෙන් data එනකන් බලන් ඉන්න උනොත්?
(Due to Traffic on Server / Speed of Internet Connection)
සමහරවිට User  හිතයි එක crash/stuck වෙලාකියලා..

ඒකට තියන විසදුම  තමයි Loading..... කියලා  user ට පෙන්නන එක.

ඔක්කෝටම කලින් අපි  අපේ Page එක තවම Data Loaging... කියලා අගවන *.gif File එකක් හදමු.
http://www.ajaxload.info/ එකෙන් කැමති විදිහක Loaging... Gif එකක් හදාගන්න පුලුවන් .

 මේ වගේ එකක් හොදයි.




ඊට පස්සේ කරන්නේ මේ කේත කොටස අපේ *.Html File එකේ අවශ්‍ය තැනින් දාගන්නවා

<img  style="visibility:hidden" src="myLoader.gif"/>

මේක image tag එකක්. හැබැයි එක hidden කරලයි තියෙන්නේ. අපි කරන්න හදන්නේ අපේ javascript එකෙන් ඒ image එක visible කරන්න.

 src="myLoader.gif" එකට අපේ gif එක save කරගත්තු path එක දෙන්න.

දැන් javascript එක බලමු.


function grabData(val){

  if( myObj){     

document.getElementById('loading').style.visibility='visible'; // show gif

    var source='grabData2.php?val='+val+"&u="+Math.random();  
    myObj.open('GET',source);  
    myObj.onreadystatechange=function(){
       
        if(myObj.readyState == 4 && myObj.status == 200){
            document.getElementById('cust').innerHTML=myObj.responseText;

            document.getElementById('loading').style.visibility='hidden'; //hide gif

            }
        }

        myObj.send();
  }
}
 මේ function එක ඔයාලට මතක ඇති. ඒකේ අලුතින් add  කරලා තියන code line දෙක බලන්න.

දැන් හරි. web page එක refresh කරලා බලන්න.

දැන‍ට කරපු උදාහරණ ‍වල updated virsion මෙතනින් ගන්න.

View Example : http://chikugossip.noads.biz/updates/ajax/ajax-sam.html
Download Sample_0

View Example :http://chikugossip.noads.biz/updates/ajax1/ajax-sam1.html
Download Sample_1

View Example : http://chikugossip.noads.biz/updates/ajax2/ajax-sam2.html
Download Sample_2



(Special Thanks to www.kuppiya.com)



----------//-----------

AJAX තනියෙන් ඉගෙනගන්න - 2

මේකත් අපි කලින් කරපු එකට සමාන එකක්...

Example 2 : යම්කිසි Value එකක් Server එකට Send  කරලා ඊට අදාල  data ටික Menu එකක‍ට  Fill කරගැනීම.
View Example : www.chikugossip.noads.biz/ajax2/ajax-sam2.html
Download Sample_2.zip 




ajax-sam2.html   file එකේ coding  එක.


<html>
<head>
<title>Ajax Sample2 - Chiku Gossips</title>
<script type="text/javascript" src="ajax2.js"></script>
</head>

<body>
<h1>Chaining Combo Boxes (Menu/List)</h1>
<h3>Send Value by Selecting Menu item  and Fill another Menu</h3>

<table width="905" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="173" align="left">Select Route First : </td>
    <td width="192" align="left"><select name="route" id="route" onChange="grabData(this.value)">
      <option selected value="3" style="font-weight:bold">Select Route</option>
      <option value="0">Kelaniya</option>
      <option value="1">Kiribatgoda</option>
      <option value="2">Kadawata</option>
    </select></td>
    <td width="154" align="left">Select Customer then :</td>
    <td width="386" align="left"><div id="cust" ></div></td>
  </tr>
</table>


</body>
</html>

ajax2.js  file එකේ coding  එක. 


var myObj =false; // Define XMLHttpRequest Object and Initilized to false
if(window.XMLHttpRequest){
    myObj=new XMLHttpRequest(); // for Mozilla Firefox
}else if(window.ActiveXObject){
    myObj=new ActiveXObject("Microsoft.XMLHTTP"); // for Internet Explorer
}

function grabData(val){

  if( myObj){ // check myObj is true or not
   
    var source='grabData2.php?val='+val+"&u="+Math.random();  // php file at the server
    myObj.open('GET',source);   //open XMLHttpRequest Object
    myObj.onreadystatechange=function(){
       
        if(myObj.readyState == 4 && myObj.status == 200){
            document.getElementById('cust').innerHTML=myObj.responseText;
            }
        }
        myObj.send();
  }
}



grabData2.php file එකේ coding  එක.  



<?PHP
$i=0;
$route=$_GET['val'];

$custArr=array();
$custArr[0]=array('Gamage','Sarath','Kapila','Kelum','Anoma');
$custArr[1]=array('Srithunga','Kamalsiri','Premasiri','Karunathilaka','Sepalika');
$custArr[2]=array('Saumya','Asha','Piyadasa','Ganegama','Sumathipala');


if ($route <3){
    echo("<select><option selected style='font-weight:bold'>Select Customer</option>");
    for($i=0;$i<count($custArr[$route]);$i++){
        echo("<option value='".$i."'>".$custArr[$route][$i]."</option>");
    }
    echo("</select>");
}
?>


-------------//--------------
 

AJAX තනියෙන් ඉගෙනගන්න - 1

අපි පසුගිය පාඩමෙන් ඉතාම සරල AJAX භාවිතයක් ගැන සලකා බැලුවා
අද අපි තවත් වැදගත් උදාහරණයක් සලකා බලමු.

Example 1 : යම්කිසි Value එකක් Server එකට Send  කරලා ඊට අදාල  data එකක් ආපසු ගෙන්වාගැනීම.
View Example : www.chikugossip.noads.biz/ajax1/ajax-sam1.html
Download Sample_1.zip 


ajax-sam1.html   file එකේ coding  එක.

<html>
<head>
<title>Ajax Sample1 - Chiku Gossips</title>
<script type="text/javascript" src="ajax1.js"></script>
</head>

<body>
<h1>Ajax Send and Get Data From Server</h1>
<h3> we are sending the <del>name</del> value corresponded to name using menu on select onChange event</h3>
<p><br/>
 
  Select Name :
  <select name="select" id="select" onChange="grabData(this.value)">
<!-- Menu එකේ onChange event එකේදි Menu Item එකේ value එක pass කරමින් grabData() function එක call වෙනවා -->
   <option  value="6" style="font-weight:bold" selected>Select Name</option>
    <option  value="0">Chiku</option>
    <option value="1">Gajamatix</option>
    <option value="2">Edison</option>
    <option value="3">Bada</option>
    <option value="4">Bate</option>
    <option value="5">Laky</option>
  </select>
</p>
<p><br/>
 
  <input type="text" id="fullname" name="fullname" size="50" value="Full Name Goes HERE!!"/>
<!-- server එකෙන් ගන්න data  පෙන්නන්නේ මේ text field එකේ --->
</p>
</body>
</html>

ajax1.js  file එකේ coding  එක.

var myObj =false; // Define XMLHttpRequest Object and Initilized to false
if(window.XMLHttpRequest){
    myObj=new XMLHttpRequest(); // for Mozilla Firefox
}else if(window.ActiveXObject){
    myObj=new ActiveXObject("Microsoft.XMLHTTP"); // for Internet Explorer
}

function grabData(val){
   
  if( myObj){ // check myObj is true or not
   
    var source='grabData.php?val='+val+"&u="+Math.random();  // php file at the server
    myObj.open('GET',source);   //open XMLHttpRequest Object
    myObj.onreadystatechange=function(){
       
        if(myObj.readyState == 4 && myObj.status == 200){
           
            document.getElementById('fullname').value=myObj.responseText;
           
            }
        }
        myObj.send();
  }
}

grabData1.php file එකේ coding  එක. 

<?PHP
$nameArr=array('Gayan Chinthaka Kumaranayake','Isuru Anushka Jayasooriya','Samin Dhanesh Madushanka','Damith Gunasena','Manjula Batagalla','Lakshitha Pradeep','Full Name Goes HERE!!');

echo($nameArr[$_GET['val']]);
    // $_GET['val'] එකෙන් තමයි ajax-sam1.html එකෙන් pass  කරපු value එක ගන්නේ. ඒක කෙලින්ම Array එකේ index එක විදියට යොදාගන්නවා
?>

-------------//--------------

Saturday, May 22, 2010

AJAX තනියෙන් ඉගෙනගන්න - 0

හලෝ. යාලුවනේ, ගොඩක් කාලෙකට පස්සේ හම්බ උනේ.
මේ දවස්වල කැම්පස් එකේ නිවාඩු. කම්මැලිකම යන්නත් එක්ක මම හිතුවා ඔයාලට අද 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 method="GET" action="loginValidator.php">

blah blah...

</form>


අපි Form එකට අදාල Submit Button එක Click කරපුවහම තමයි Data ටික Server එකට යන්නේ.
ඒත් ඔයාලට මතක ඇති Form එක Submit වෙනවත් එක්කම Page එක Reload වෙනවා.

දැන් හොද වෙලාව AJAX ගාව ගන්න...

ඉතින් අපට ඕනෙනම් Page එක Refresh(Reload) නොකර Server එකට Data යවන්න හරි Server එකෙන් Data ගන්න හරි, ඒ වෙලාවට අපි AJAX යොදාගන්නවා....

Ex:
  1. අකුර බැගින් ටයිප් කරනවිට Suggestions පෙන්වීමට (Google Search,Youtube Search)
  2. E-mail Address එකක් අලුතින් හදන විට දැනට එම E-mail Address එක ලබාගෙන ඇතිද නැතිද යනවග බැලීමට (Yahoo Email Registration)
  3. List box Item එකක් select කරනවිට ඊට අදාල List එකක් පෙන්වීමට සහ එයිනුත් Item එකක් Select කරනවිට තවත් List එකක් පෙන්වීමට (Intel.com - Downloads)

ගොඩක් AJAX වලින් කරන වැඩ Facebook එකේ තියෙනවා.

දැන් ඔයාලට වල අවශ්‍යතාවය තේරෙනවනේ.
ඊලගට අපි ඒක ඉගෙනගන්න යන්නේ.

AJAX ඉගෙනගන්න ඔයාලා දැනගන සිටිය යුතු දේවල්....
  1. HTML Basics
  2. Javascript
  3. 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 Object
    myObj.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");
?>

------------//------------