Ajax

Ajax is ubiquitous. Look around at fackbook, twitter, gmail, outlook web, google maps, google instant search, whichone isn’t utilising Ajax?

What’s Ajax?

AJAX stands for Asynchronous JavaScript and XML. It’s a workaround for web app to communicate with server-side scripts. It can send as well as receive information such as JSON, XML, HTML, and even text files (CSS) and JavaScripts, i.e. JSONP. The most appealing characteristic of AJAX is its “asynchronous” nature, allowing update web page partially upon user events.

The basic idea of Ajax is to use XMLHttpRequest to transfer data asynchronously. Of course, you can also do this in a synchronous way.

The use of Ajax in Web development architecture vs. the traditional method:

When did Ajax come out?

In 2005, Jesse James Garrett coined this term in the article Ajax: A New Approach to Web Applications. The technique came out for many years as a way to avoid reloading the whole web page for better user experience.

How Ajax works?

Ajax uses XMLHttpRequest API. A simple Ajax code is in MDN: Ajax Getting Started. Basically, you create a HTTP request using GET or POST method in JavaScript, not through browser tab URL change of the client side, and with a server side code to match such request to response.

Issues

Since Ajax is requesting resources in browser, there is a Same Origin policy. Most browsers can’t  allow one domain to request data from other domains except specifically allowed (CORS), but JavaScript is a exception. So developers come up with JSONP to overcome this problem. JSONP returns data in a script manner to be executed immediately in browser through a callback function upon loaded. However, this will introduce security issues like Cross site request forgery as the attacker could use the fake web page to request data from the actual web page.

Browsers are implemented differently, and hence the support of XMLHttpRequest is not fully done. There are many libraries to help in writing Ajax such as jQuery, backbone, YUI,  or other big web frameworks like Angular, Dojo. Essentially, they try to detect the client browser and adopt the different underlining implementation of the XMLHttpRequest API.

 

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