A Modern Reintroduction To AJAX

AJAX is one of the most interesting web development paradigms emerged a few years back(around 2005). Since the term was first coined,( here ) AJAX has become commonplace in almost all web applications. Overtime, Ajax got many manifestations and applications. Some of the interesting Ajax based implementations include ‘infinite’ scrolling, live validations of usernames, ‘auto-suggest’ boxes and so on. Ever since Ajax was introduced long back, the technology has evolved beyond its earlier definition. For example, the data interchange format for the Asynchronous communication has geared towards JSON rather than the verbose XML (the X in Ajax is for XML). A web developer must understand AJAX well. There is no doubt about that. This article is going deeper in to AJAX. The most common trouble understanding Ajax in with its asynchronous nature. The true strength of AJAX is its asynchronous nature. This article will explain what it is, how it works, its strengths, its weaknesses and what it is good for.

What is AJAX?

The working of AJAX

AJAX is an acronym which stands for Asynchronous JavaScript and XML. It is a programming technology which is used to create more interactive web pages. Using AJAX, you can create web pages which can update their content without reloading. AJAX enables a web page to communicate directly with the server, retrieve information, and update itself. All this happens without the page actually reloading.

To understand AJAX, there are two things which you need to know from the outset. First of all, AJAX is not a programming language. Neither is it a software. AJAX is a programming paradigm - a technique. It is a technique for using web technologies including CSS, HTML, JavaScript, DOM and XML or JSON. Basically, to use AJAX in your web applications, you need to have a basic grasp of those technologies.

Secondly, you need a basic understanding of how web browsers interact with a web server. Traditionally, web browsers interact with a web-server in a synchronous manner. The interaction mostly takes place in three steps, repeated over and over again: 1. A Web browser requests a page from the server 2. The server sends the page to the browser 3. The browser displays the page to the user

For this traditional model, the work of a web developer is simple. Design your pages, and link them using the anchor (<a>) tag. As soon as a user clicks on any link, it is the browser which will send a request to the server, and load the appropriate page. The web developer does not directly request for info from the server. Here is a video demo that explains the AJAX model:

In AJAX model, based on user actions (clicking on a button, or image for example) JavaScript code sends request to the web server, receives the response and updates the web page.

A good example of AJAX in action is the Facebook or Twitter pages. When you scroll down to your Facebook page, it keeps fetching your previous news feeds and displaying them. It does this without reloading the page. You get the impression of scrolling down to one endless, very long web page.

An AJAX request model isn’t as easy to implement as the traditional model. It requires a web developer to do some JavaScript programming on the web page. The JavaScript sends a request to the server; reads the response and displays the results by updating the page’s DOM. This may sound complicated, but it isn’t really. Modern browsers have an inbuilt object called the XMLHttpRequest object. This object makes it quite easy for a JavaScript to communicate with the server.

AJAX using Pure JavaScript

Implementing some sample code using pure JavaScript will help you understand AJAX better.

We can use the XMLHttpRequest (also referred to as the XHR) object to communicate with the server. Using XHR object, a web page can interact with interact with PHP scripts, databases, applications and even text files located on the server. By “interact” we mean that it can both send and retrieve data from those various sources. This interaction is typically driven by JavaScript, and a simple Ajax implementation takes place in four steps:

Create an instance of the XMLHttpRequest object
Use open() method of the XHR to specify what kind of data you want
Create a function to utilize the results
Use the XHR’s send() method to send the request
Receive the response

Now, these 5 steps are the standard for every Ajax implementation. They are not difficult to master. However, it is easier to understand them when you see them in action. So, let us create a small Ajax application to demonstrate these steps:

Our application will do something very basic. It will read the contents of a text file from the server, and use them to replace the text currently on the page. It will carry out this action at the click of a button.

So, we shall have two things: our simple web page and a text file called “ajax_info.txt”. This text file will be located in the same folder as our web page.

The body of web page will look as follows:

<div id="myContent">
    <h2 > Can AJAX Replace This Text </h2>
