Ajax Tutorial for Beginner’s
anoopsachari | Apr 07, 2010 | Comments 1
Ajax is shorthand for Asynchronous JavaScript and XML. It allows client side of an application to communicate with the server side of the application. Using Ajax an application can retrieve data from the server asynchronously in the background without refreshing the existing page.
How usual AJAX script works
* Some action activates the event , like clicking a button
* The AJAX call is triggered and sends a request to a server side script using XML
* The server-side script accepts the request and manipulate it as required ( eg : a database read or write )
* After that using XML the script sends the data back to client sie from where the request was made
* A second Javascript function , called the callback function receives the data and updates the web -page .
AJAX call could be implemented in mainly in 2 ways , we could use any of them to implement it in our project
1. Using XMLHTTP request – Create a file named index.php and paste the code in it
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.getElementById('result_div').innerHTML=xmlhttp.responseText;
document.getElementById('loading').style.display='none';
}
else
{
document.getElementById('loading').style.display='';
}
}
xmlhttp.open("GET","process.php?text=23",true);
xmlhttp.send(null);
}
<body> <div style="float:left"> <p>Click to Activate an Ajax call</p> <input type="submit" name="button" id="button" value="Submit" onclick="javascript:ajaxFunction()" /> </div> <div id="loading" style="display:none">please wait ... </div> <div id="result_div" style="margin-top:130px;width:200px;"></div> </body>
Create a file named process.php and paste the following code
$temp = $_REQUEST['text']; $inc = $temp + 3; echo "Return Value : ".$inc;
2. Using JQuery
Before using this code download the jquery pacakge from here.
Create a file named index.php and paste the following code in it
<script type="text/javascript" src="jquery.js"></script>
<body>
<?php $data = 50; ?>
<input type="submit" value="Ajax" onClick="javascript:jquery_ajax('<?php echo $data; ?>');">
<div id="ajax_update"></div>
</body>
<script>
function jquery_ajax(data) {
alert(data);
$.ajax({
type: "POST",
url: "process.php",
data: "text="+data,
success: function(msg){
$('#ajax_update').html(msg);
}
});
}
</script>
Create a file named process.php and paste the following code
$value = $_REQUEST['text']; echo "value passed is : ".$value;
Hope the above tutorial helped you !
Filed Under: ajax
useful info. thanks..soon:)