Are you the beginner in AJAX and just wondering how to use ajax?
The typical AJAQ thing using a traditional AJAX code has been changed by modern AJAX- with Jquery.
So a little definition of the terms will be useful if you are just a beginner to web programming.
AJAX- Asynchronous Javascript And XML
(This means AJAX is a Javascript)
Jquery- is a modern javascript written by highly professional javascript programmers. Jquery is a free javascript file i.e. jquery.js. Thats it. But can do wonders with your code. Jquery also has 100’s of plugins available to add web2.0 capabilities to your website.
So if you are planning to use AJAX i would suggest start with Jquery.
Common Case Study
I have a dropdown displaying list of Countries and another dropdown to fill in the states with the country selected.
How it Works
In a typical situation we will have a front end user interface HTML file, Jquery javascript file to be included in HTML file, a call to a php file using AJAX code to output states from a database.
Click here to view this in action
1. Our HTML file- user interface
<html>
<title>AJAX Request</title>
<head>
<script src=”js/jquery-1.3.2.js”></script>
<script src=”js/get_states.js”></script>
</head>
<body>SELECT COUNTRY TO SHOW STATES
<br><br>
<select name=”country” id=”country”>
<option value=””>Select Country</option>
<option value=”USA”>USA</option>
<option value=”UK”>UK</option>
<option value=”India”>India</option>
</select><br><br>
<div id=”states” style=”display:none”>
<select name=”country_state”></select>
</div></body>
</html>
2. Javascript code- Interact with PHP file
//Regular code to call Jquery when the page is fully loaded
$(document).ready(function() {
//On change of select/ country box
$(“#country”).change(function() {//set state div to empty to clear previous data
data = ”;
$(“#states”).html(data);//Show loader msg to the user
$(“#states”).html(“Loading States”);//Finally AJAX POST call to load data form a php file
$.post(“get_states.php”,{country_name:$(“#country”).val()} , function(data)
{
$(“#states”).html(data);//Show the dropdown because at first loading of the page we have kept this div hidden i.e. display:none
$(“#states”).slideDown(“slow”);
});});
});
3. Our PHP file to output states
<?php
$country_name = $_POST[“country_name”];//You can get the states form the database; here I am using static data for demonstration only
if($country_name == “USA”)
{
$str = ‘<select name=”country_state”>
<option value=””>Select State</option>
<option value=”Alabama”>Alabama</option>
<option value=”Maryland”>Maryland</option>
<option value=”New York”>New York</option>
</select>’;
}
else if($country_name == “UK”)
{
$str = ‘<select name=”country_state”>
<option value=””>Select State</option>
<option value=”London”>London</option>
<option value=”Cardiff”>Cardiff</option>
<option value=”Manchester”>Manchester</option>
</select>’;
}
else if($country_name == “India”)
{
$str = ‘<select name=”country_state”>
<option value=””>Select State</option>
<option value=”Delhi”>New Delhi</option>
<option value=”Maharashtra”>Maharashtra</option>
<option value=”Uttar Pradesh”>Uttar Pradesh</option>
</select>’;}
else
{
$str = “Please select country”;
}//Out put the data through AJAX stream
echo $str;
?>
Easy!!
Let me know if you find this code useful.
By: Gaurav Kumar
Technical Lead in Open Source Technologies
OSWebStudio.Com
Hi,
Thank you! I would now go on this blog every day!