Software Development Resources
Create account | Log in | Log in with OpenID | Help

AJAX

From DocForge

(Redirected from Ajax)

AJAX is an acronym for Asynchronous JavaScript And XML. After the initial request for a web page made by a web browser, JavaScript can make additional requests to a web server using the XMLHttpRequest object built into modern web browsers. The response may contain information to update page content, confirmation of user actions, or anything else that can be processed by JavaScript. AJAX is not a formal standard, but instead became commonly used after all of the required components were built into the most common web browsers and a popular web sites began using it to improve the user experience.

Contents

[edit] Benefits

[edit] User Interface

A common use for Ajax is to directly improve the user experience. Web pages using Ajax can behave similar to a standalone application by dynamically updating the interface and content with fresh data. By transmitting and processing only the content which is necessary for user interaction, rather than an entire web page, Ajax can respond relatively quickly to user actions.

[edit] Bandwidth Usage

By generating HTML and altering the DOM locally within the browser, and only downloading JavaScript and the necessary data, web pages altered with Ajax can appear to load quicker since the data retrieved after the main page is loaded is much smaller in size than a complete page. A simple example of this benefit is a large table of data with pagination. The table's data can be downloaded as needed from the server and the table's HTML elements can be generated within the browser as needed.

In addition to loading basic content on demand, some web applications load a reduced shell of JavaScript code and download additional functions only as needed. This technique can significantly reduce bandwidth consumption for applications that have robust logic and functionality.

[edit] Separation of Data, Format, Style and Function

Using Ajax naturally leads programmers to separate data from it's visual layouts and functionality. In general this is considered a best practice for separation of responsibilities. Traditional web pages return HTML to the browser with data already incorporated and sometimes embedded JavaScript. Of course these can be separated in server code, but keeping that separation through to the browser allows for more complex web applications with reduced development effort. With Ajax

  • The basic page content is still often loaded with HTML from the server
  • Data is retrieved separately from servers and typically transmitted in JSON or XML format.
  • The page is manipulated in the web browser through DOM.
  • Functionality (i.e. JavaScript) is typically organized into files and can even be loaded only as needed.

[edit] Drawbacks

[edit] Browser Integration

A page altered dynamically does not automatically have itself registered with the browser history engine as a unique page, so triggering the "Back" function of the users' browser might not send the user to what they previously saw. This problem also prevents users from sharing URLs or retaining bookmarks to pages exactly as they see them. Until a standard is formalized, a few workarounds to this problem are sometimes used, most popular being the altering of the URL after the hashtag ('#') since it does not trigger a page load in the browser.

[edit] Response-Time

Ajax can suffer from slow network connections or network latency - the interval between user request and server response. The interface of a page built dynamically with Ajax can have a significant delay and should therefore display some type of "processing" indicator to the end user. It's also possible for the user to witness awkward page changes as content is updated and rendered in the browser. Sometimes it's preferable to make large changes to the DOM invisible to the user until the update is complete.

[edit] Search Engine Optimization

Web browsers show pages to the user which include all JavaScript processing (assuming JavaScript is enabled) and therefore all updates from Ajax. Search engines, however, do not typically execute any page JavaScript after reading the page content. Search engines can therefore miss content loaded from Ajax which a site owner may want indexed. One solution is to have the full content available at an alternate URL without JavaScript.

[edit] JavaScript Reliability

Ajax relies on JavaScript, which is implemented differently in each web browser and changes over time as browsers are updated. Libraries such as jQuery and mootools help with browser compatibility issues so developers can write less browser-specific code. But full testing in every supported browser is required for every web application and sometimes browser-specific code must be written.

Uses may also choose to disable JavaScript in their web browsers, preventing any Ajax requests or dynamic page changes. JavaScript is enabled by default in most browsers, but sites must consider how (and if) to handle this situation.

[edit] Libraries and Frameworks

A variety of notable libraries and frameworks help developers implement AJAX:

  • jQuery is a JavaScript library which adds many utility routines for server requests and DOM manipulation.
  • Prototype is a small JavaScript library which simplifies the process of adding AJAX to web pages.
  • Pyjamas is a python AJAX framework
  • Mootools is another small JavaScript library which implements almost all of the features of Prototype.
  • DojoToolkit

[edit] Techniques

A variety of web application design patterns have emerged which leverage AJAX:

[edit] See Also

Discuss