</div>
<button id='actbutton'> Change Text </button>

Meanwhile, our text file called “ajax_data.txt” will have just two lines:

<h3> Hello, Welcome To The World of AJAX </h3>
<p> Ajax is <b> super fun! </b> Isn't it?

Our programming goal is simple: upon loading the page, the user should see the contents in “myContent”. Upon clicking the button, the content should change and display what is in the text file. Now, let’s get started.

First, we need a name for our function, let us call it loadNewText(). This function will carry out every step in our programming goal i.e. read the contents in “ajax_data.txt” and use it to replace the text in “myContent”.

Now, we can add an onclick event to the button. Our button becomes:

<button onclick="loadNewText()"> Change Text </button>

Basically, clicking the button should run our function the function “loadNewText()” and thereby change the text on the page.

Everything is now set. Over to Ajax:

1. Create an instance of the XMLHttpRequest object

To create an instance of XHR, you simply get a variable name, and use the new XMLHttpRequest() method to crate the instance. Let’s call our instance “xhr”. So, we’ll create an instance as follows

 var xhr = new XMLHttpRequest();

2. Use open() method of the XHR to specify what kind of data you want

The XHR’s open() is used to specify the kind of data an object wants from the server. You basically use it to describe what you want from the server. It takes three arguments i.e. the type of request, the location of the file on the server, and a synchronous indicator. Calling it looks like this:

 xhr.open(request, url, async)

They are broken down as follows:

request ‐ this is the type of request you are sending to the server. It takes one of two values: GET or POST. In simple terms, GET is for retrieving something from the server. POST is for sending something to the server.
url ‐ this is the URL of the file on the server. It is can be static or relative URL or simply the path from the folder which contains the web page.
async ‐ this is used to determine whether or not the request should be executed asynchronously. It takes the value “true” or “false”. True is for asynchronous execution. False is for synchronous execution.

In our case, we shall call the open() method as follows:

xhr.open("GET", "ajax_data.txt", true);

3. Create a function to receive and utilize the results

An XHR object has many inbuilt variables in which it stores data retrieved from the server. One of these variables is called responseText. Now, responseText usually contains any text information retrieved from the server.

When we call xhr.open(), it will fetch the text information stored “ajax_data.txt” and store it in its responseText variable. So, to access the data, we simply have to call xhr.responseText

Since our goal is to replace the <h2> in the <div id="myContent"> with the new text read from the server, we use the document.getElementById(). So, we shall create an anonymous function as follows:

function()
{
     document.getElementByID("myContent").innerHTML = xhr.responseText;
}

This function basically replaces the HTML found in the <div> “myContent” with the text fetched from the server. Where shall we call this function? We’ll get to that shortly.

4. Use the XHR’s send() method to send the request

The send() method is used to send the request to the server. It doesn’t take any parameters, so you simply call it as follows:

 xhr.send();

5. Receive the response

How do you know when a response has come from the server? Well, XHR has two properties are used to indicate a response from the server. The first is “readyState”, and the second is “status”. The “readyState” property records how the request is progressing. It returns a numerical value, numbered 0 to 4 which indicate different states of progress.

The numbers translate as follows:

0 ‐ request not initialized

1 ‐ connection to server established

2 ‐ request received by server

3 ‐ server is processing the request

4 ‐ the request has been processed, and the response is ready

The “status” property indicates whether or not the request was successfully executed.

200 ‐ request successfully executed and response delivered
404 ‐ page not found You can access these properties by referencing them from the XHR variable as follows: xhr.readyState or xhr.status

In fact, it is better to test these values in the function (mentioned in 3 above) before attempting to retrieve the other values. Before retrieving any of the XHR’s other variables (e.g the responseText), we have to ensure that the “readyState” is 4 and “status” is 200.

So, our function code has to be rewritten as follows :

function ()
{
    if (xhr.readyState==4 && xhr.status==200)  
    {
        document.getElementById("myContent").innerHTML=xhr.responseText;
    }
}

