Twitter
LinkedINSomehow I got a lot of questions about jQuery and Ajax, which is quite easy to understand.
I’ll show you how to create an ajax call using jQuery and update the page without reloading.
I assume you have knowledge of HTML, CSS and basic HTTP techniques.
First we’re going to create our HTML document.
Our HTML5 document
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>My jQuery Ajax test</title>
<style type="text/css">
#mybox {
width: 300px;
height: 250px;
border: 1px solid #999;
}
</style>
</head>
<body>
The following div will be updated after the call:<br />
<div id="mybox">
</div>
<input type="button" value="Update" />
</body>
</html>
As you can see it’s a simple HTML5 document with a little style, a DIV element and a button.
jQuery
You may have noticed jQuery isn’t included yet. You can include it through a CDN (Content Delivery Network) or host it yourself.
See http://docs.jquery.com/Downloading_jQuery for more ways to include jQuery.
Add the following between the
tags of our HTML5 document:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
At the time of this writing we use jQuery 1.7.2 hosted at the Google API’s.
Your Ajax call
Create the following code between the
and tags, for example below the jQuery source.
<script>
function myCall() {
var request = $.ajax({
url: "ajax.php",
type: "GET",
dataType: "html"
});
request.done(function(msg) {
$("#mybox").html(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
</script>
That’s it! Lets break it down a little:
function myCall() {
var request = $.ajax({
url: "ajax.php",
type: "GET",
dataType: "html"
});
Here you’re creating a function called “myCall” which will make the actual request to a file on your server called “ajax.php”.
We’re using GET HTTP-request to send our data to the server.
The expected type of the return code is HTML.
request.done(function(msg) {
$("#mybox").html(msg);
});
When the request is done fetching our data from ajax.php it will update the DIV “#msgbox” with the output of ajax.php
If the request fails it will show an alert message with the failure message.
To make the actual call add this to the input button element:
<input type="button" value="Update" onclick="myCall();" />
When you press the button it will execute your function “myCall()” we’ve created earlier.
Server-side script
In this tutorial we’ll create a PHP file that will act as the ajax callable file. You could use any server-side scripting language you prefer.
<?php echo '<p>Hi I am some random ' . rand() .' output from the server.</p>';
Save the above code as “ajax.php” and make sure you upload it in the same spot as the HTML document.
You should now have 2 files in the same folder, one is the HTML document:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>My jQuery Ajax test</title>
<style type="text/css">
#mybox {
width: 300px;
height: 250px;
border: 1px solid #999;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function myCall() {
var request = $.ajax({
url: "ajax.php",
type: "GET",
dataType: "html"
});
request.done(function(msg) {
$("#mybox").html(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
</script>
</head>
<body>
The following div will be updated after the call:<br />
<div id="mybox">
</div>
<input type="button" value="Update" onclick="myCall()" />
</body>
</html>
And the PHP file “ajax.php”:
<?php echo '<p>Hi I am some random ' . rand() .' output from the server.</p>';
Refresh your browser and press the button a few times. You’ll see the div will update itself with the output of the ajax file.
output of ajax.php
at 11:12
Nice article
J also write something about jQuery and AJAX
http://www.matw.pl/blog/2012/12/jquery-ajax
at 11:56
example is fine
at 16:00
just what i was looking for. Thanx
at 16:30
Great example, thanks!
at 15:32
WAY TO GO! You’re the only one to keep it genuinely simple and graspable. Everyone else seems to be showing off in some way or another and making it incomprehensible!
at 11:12
Thank you for this awesome tut!
at 13:29
very very nice tuttorial. thenk u for ajax
at 18:17
The example not working for me in Chrome 26.0.1410.65 on a server behind a firewall.
(works in other browsers, thanks a lot! )
at 17:18
For whatever reason, I’ve been struggling with the implementation of AJAX calls (until now). This is the first post that I’ve seen that clearly lays out how to implement this. Thanks!
at 18:45
Hi Craig,
Thanks for your kind reply. I will add another jquery ajax tutorial online in a few days.