Web pages are old. HTTP (the protocol that browsers use to retrieve pages) has been around since the early 90's and was originally designed as a simple request/response mechanism. Unfortunately this means that any time a page needs updating, the whole thing has to be re-downloaded from the server which can be slow, tiresome and leads to annoying screen repaints. Enter AJAX (Asynchronous Javascript and XML), a methodology developed in the late 90's that allows javascript to request data from the server, this allows developer's to write cleaner, nicer and more helpful user interfaces.
Hello World
It's a tradition that your first steps in a new language should be a hello world type application/script. So without further ado here comes an Ajax Hello World Script (note, for this tutorial I'm going to be using JQuery, available from http://www.jquery.com).
If you want to skip to the result, click here.
<!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AJAX Hello World</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#ajaxButton').click(function()
{
$.get('http://www.oxford-web.co.uk/blogresources/ajax-hello-world.php', function(data)
{
$('#ajax_target').html(data);
});
});
});
</script>
</head>
<body>
<div>
<div style="background-color:#373639">
<img src="http://www.oxford-web.co.uk/app/images/structure2011/logobanner-transparent.png" title="Oxford Web">
</div>
<div style="padding:24px">
This is part of a blog post from the <a href="http://www.oxford-web.co.uk" target="_blank">www.oxford-web.co.uk</a> site.
<button id="ajaxButton">Click Me</button>
</div>
<div id="ajax_target" style="background:#c0c0c0;padding:24px">
</div>
</div>
</body>
</html>
The first thing we do (outside of the basic HTML template) is to include JQuery (<script ... ”jquery.js”>). We can then move on to requesting data from the server. JQuery, by default, uses the $ symbol as a shortcut to the JQuery object. In this example we are using the 'get' function (there is also a 'post' function for HTTP POST requests which works in exactly the same way), to which we pass a url and a callback that gets executed when the request is complete.
Using Parameters
Now this is fairly nice stuff but obviously we want to be able to give the server a bit more information. Now we could manually build up a GET uri (append ?field=val&field=val...) but this can get tedious and untidy, not to mention it doesn't help us much with POST requests. Fortunately JQuery can handle the tedious parts for you, just pass it a JSON object (JSON, Javascript Object Notation) and the fields will be used as request parameters.
<!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AJAX Hello Name</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#ajaxButton').click(function()
{
$.get('http://www.oxford-web.co.uk/blogresources/ajax-hello-world.php',
{
name: $('#name').val()
},
function(data)
{
$('#ajax_target').html(data);
});
});
});
</script>
</head>
<body>
<div>
<div style="background-color:#373639">
<img src="http://www.oxford-web.co.uk/app/images/structure2011/logobanner-transparent.png" title="Oxford Web">
</div>
<div style="padding:24px">
<p>This is part of a blog post from the <a href="http://www.oxford-web.co.uk" target="_blank">www.oxford-web.co.uk</a> site.</p>
<p>type something in the box and click go to refresh just the shaded part of the screen...</p>
<input type="text" id="name" /><br/>
<button id="ajaxButton">Click Me</button>
</div>
<div id="ajax_target" style="background:#c0c0c0;padding:24px">
</div>
</div>
</body>
</html>
The above returns the same as typing http://www.oxford-web.co.uk/blogresources/ajax-hello-world.php?name=danny.
Conclusion
So there we have it - a simple, basic introduction to the wonders of Ajax that allows web pages to become dynamic, auto-completing, auto-updating web applications.
