9. jQuery Ajax
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:
-
URL: The URL of the server-side resource to which the
request is sent. It could be a CGI, ASP, JSP, or PHP script which
generates data dynamically or out of a database.
-
data: This optional parameter represents an object whose
properties are serialized into properly encoded parameters to be passed
to the request. If specified, the request is made using the POST method. If omitted, the GET method is used.
-
callback: A callback function invoked after the response
data has been loaded into the elements of the matched set. The first
parameter passed to this function is the response text recieved from the
server and second parameter is the status code.
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){ $('#stage').load('/jquery/result.html'); }); }); </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 load() initiates an Ajax request to the specified URL /jquery/result.html file. After loading this file, all the content would be populated inside <div> tagged with ID stage. Assuming, our /jquery/result.html file has just one HTML line:
When you click the given button, then result.html file gets loaded. To understand it in better way you can Try it yourself.<h1>THIS IS RESULT...</h1>
Getting JSON data:
There would be a situation when server would return JSON string against your request. JQuery utility function getJSON() parses the returned JSON string and makes the resulting string available to the callback function as first parameter to take further action.
Syntax:
Here is the simple syntax for getJSON() method:
[selector].getJSON( URL, [data], [callback] ); Here is the description of all the parameters:
-
URL: The URL of the server-side resource contacted via the GET method.
-
data: An object whose properties serve as the name/value
pairs used to construct a query string to be appended to the URL, or a
preformatted and encoded query string.
-
callback: A function invoked when the request completes. The
data value resulting from digesting the response body as a JSON string
is passed as the first parameter to this callback, and the status as the
second.
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"
}
|
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;
}
?>
