Ajax

Derek Bridge

Department of Computer Science,
University College Cork

Ajax

Aims:

• to learn how client-side JavaScript can make HTTP requests
• to learn about Ajax: the use of scripted HTTP requests to update the content of web pages without reloading the whole page

HTTP requests

A browser sends an HTTP request to a server…

• when the user clicks on a hyperlink
• when the user enters a URL into the Location box
• when the browser submits a form to the server

But a client-side script can also send a HTTP request

Synchronous response handling

In the case of synchronous response handling...

• The client-side script creates a request and sends it to the server
• The client-side script then waits for a response from the server
• When the response has fully arrived, the client-side script does something with it, e.g. display something on the screen

Asynchronous response handling

In the case of asynchronous response handling…

• The client-side script creates a request, registers a function to handle the response, sends the request to the server
• The client can then get on with other things, e.g. deal with other user input
• When the response has fully arrived (= an event), the function for handling that event is executed

Class exercise: Asynchronous response handling is a little more complicated to program, but synchronous response handling has a severe disadvantage. What is it?

XMLHttpRequest objects

Summary of what your client-side script needs to do in order to send an HTTP request:

1. Create the request object
2. Register a function that will handle the response (assuming asynchronous response handling)
3. Specify the URL and the HTTP method (e.g. GET or POST)
4. Optionally, specify any special headers that are to be sent
5. Send the request

XMLHttpRequest example

1. Create the request object

   var request = new XMLHttpRequest();

2. Register a function that will handle the response (assuming asynchronous response handling)

   request.onreadystatechange = …some function… ;

3. Specify the URL and the HTTP method (e.g. GET or POST)

   request.open("GET", url , true);

4. Optionally, specify any special headers that are to be sent, e.g.

   request.setRequestHeader("User-Agent", "XMLHttpRequest");
request.setRequestHeader("Accept-Language", "en");

5. Send the request

   request.send(null);

The response

• The same object that was used for the request is also used for the response (in our case request)
• You can use the following properties and methods:
  • request.status: the status code sent back by the server
    Class exercise What number are you hoping for?
  • request.getResponseHeader("…"): to access the specified response header
  • request.getAllResponseHeaders(): to access all response headers as an array
  • request.responseText: to access the body of the server's response as a string
  • request.responseXML: to access the body of the server's response as XML (inc. HTML)

Typical function to handle the response

function handle_response()
{
    // Check that the response has fully arrived
    if ( request.readyState == 4 )
    {
        // Check the request was successful
        if ( request.status == 200 )
        {
            // do whatever you want to do with 
            // request.responseText or request.responseXML
        }
    }
}

Ajax

Ajax…

• …stands for Asychronous JavaScript and XML
• It's not a programming language
• It's a way of using JavaScript (especially XMLHttpRequests), the DOM, HTML and CSS

What's the idea…

• Classically, if the content of a page changes, the whole page is fetched again from the server
• Think of all the activities involved - they will take considerable time
• The idea in Ajax is that client-side JavaScript will
  • send an asynchronous XMLHttpRequest to fetch from the server just the content that has changed
  • use the response to update relevant parts of the page
• Smaller amounts of data are fetched - this takes less time

History

• XMLHttpRequests were available from about 2001 but little used
• In 2004, Google released GMail, which makes heavy use of XMLHttpRequests
• In 2005, Jesse James Garret wrote an essay entitled "Ajax: a New Approach to Web Applications"
• These two events popularised the idea
• Ajax is widespread in Web 2.0 webapps, e.g.:
  • Auto-suggestion in the Google search box
  • Google maps: http://maps.google.com, http://maps.google.co.uk
  • Many news feeds
  • …

Ajax example

• We'll modify register.php from the lecture on user authentication
• Alongside the Name text field, we'll add a hyperlink: Check name is available
• If this link is clicked, some client-side JavaScript (in check_name_available.js) will
  • send a XMLHttpRequest to the server, asking it to run a PHP script (check_name_available.php)
  • the response will be just a short string
  • when the response is received, the JavaScript will change the text alongside the Name text field to either Name available or Name not available
• Note how we are not reloading the whole page; we fetch only a small amount of data and update a small part of the page

The PHP script: check_name_available.php

require_once( 'validation_functions.php' );
    
$errors = array();
// Connect to database
$dbconnection = mysqli_connect( $host, $username, $password, $dbname );
if ( ! $dbconnection )
{
    die("problem");
}
 
// Get the user name
$username = get_required_string( 
    $_GET, 'username', 'Username', 30, $errors );
if ( count($errors) > 0 )
{
    die("error");
}
// Check whether this user name is in use
$sql_retrieve = "SELECT * FROM users WHERE username = '{$username}'";
$dbretrieve_result = mysqli_query( $dbconnection, $sql_retrieve );
if ( ! $dbretrieve_result )
{
    die("problem");
}
if ( mysqli_num_rows( $dbretrieve_result ) > 0 ) 
{
    // User name is already in use
    echo "in_use";
}
else
{
    // User name is available
    echo "available";
}

The client-side JavaScript: check_name_available.js

if ( window.addEventListener )
{
    window.addEventListener("load", init, false);
}
else if ( window.attachEvent )
{
    window.attachEvent("onload", init);
}

function init()
{
    document.getElementById("username").onkeypress = set_link;
    document.getElementById("checker").onclick = check_name_available;
}

function set_link()
{
    document.getElementById("checker").innerHTML =
        '<a href="#">Check name is available</a>';
}

function check_name_available()
{
    var url = "check_name_available.php?username=" + 
        document.getElementById("username").value;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function()
    {
        // Check that the response has fully arrived
        if ( request.readyState == 4 )
        {
            // Check the request was successful
            if ( request.status == 200 )
            {
                if ( request.responseText == 'available' )
                {
                    document.getElementById("checker").innerHTML = 
                        "Name available";
                }
                else if ( request.responseText == 'in_use' )
                {
                    document.getElementById("checker").innerHTML = 
                        "Name not available";
                }
            }
        }
    }
    request.open("GET", url, true);
    request.send(null);
}

All that glitters is not gold: problems with Ajax

• The user typically does not know when requests are being made
• When the content changes, the URL doesn't: you cannot easily bookmark different 'versions' of the page
• Similarly, the Back button and History list of your browser may not function as some users would expect them to
• By fetching small amounts of content, Ajax is supposed to be faster
  Class exercise: But why might it, in fact, slow things down?