Beginners jQuery AJAX tutorial

Tuesday, 13 October 2009


This tutorial aims to go over how to use jQuery for Ajax requests. It should be easy enough for anyone to understand and hopefully be a good reference point for those who already have a good understanding on jQuery and would like an introduction to jQuery AJAX.

Go here to see the demo for this tutorial

Once you have completed this tutorial you should be able to use jQuery to make a request to another php script on your server and insert it into your already loaded page. The steps should be as follows:

  • Load a page and include jQuery

  • Call a javascript function that will send the jQuery Ajax request and execute the php script on your server

  • The php script will return some data to the javascript function

  • The function will then insert this data into your page without reloading



The best place to start before reading through this tutorial is to have a look over the Ajax section of the jQuery API. In particular have a look at the 'Ajax Requests' section and at the different methods available.

Our basic file structure will look like this:

  • index.html - Our HTML page that contains our initial content and includes jQUery and our page.js files

  • page.js - The javascript file that contains our function to load in the content via Ajax from our php script

  • content.php - The php file which will provide us with our extra content



The index.html file contains a link which when clicked calls the addContent javascript function. This function then calls the jQuery Ajax function jQuery.get This function calls creates a XMLHttpRequest to retrieve the output of our content.php file.

The content.php file simply echoes out one line of code which is returned to the javascript function and is stored in the data variable.

Lets have a look at our content.php and page.js files

<?php
echo "<p>This is some content loaded via Ajax</p>";
?>



function addContent() {
var data = $.get("content.php", function(data) {
$("body").append(data);
});
}


The addContent function is called when 'Click here' link is clicked.

The function specified in the the $.get call is the callback function for when our data is returned successfully from the content.php script. The contents of the data variable is then simply appended to the body.

And like magic you now have your first working Ajax functionality. Our php file in this example was very limited, but you can use Ajax requests to retrieve, update and delete information on your database without reloading the page. You can also load certain content based upon user interaction without reloading the whole page.

There are however some issues with using Ajax and excessive use of Ajax can have a negative effect on usability so you should consider your use of Ajax before using it on your site.

Here are some cons to using jQuery, all of which have various work arounds, but should be taken in to consideration when implementing Ajax:

  • By default Ajax content cannot be bookmarked, so if you update your page with Ajax it may be hard to be bookmarked in a certain state.

  • Some users may be confused if your page is updated with AJAX content especially if certain controls are changed or removed and the page is not reloaded.

  • Some times requests may take several seconds to be returned and users may be left wondering when they can continue using the page.

  • All failures should be handled gracefully otherwise a user can be left in limbo.

blog comments powered by Disqus