This website stores cookies. Click here to accept them.cookie information page

A short introduction to Ajax

11th January 2012
Categories: ajax, basics, javascript

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.


Add your comment for "A short introduction to Ajax":

© Alberon Ltd 2017

8 Standingford House
26 Cave Street
Oxford
OX4 1BA

01865 596 144

Oxford Web is a trading name of Alberon Ltd, registered company no. 5765707 (England & Wales).