9. jQuery Ajax
AJAX is an acronym standing for Asynchronous JavaScript and XML and
this technology help us to load data from the server without a browser
page refresh.
If you are new with AJAX, I would recommend you go through our Ajax Tutorial before proceeding further.
JQuery is a great tool which provides a rich set of AJAX methods to develope next generation web application.
Loading simple data:
This is very easy to load any static or dynamic data using JQuery AJAX. JQuery provides
load() method to do the job:
Syntax:
Here is the simple syntax for
load() method:
[selector].load( URL, [data], [callback] );
Here is the description of all the parameters:
Example:
Consider the following HTML file with a small JQuery coding:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('/jquery/result.json', function(jd) {
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>');
$('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="background-color:blue;">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>
Here JQuery utility method
getJSON() initiates an Ajax request to the specified URL
/jquery/result.json
file. After loading this file, all the content would be passed to the
callback function which finally would be populated inside <div>
tagged with ID
stage. Assuming, our /jquery/result.json file has following json formatted content:
{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}
|
When you click the given button, then result.json file gets loaded. To understand it in better way you can Try it yourself.
Passing data to the Server:
Many times you collect input from the user and you pass that input to
the server for further processing. JQuery AJAX made it easy enough to
pass collected data to the server using
data parameter of any available Ajax method.
Example:
This example demonstrate how can pass user input to a web server
script which would send the same result back and we would print it:
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
var name = $("#name").val();
$("#stage").load('/jquery/result.php', {"name":name} );
});
});
</script>
</head>
<body>
<p>Enter your name and click on the button:</p>
<input type="input" id="name" size="40" /><br />
<div id="stage" style="background-color:blue;">
STAGE
</div>
<input type="button" id="driver" value="Show Result" />
</body>
</html>
Here is the code written in
result.php script:
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