So, how do we know that a response has come from the server? Well, XHR has an event has an event which is triggered every time the “readyState” changes. This event is called “onreadystatechange” event. This event is the perfect way to execute any function designed to utilize the results retrieved from the server. You simply assign the function to respond to this event like so: onreadystatechange = function_name;

Since we are using an anonymous function, we attach it as follows:


xhr.onreadystatechange = function ()
{
    if (xhr.readyState==4 && xhr.status==200)  
    {
        document.getElementById("myContent").innerHTML=xhr.responseText;
    }
}

So, there you have it. We have completed the five steps, and our AJAX implementation is ready to go. We simply have to bring it all together under a function called loadNewText() (the name we assigned it earlier). So, it all comes together like this:


document.getElementById('actbutton').onclick=function()
{
  var xhr = new XMLHttpRequest();
    xhr.open("GET", "ajax_data.txt", true);
    
    xhr.onreadystatechange = function ()
    {
        if (xhr.readyState==4 && xhr.status==200)  
        {
            document.getElementById("myContent").innerHTML=xhr.responseText;
        }
    }
    xhr.send();
}

Demo of pure JavaScript Ajax implementation

In a nutshell, this is how to work with AJAX using pure Javascript. You use JavaScript to send requests to the server using an XMLHttpRequest object. You still use JavaScript to display the results on the web page. In most cases, you use JSON or XML to exchange data between the browser and the server. However, irrespective of how complicated your AJAX application is, the steps are as outlined above.

AJAX using jQuery

Modern Javascript libraries make it much easier to implement AJAX requests. The sample above done with the help of jQuery library will look like this:


