Introduction to Ajax
By Gopalarathnam Venkatesan Yahoo!, Inc.
What is this talk about?
●
Introduction to Ajax Advantages and Disadvantages of Ajax How to address and solve each of the disadvantages Cross-domain requests
●
●
●
Introduction to Ajax
What is Ajax?
Introduction to Ajax
Ajax is ...
Asynchronous JavaScript and XML
Introduction to Ajax
Ajax is ...
A technique for developing Rich Internet Applications (RIA)
Introduction to Ajax
History
Originally developed by Microsoft, as XMLHTTP and was available with Internet Explorer 5.0
Introduction to Ajax
History (contd.)
Mozilla 1.0 had the first native implementation of XMLHttpRequest in 2002. Soon followed by Safari, Opera and others.
Introduction to Ajax
History (contd.)
Though Ajax had its roots before, Jesse James Garret coined the name “AJAX” in early 2005. It's now simply “Ajax” and is no longer an acronym.
Introduction to Ajax
History (contd.)
W3C standardized XMLHTTPRequest object API in 2006.
Introduction to Ajax
Traditional Web Application Development Model
Web Browser HTTP Request Web Server
HTML/CSS/JS
DB
Introduction to Ajax
Web Application Model using Ajax
Web Browser HTTP Request using Ajax Web Server
HTML/CSS/XML/JSON
DB
Introduction to Ajax
Ajax == DHTML
Yes.
Introduction to Ajax
Enough history!
●
Create an XMLHttpRequest object Make a HTTP request to the server Register your callback function for handling the response Handle the response, check for return status Parse the response on success, display result
Introduction to Ajax
●
●
●
●
XMLHttpRequest
●
XHR for short is an API to transfer data to and fro between the client (UA) and the server (Web server) over HTTP Data format need not be XML Some methods:
– –
●
●
open(): Creates a HTTP request send(): Sends the HTTP request created by open() setRequestHeader(): Sets a new HTTP header
Introduction to Ajax
–
XMLHttpRequest (contd.)
●
Some properties of XHR object:
–
onreadystatechange: has the reference to the function that would be called upon every state change readyState: response state, 1=open, 2=sent, 3=receiving, 4=success responseText, responseXML: the response when received as plain text, or as markup respectively status: the HTTP response status (200=OK)
Introduction to Ajax
–
–
–
XMLHttpRequest (contd.)
●
Quick and dirty code sample:
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { // success, process data } } }; xhr.open(“GET”, “http://www.foo.com/bar”, true); xhr.send(null);
Introduction to Ajax
Different Implementations
●
Internet Explorer 5.x, 6.x does not have native XMLHttpRequest object. Implements XMLHTTP as an ActiveX object.
●
// IE 6.x var xhr = new ActiveXObject(“Msxml2.XMLHTTP”); // IE 5.x var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
Introduction to Ajax
Example of simple GET & POST requests
●
Example of a simple GET request
–
http://gopalarathnam.com/examples/javascri pt/ajax/echo-get.html http://gopalarathnam.com/examples/javascri pt/ajax/echo-post.html
●
Example of a simple POST request
–
Introduction to Ajax
Advantages of using Ajax
●
Rich User Interface Snappier Response Time Lower Bandwidth Usage Separation of content, formatting, and behaviour
●
●
●
Introduction to Ajax
Disadvantages of using Ajax
●
Cross Browser Compatibility Search Engine Optimisation Accessibility Issues
– – – –
●
●
Changing state with links No visual clues Losing the ability to bookmark links Browser history (back button)
Introduction to Ajax
Ajax Libraries and Frameworks
●
dojo Toolkit Google Web Toolkit Microsoft Atlas Prototype Script.aculo.us YUI and a lot more ...
Introduction to Ajax
●
●
●
●
●
●
Which one to choose?
Yahoo User Interface (YUI) library
Introduction to Ajax
Why choose YUI?
●
One of the best documented libraries Native JavaScript implementation unlike some libraries which needs Java, etc. Time Tested Yahoo! uses it for all its services, and hence the library is robust and performant Hosted on Yahoo! servers
Introduction to Ajax
●
●
●
●
Example of simple GET & POST requests using YUI
●
Example of a simple GET request
–
http://gopalarathnam.com/examples/javascri pt/ajax/yui-echo-get.html http://gopalarathnam.com/examples/javascri pt/ajax/yui-echo-post.html
●
Example of a simple POST request
–
Introduction to Ajax
Debugging Ajax Applications
●
For Firefox, use FireBug 1.0+ Logging messages using YUI Logger See errors on JavaScript console Microsoft Developer Toolbar for IE?
●
●
●
Introduction to Ajax
Ajax Accessibility - Changing state with links
●
Problem for users that assume GET requests do not change the state of an application Confuses Robots, Spiders Shows Bad Design – Designer does not know the difference between GET & POST requests
Introduction to Ajax
●
●
Ajax Accessibility - No Visual Clue
●
Display an indicator/progress of whats happening behind the scenes Have a timeout for the transaction, do not try to process the request indefinitely If possible have an option of the user aborting the transaction (equivalent of the “stop” button in the browser) http://gopalarathnam.com/examples/java script/ajax/yui-echo-get-prg.html
Introduction to Ajax
●
●
●
Whirlwind Introduction to Progressive Enhancement
●
Introduced to subvert the traditional “Graceful Degradation” development method. Develop for the lowest denominator, add presentation and behaviour to enrich the UE for latest browsers and devices. Benefits for Accessibility Benefits for SEO
Introduction to Ajax
●
●
●
Fixing the Back Button!
●
Any client-side changes to the page (using DHTML) are not recorded in the browser's history So, back/forward buttons do not work well with rich applications that use DHTML Yahoo! Browser History Manager to the rescue http://gopalarathnam.com/examples/java script/ajax/yui-echo-get-hst.html
Introduction to Ajax
●
●
●
Cross-domain requests
●
Denied due to security implications Quite a lot of ways to work-around the limitation Server-side proxy is one of the most used
foo.com makes an Ajax request to foo.com/bar.php bar.php connects to bar.com/baz, Return returns results data Ajax
●
●
●
http://gopalarathnam.com/examples/java script/ajax/ynews.html
Introduction to Ajax
Q&A
Introduction to Ajax