Sunday, May 23, 2010

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 එක විදියට යොදාගන්නවා
?>

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

No comments:

Post a Comment