$('#actbutton').click(function()
{
  $.ajax('/data/update_info.txt', 
       {
          success: function(data) 
          {
            $('#myContent').html(data);
          }  
       }
);

The ajax function in jQuery has several options and parameters that allows lower level handling of AJAX requests.

jQuery library also has several short hand methods to do AJAX requests: load(), jQuery.get(), jQuery.post() and jQuery.getJSON are some examples.

Here is another example using AJAX. It is common to have drop-down lists with a big number of items in forms. Often, the items in the list would be duplicates. For example, a ‘country’ drop-down list.

The easy solution for this is to load the list dynamically using AJAX. Here is the Code:


function loadlist(listid)
{
    $(listid).html('');
    $.getJSON('/data/countries.json',function(list)
    {
      jQuery.each(list, function(i,obj)
       {
            $(listid).append(
              $('<option></option>')
               .val(obj['value'])
               .html(obj['name']));
       });
    });  
}

The function $.getJSON() gets the file from the remote URL. The second parameter to getJSON() is the call back function that receives the data. The function gets the data and appends items to the list.

Demo: loading a list dynamically using AJAX

Ajax Response Data Formats

The X in AJAX stands for XML. However, AJAX evolved further and developers started using lighter data formats. Using lighter data formats makes the coding easier and faster. The name AJAX stayed even though no XML is involved. JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. Most server side scripting languages support parsing and generating JSON.

Sample JSON:


[
  {
    "value":"AD",
    "name":"Andorra"
  },
  {
    "value":"AE",
    "name":"United Arab Emirates"
  },
  {
    "value":"AF",
    "name":"Afghanistan"
  },
  {
    "value":"AG",
    "name":"Antigua and Barbuda"
  },
  {
    "value":"AI",
    "name":"Anguilla"
  }
]

The data above is part of countries list, used in the example above. Read more on JSON

Text Plain text response is simplest and easiest. For AJAX calls that does not require any complicated data structures, prefer text responses. Text responses are often used when you just want to display a message.

HTML AJAX applications that needs to display some more advanced formatting can use HTML. For example, a popup message that needs to display images and hyperlinks. However, if you are getting user generated content in HTML format, make sure that the HTML is filtered properly to avoid XSS (explained below).

JSONP JSONP (padded JSON) is JSON data formatted like a JavaScript function call. This technique is used to make AJAX calls to a different domain. Browsers would have a default security validation for AJAX calls. Pages loaded from some-website.com can make AJAX calls only to some-website.com. AJAX calls to other-domain.com will fail. However, one website can include scripts from other domains using <script src='other-domain.com/scripts/s.js' /> JSONP uses this technique to load JSON data from another domain. Read more on JSONP

Some Great AJAX Implementations

Since its first appearance in 2005, AJAX has greatly transformed how developers implement web applications. As a result, AJAX is now used to implement some fantastic features which we often take for granted. Some of the applications which run courtesy of AJAX are:

Auto-suggestion ‐ The most popular of this feature is that of Google’s auto-suggest of search terms. This is implemented using AJAX. In fact, Google Suggest (now called Google Instant) was one of the first applications to be built using AJAX back in 2005. Almost all search engines now have this feature. Auto-suggest is not limited only to search engines. Auto-suggest can be used in any text box that can have common inputs. For example, the country input box in web forms, ‘skills’ box or ’languages known’ box in a resume and so on. If you want to have auto-suggest in your website, here is one easy reusable component: Ajax AutoComplete for jQuery

Infinite Scrolling ‐ if you visit your Twitter page, when you begin scrolling downwards, more of your past Tweets appear. The more you scroll, the more tweets you see. It seems like it is all in one very long page. This is called infinite scrolling. It is implemented using AJAX. As you scroll downwards, more tweets are fetched from the server and displayed for you. Other popular websites with this feature are Facebook and Time Magazine. jScroll is an excellent jQuery plugin for implementing infinite scroll. Check out jScroll here

Self-Updating Stock Sticker ‐ if you visit the trading pages of stock markets like NYSE or FTSE100, you will notice stock tickers. These stock tickers update with the latest rates on the market almost on a second-by-second basis. They update automatically without reloaded the pages. This is implemented using AJAX. Ajax fetches the latest rates from the server and updates the stock sticker. A similar feature is used in online Forex Markets to display the latest exchange rates, or in sports websites to display live scores during games.

Form Validations - For example, when you want to check whether the email was already registered, whether the username is already taken - you have to send the user’s input to the server and check it in the database. If the email is registered already, you can display an error message next to the email field. This way, the form validation can be done even before the form is submitted.

Other applications ‐ AJAX can also be used to upload files or images concurrently, post form entries, search through databases (e.g. Amazon’s product search), and many others.

See More

When to use AJAX

Ajax was introduced in an attempt to make web applications have the feel of desktop programs in terms of response time. AJAX gives a richer user experience by keeping the user in context. Rather than sitting around waiting for the page to load, the user accesses new content on the same page. This gives a feeling of continuity and consistency. Ajax enhances loading time. This is because only sections of the web page are loaded. This makes the web page appear faster. It uses less bandwidth. Loading sections of a page consumes less bandwidth than loading the entire page. Moreover, AJAX can use compact data formats like JSON. It is smaller compared to more descriptive data formats like XML or HTML. It also reduces the server load.

AJAX and Accessibility

An AJAX application can load parts of a web page dynamically. This makes the web page much more responsive and thus provides a richer user experience. The dynamic nature of AJAX applications creates accessibility problems for none-visually based user agents. Making your dynamic content accessible to users with visual-based browsers isn’t much of a hustle. After all, the user can see your new content as soon as it appears (or you can use visual cues like a ’loading..’ animation). However, for users with screen readers, providing access to dynamic content is much more challenging. Screen readers tend to operate in a linear manner.

There is a straightforward approach which is specified in the W3C’s Web Accessibility Initiative (WAI). The WAI is an initiative introduced to improve web accessibility for people with disabilities. One of the protocols proposed by the WAI is the Accessible Rich Internet Applications (ARIA).

ARIA (its full name is WAI-ARIA) is a protocol intended to promote accessibility of scripted and dynamic content. The WAI-ARIA provides a solid framework with which to implement accessibility options for an AJAX application.

WAI-ARIA Fundamentals

WAI-ARIA works by defining a set of HTML attributes which have a special semantic meaning for screen readers and other assistive technologies. Including these attributes in your AJAX application makes it more accessible. The HTML attributes are divided into three major categories i.e. roles, properties and states.

The roles describe the purpose of an HTML element on the web page. Possible values to the role attribute which correspond to different parts of a page include: banner, navigation, article, main (for the main content area), complementary (supporting content for the main area) and contentinfo (informational content like copyrights, footnotes, site map, etc). Example:


<div role="main" id="main-content"> </div>
<ul role="navigation"></ul>

Properties describe the meanings of elements. For instance, ARIA provides a property “aria-required”. So, to create an input box which must be filled, write <input area-required='true'>.

States describe the current state of an element. For instance <button aria-disabled='true'> indicates that the button is disabled.

When you build your AJAX applications, see that the proper ARIA role is added to the element. A <div> may be made to look like a button and a <ul> may be acting like a menu. Apply the right ARIA role to those elements. Example:

<div role="button" tabindex="0" >Save</div>

Menu:

<ul id="mb1" class="menubar" >
  <li id="mb1_menu1" role="menuitem" tabindex="0" aria-haspopup="true">Products</li>
  <li id="mb1_menu2" role="menuitem" tabindex="0" aria-haspopup="true">Services</li>
</ul>

Making Dynamic Content Accessible

One of the most common uses of AJAX is to generate dynamic content on a web page. ARIA provides a simple mechanism for providing screen readers with easy access to dynamic content.

The mechanism is called “live regions”. A live region is updated dynamically using AJAX. The WAI-ARIA provides an attribute called “aria-live” which can be used to identify the dynamic sections. Apply this attribute to a tag which represents the dynamic section (e.g. <div aria-live="off" >). Applying this attribute informs the screen reader that this section contains dynamic content. The aria-live attribute provides a number of values to indicate when the user should be notified of any dynamic content updates.

Off – (example: <div aria-live="off" >) turns off any notifications. This option is used when the content updated dynamically is of little importance to the user.

Polite (example: <div aria-live="polite">) sets off the notification after completing the current task. This is used for content with although important, isn’t critical. The screen reader first completes its current task and then informs the user of the new content available. This offers the user an option to navigate straightaway to the dynamic content.

Assertive (example: <div aria-live="assertive" >) sets of the notification as soon as possible. Unlike polite, this value doesn’t wait for the current task to complete. It interrupts it and sets off the notification. It then offers the user an opportunity to navigate to the new content right away.

Keyboard Accessibility

Normally, the only HTML elements which can receive keyboard focus are links and form elements. If you navigate through the web page by pressing the tab key, the focus will stop at only links or form elements. It can be very limiting for users who prefer keyboard-based navigation. AJAX applications often concentrate too much on mouse based interactions. For example, on mouse over- display a popup or tooltip, on mouse left click- display something else and so on. Keyboard-only accessibility is often overlooked. There is a simple way for setting keyboard access to any element on the web page. This is through the tabindex attribute. You can add this attribute to any tag. For instance <p tabindex='0'> will make the specific paragraph able to gain focus. The tabindex attribute takes a number as a value. The number ‘0’ adds the element to the normal navigation order of the web page. You can rearrange the navigation order by assigning ascending values to the tabindex attribute. When you assign an element with a tabindex value of -1 , you give that element programmatic access. For instance, suppose you have a div which is defined as follows:

<div id='content' tabindex='-1'>

You can give this div focus using JavaScript:

document.getElementById('content').focus();

Ajax Security Concerns

The very characteristic which makes Ajax a powerful web application design methodology also makes susceptible to security vulnerabilities. An Ajax application offers a wider threat landscape for which a developer needs to implement security measures. This is not to suggest that Ajax is flawed. Any web application which isn’t well implemented can suffer from security vulnerabilities. The point here is that, as a developer, it is important to understand the potential security vulnerabilities which are associated with Ajax.

Authentication Checks

In an AJAX application, the script sends requests to the server at various points of time. Often, the AJAX request will be translated to direct function calls on the server side script. The server side script should always validate the source of the request and the authentication tokens. Imagine a system with several levels of users. The admin level user would have higher privileges and can do tasks like resetting user passwords. Pressing a button sends an AJAX request like this: website.com/app/resetpwd.php?uid=3131 If the script resetpwd.php does not do authentication checks (1. whether the user is logged in, 2. whether the user has the rights to reset password) any signed up user would be able to reset the other user’s password.

Enumeration and Data Leakages

Another important vulnerability point in AJAX based applications is taking the main parameters from the AJAX requests itself. Imagine a bank’s web interface. For ‘rich’ experience, the bank has implemented an AJAX interface to browse through transaction records. The AJAX request is send to a back-end script like this: bank.com/webapp/trans?ac=55146&pg=1 An attacker would be able to manipulate the parameters and browse through another user’s transaction history.

Parameter Validations

The parameters coming through AJAX requests should be validated just like any user input should be. Here is the case of an eCommerce site. The products were listed using AJAX . The request carried the number of products to be listed. for example buywidgets.com/prod/list?p=3&recs=50 Unfortunately, the recs parameter was not validated for any max limits. Sending multiple queries of recs=100000 brought down the website.

Cross-Site Scripting XSS

XSS is not specific to AJAX. However, AJAX can increase the attack surface because AJAX requests can be made on behalf of the user through XSS vulnerability. XSS vulnerability happens when you allow user input to be displayed in a web page without any filtering. For example, suppose you have an internal messaging system. One user can message another user or post message to a common place. Suppose the message allows all HTML tags without any limits. <strong>some text</strong> will appear bold when displayed in the “view messages” page. An attacker can inject a script tag like this <script src='attacker.com/s.js'></script> in to the message and anyone who views the message will automatically run the script. XSS is so widespread that even the popular services from Google (details ), Facebook ( details) and Yahoo (more info) where attacked through XSS vulnerabilities.

The primary prevention of XSS is to display user inputs ‘as entered in the field’. If the user enters <strong>some text</strong> it should appear <strong>some text</strong> in the page that displays it as well. For inputs that needs to support HTML formatting, limit the HTML tags allowed, and filter out the other HTML tags.

Cross-Site Request Forgery (CSRF)

CSRF (also known as XSRF or Sea-Surf) is a common exploit used to send unauthorized requests from a user’s account. A hacker basically hijacks the user’s credentials and uses them to send requests to the server. From the server, the requests seem to be emanating from the user.

A user logs in to his account (example: bank.com).
The attacker gets the user to click on a link or image. <img src='http://bank.com/withdraw?account=3323&amount=2000'>
The link triggers a transaction or action in the user’s account.

Since the user is already logged in, from the server side, it will look as if the user has requested the transaction. The prevention of CSRF includes several steps. The important step is to use a synchronizer token for the transaction requests. Note that the point in the vulnerability is that the server side is not verifying whether the request originated from the website page (in this case bank’s page). Once the user has logged in, the bank’s page will contain a token in a hidden field. The token is random and is known only to the server. All the requests, including AJAX requests should include this synchronizer token from the hidden field. Now the URL of the withdraw transaction will look like: http://bank.com/withdraw?account=3323&amount=2000&token=JHhgshg56gh2s56

It is also recommended to use POST method rather than GET so that the token does not appear in the browser history.

This book: Ajax Security : Billy Hoffman and Bryan Sullivan
OWASP AJAX Security Guidelines
Ajax Security Issues:infosecinstitute.com
Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet : owasp.org
Cross-Site Request Forgery Demystified :halls-of-valhalla.org
Understanding Ajax vulnerabilities : IBM
Web Application Exploits and Defences
Exploiting XSS in Ajax Web Applications

Conclusion

AJAX has grown from a technology buzzword to an essential aspect of web applications. It has got several facets evolved over time. New libraries and frameworks evolved around the AJAX concepts. This demands that we web developers have to understand not only the fundamentals but the surrounding aspects like accessibility and security of AJAX as well.