What to Know About AJAX

HTML, XML, CSS, JavaScript, if you heard those terms then you’ve heard AJAX. The technology of AJAX puts programming at a whole new level of integrating technologies, while not exactly being a technology. Instead AJAX is several technologies. The term was coined in 2005 by Jesse Garret. Garret described AJAX as a “new” approach in integrating a number of technologies, like dynamic HTML (DHTML), XHTML, Cascading Style Sheet (CSS), JavaScript, Document Object Model (DOM), Extensible Markup Language (XML), and XMLHttpRequest object. AJAX has become the common term in the programming world.

What is AJAX?

AJAX, stands for Asynchronous JavaScript + XML. The World Wide Web Consortium released a first draft in 2006. The web application combines a number of technologies that respond immediately to a user’s request. Using AJAX, the process of making a web application is quicker and faster when combined with other technologies. Updates to a user interface can be made without reloading an entire browser. Ajax is more data-driven then page-driven, relying on dynamic HTML. While, XML is the format to receive server data. Although XML is used, JSON is used more often. JSON (JavaScript Object Notation), resembles a small portion of JavaScript syntax, and is useful when writing JavaScript coded applications. JSON is lighter when used with XML to process AJAX. In conclusion, the web application transmits data by user request without interrupting the application, while behind-the-scenes the client requests information from the server. Thus, Ajax runs more like a client-hosted software. (Tutorialspoint)

AJAX and Technologies

AJAX relies heavily on JavaScript (JS) and XMLHttpRequest (XHR). When AJAX is processed, JS requests information from the server and updates are made to a current page without reloading, in addition, the user will never notice the process. AJAX is based on the following standards: HTML for content, CSS for presentation, XML for data stored and fetched from server, XHR retrieves any data, along with XML, and most importantly JavaScript allows everything to happen. (Tutorialspoint)

When AJAX uses other technologies there is a process taken place. Document Object Model (DOM) represents the structure of documents like XML, HTML, and DHTML, for accessing and manipulating. CSS presents a distinction between the style of content and changes are made programmatically by JS. JavaScript allows everything to operate smoothly. Several programmers will acknowledge XMLHttpRequest is essential to AJAX. XHR API was designed by Microsoft and later adopted by Mozilla, Apple, and Google. Released in July 2000, XHR was not recognized until 2005 when AJAX was announced. As previously mentioned, XHR provides an easier way for data to be retrieved from server without reloading the browser. XHR provides an easier way to develop a fully interactive web application. The API monitors the progress of a request and fetches the data in two ways, asynchronously or synchronously. All in all, Ajax relies on XHR, which makes the asynchronous server communication possible, while relying on other technologies.

An example of creating an instant object of XMLHTTPRequest:

Var myRequest = new XMLHttpRequest();

Benefits of AJAX

The key benefit of using AJAX is minimal updates can be made, without reloading the entire page.

Visual and Interaction implementations are provided by AJAX, for users to spend less time operating and learning about an application. This method eliminates the “Click, Wait, and Refresh” approach of pre-AJAX web applications. Several applications and features can be used on a single web page without cluttering. JavaScript is written and tucked away, as the browser loads the AJAX engine. Communication between the server and webpage rendering is the responsibility of the AJAX engine. The user will never notice the process or wait for a responds. The big difference between a pre-AJAX application and an AJAX web application is synchronous vs asynchronous. Below are Images provided by Jesse Garret, is an example of an interaction pattern, and the difference between a classic web application and an Ajax web application.

5 ajax-fig2

http://www.adaptivepath.com/uploads/archive/images/publications/essays/ajax-fig2.png

http://www.adaptivepath.com/uploads/archive/images/publications/essays/ajax-fig1.png

The Use of AJAX

A number of popular web applications use AJAX, like Google Maps, Google Suggest, Flickr, A9 Maps, Base Camp, Yahoo Maps and more. A huge investment is made by Google in developing AJAX. Throughout the last year, implementations of AJAX in Google products has been introduced. Ajax has provided better interactivity and easier to navigation with each application. Shared below are examples of how web applications use AJAX:

Google Maps, users are able to drag the map around instead of clicking on buttons. A user can use their cursor to grab the map and scroll around to a point of interest instantly without the browser reloading. Yahoo Maps layout is easy to use, more efficient and resourceful.

 26

hr

Google Suggest, allows users to type, while offering suggestions. Interaction involves the user using the arrow keys to navigate through the results. https://support.google.com/websearch/answer/106230?hl=en

jglkj

Links below show examples of AJAX in action:

http://www.wicket-library.com/wicket-examples/ajax/todo-list?4

http://www.wicket-library.com/wicket-examples/ajax/world-clock?6

Issues with AJAX

Ajax, like many other technologies, has grown rapidly introducing a new approach to the web. At the same time, problems with user interface and loading, complications, browser support, XMLHttpRequest standardization, JavaScript code and security issues has become a fact when using Ajax.

Ajax relies heavily on JavaScript. The functionality of JavaScript is essential to webpages with Ajax implemented. If a user prefers JS to be turned off, then application becomes useless. Otherwise, the developer must create a non-JS coded version of the web page for users. Interference with the server can be an issue when using JavaScript. Tutorialspoint states JS code is visible to hackers, which can be a problem. Hackers can interfere with the server using JS code.

Misusing the back and refresh button. Programmer Alex Bosworth believes the back button is a great feature, but JavaScript sets drawbacks when using the application’s functionality. When a user clicks the back or refresh button, the browser will send them to a completely different webpage or if dynamic they will be sent to the beginning the page processing. An addition, older browsers do not support XMLHttpResquest, which allows the asynchronous of web pages.

An unconventional way of using a webpage. Web-applications like Google Map, creates a learning curve for users who are not accustom to the click and drag method increasing difficulty. The developer must think about the accessibility and usability when utilizing AJAX. When developers consider using Ajax, they must also keep the user in mind. Don’t make the user think!

What’s next for AJAX?

Ajax has many challenges, yet presents better user interaction, reduced reload time, executed multi-purpose applications and features, and stability. Jesse Garret states “…the challenges are for the designers of these applications…” With a variety of web application implementing Ajax and huge investments made by Google, the technology will continue to mature and improve. There are many disadvantages and advantages using Ajax, a combination of technologies working together, and it will make the user’s experience easy and fun.

 

 

Resources:

http://www.w3schools.com/ajax/default.asp

http://www.tutorialspoint.com/ajax/what_is_ajax.htm

http://www.webopedia.com/TERM/A/Ajax.html

http://www.itbusinessedge.com/topics/show.aspx?t=695

http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications/

https://developer.mozilla.org/en/docs/AJAX

https://developer.mozilla.org/en-US/docs/JSON

http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html

http://www.openajax.org/whitepapers/When%20Does%20Ajax%20Make%20Business%20Sense.php

http://www.jscripters.com/ajax-disadvantages-and-advantages/

https://alexbosworth.backpackit.com/pub/67688

Examples of Ajax

http://blog.teamtreehouse.com/create-your-own-ajax-effects

http://www.hotajax.org/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s