Building Applications Using Ajax

60 %
40 %
Information about Building Applications Using Ajax

Published on October 14, 2007

Author: s_pradeep



The first of its kind Web Technology Conference on Open Source Technology, WebOSS '07 was organised in Kolkata on Sat, 13th Oct 07 and I spoke at the event as one of the participants on "Building Applications using AJAX". Here I will share my presentation.

Building Applications using AJAX WebOSS ‘07 S Pradeep

What is AJAX? AJAX = Asynchronous JavaScript And XML Is a web development technique used for creating faster, interactive web applications.

Who uses AJAX? Google maps Gmail Google Suggest Flickr Meebo and many more…

How AJAX is different

Need for AJAX To increase web's interactivity, speed and usability Issues with classic web applications * Almost all processing is done on server * High latency * Low interactivity

Benefits of Using AJAX Enhance your sites by allowing quicker access to data. Reduce the amount of bandwidth used in data presentation. Make a web application that feels more like a native application.

AJAX Workarounds Hidden IFRAME <SCRIPT> src hack Cookies

Where to use AJAX Anywhere you have a search box, adding Google suggest functionality. Pages where you have a multi-step process. When working with large or highly interdependent datasets.

Simple Ajax Application : How To Create a request object Make the request Handle the response

Create a request object if browser is mozilla or safari or opera then create a new XMLHttpRequest otherwise if browser is IE create a new ActiveXObject otherwise error - browser does not support XMLHttpRequest IE 5,5.5,6 implement XHR as an ActiveX object (Msxml2.XMLHTTP/Microsoft.XMLHTTP) Mozilla 1.0+, Safari 1.2+, Opera 8+, IE7 provide XMLHttpRequest natively. All XHR objects have the same methods and properties.

Code var xhr = null; if(window.XMLHttpRequest) // Mozilla,Safari, etc. { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject) // < IE 7 { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } Else { alert('Oops! Your browser does not support XMLHttpRequest'); }

XHR Methods open(‘method’,’url’,asyncFlag) send(content) abort() getResponseHeader(“header”) setRequestHeader(“header”,”value”)

XHR properties onreadystatechange readystate responseText responseXML status statusText

Make the request set onreadystatechange to callback function cbProcessResponse open a request on the XHR object send the request through the XHR object “Same Site” rule “GET” or “POST” Asynchronous flag

Code xhr.onreadystatechange=cbProcessResponse;’GET’,‘ajax.php’,true); function cbProcessResponse() { if(xhr.readystate==4 && xhr.status==200) { alert(xhr.responseText); } } /* readystate values 0 -> uninitialized 1 -> loading 2 -> loaded 3 -> interactive 4 -> completed */

Handle Response: Parsing the XML // Our sample XML <?xml version=quot;1.0quot; encoding=quot;ISO-8859-1quot;?> <root> <response>OK</response> <msg>Hello World!</msg> </root> // Revised callback function function cbProcessResponse() { if(xhr.readystate==4 && xhr.status==200) { var xmlDoc = xhr.responseXML.documentElement; var s = x.getElementsByTagName('response')[0]; var m = x.getElementsByTagName('msg')[0]; alert(‘Response Code:’+s+’nMessage: ‘+m) } }

Enter JSON JavaScript Object Notation JSON is a lightweight data-interchange format. JSON data are slightly simpler and slightly more in line with the rest of the JavaScript language than scripts for XML data. Find more about JSON at //sample JSON { response: ‘OK’, msg: ‘Hello World’ }

JSON How? JSON can be generated by all the popular server-side languages. Native/Library Support // Revised callback function to use JSON function cbProcessResponse() { if(xhr.readystate==4 && xhr.status==200) { var jsonData = eval(‘(‘+xhr.responseText+’)’); var s = jsonData.response; // easy ;-) var m = jsonData.msg; alert(‘Response Code:’+s+’nMessage: ‘+m) } } Doesn’t that look simpler?

Frameworks A framework is a re-usable design for a software system with built-in generic functions for performing repetitive, natively unsupported operations. The Prototype JavaScript Framework is a JavaScript framework that provides an Ajax framework and other utilities. Download from Others: YUI, Dojo, jQuery, mooTools

Using Prototype.js Prototype provides the Ajax object to abstract the different browsers. Ajax.Request() Ajax.Updater(container, url[, options]) var pars = 'topic=ajax&framework=pjs'; Var url = '/cgi-bin/myAjaxHandler.cgi'; var myAjax = new Ajax.Request(url,{ method: quot;postquot;, // get/post parameters: pars, onComplete: cbProcessResponse // Our old callback function }); Ajax.PeriodicalUpdater(container, url[, options])

Tips Don't overuse AJAX, the usability requirements for JavaScript applications are quite different than the requirements for regular web pages. Escape content sent to the server. Use AJAX activity indicators.

Debugging AJAX Always test your PHP/Server-side code before integrating it with the JavaScript side. Always check xhr.status Use FireBug to pin-point errors, and trace performance bottle-necks. Download from

Resources AJAXIAN - AJAX info - AJAX Lesson - Go4Expert -

Thanks! Hussain Fakhruddin Teknowledge Software The wonderful audience.

Add a comment

Related pages

Building AJAX Applications with PHP and HTML_AJAX - Zend ...

Building AJAX Applications with PHP and HTML_AJAX. ... To install the package using the PEAR installer, use the following command: ...
Read more

AJAX and PHP: Building Responsive Web Applications - Packt

Enhance the user experience of your PHP website using AJAX with this ... "AJAX and PHP: Building Responsive Web Applications is ... Building the AJAX Drag ...
Read more

Building AJAX Applications Using Yahoo! Web Services

Building Web Applications Using Yahoo! Web Services Jeffrey McManus Director, Yahoo! Developer Network March, 2006 About this talk About Yahoo!
Read more

Mix08 Session Overview: Building Great AJAX Applications ...

Mix08 Session Overview: Building Great AJAX Applications from Scratch Using ASP.NET 3.5 and Visual Studio 2008
Read more

Building 2.0 Applications | The ASP.NET Site

Building ASP.NET 2.0 Applications. Blog. Sign in Join. Language. ASP.NET. Home Get Started ... Creating and Using an AJAX-enabled Web Service in a Web Site;
Read more

AJAX and PHP: Building Responsive Web Applications ...

AJAX and PHP: Building Responsive Web Applications: ... Building applications that need real ... This wasn't a simple task to accomplish using non-AJAX web ...
Read more

Building Dynamic Ajax Applications Using WebSphere Feature ...

Building Dynamic Ajax Applications Using WebSphere Feature Pack for Web 2.0 November 2008 International Technical Support Organization SG24-7635-00
Read more

Building Applications Using Ajax - Technology

Building Rich, Interactive E-commerce Applications Using ASP.NET and Silverlight
Read more

Build Your Own AJAX Web Applications - SitePoint

Chapter 1. AJAX: the Overview. He’s escaping, idiot! Dispatch War Rocket Ajax! To bring back his body! — General Kala, Flash Gordon. AJAX Web Applications
Read more