AJAX Live 

We appreciate

Overview

Recalling the web technological terms.

The need for AJAX

Introducing AJAX

Constituent stages in AJAX

AJAX Engine setup

Building AJAX application

Commercial AJAX Frameworks and Toolkits

AJAX Gotcha

Recalling the web technological terms

HTMLThe World Wide Web is constructed from many millions of individual pages, and those pages are written in a language called HTML. The purposeof this language is to display the content in the browser.

Cascading Style SheetsNormal files with HTML understandable style syntax that results colorful display of the content in the browser.

JavaScriptScripting code that is embedded in the HTML to make the normal HTMLpages more dynamic.

Server scriptScript at the server side that provides results to the clients requests.

EX: PHP,ASP,JSP,ASP.NET

FrameworkA Framework in software development is defined as the support structure inwhich other projects can be developed and organized. LibraryA library is defined as a collection of related functions and subroutines used to develop software. They are not independent programs.

ToolkitsA toolkit is generally used in reference to graphical user interface (GUI) toolkits. Basically, a library that is mainly focused on creating a GUI..

ObjectAn object can be thought of a single package contains set of properties,whichcontains and classify the data,set of methods with which objects can performactions on the data.

The need for AJAX

Ajax allows you to add to your web application interfaces some of this functionality more commonly seen in desktop applications and often referred to as a rich user experience.

To achieve this, Ajax builds an extra layer of processing between the web page and the server. This layer is commonly referred as

AJAX Engine (or) AJAX Framework

The updating of page elements to reflect the revised information received from the server is also looked after by Ajax, happening dynamically while the page continues to be used.

Introducing AJAX

Constituent stages in AJAXXMLHTTPRequest ObjectHeart of the AJAX Engine and it is responsible to carry the HTTP request to the server asynchronously. Note The XMLHTTPRequest object can generally only make calls to URLs within the same domain as the calling page and cannot directly call a remote server.

Talking with the ServerXMLHTTPRequest talks with the server with its appropriate methods andproperties asynchronously at the backside.

Server ResponseAs per the Server script is concerned the request from the XMLHTTPRequest is just another HTTP request.

Dealing with the Server ResponseOnce after the AJAX Engine gets notified about the sucessful execution.It modifies the data according to the functionality and keeps in place.

AJAX Engine setupXMLHTTPRequest Object Properties and Methods

onreadystatechange Determines which event handler will be called when the object's readyState property changes

readystate

Integer reporting the status of the request:0 = uninitialized1 = loading2 = loaded3 = interactive4 = completed

responseText Data returned by the server in text string form

responseXML Data returned by the server expressed as the document object

status HTTP status code returned by server

statusText HTTP reason phrase returned by server

Properties Description

abort() Stops the current request

GetAllResponseHeaders()

Returns all headers as a string

getresponseHeader(x) Returns the value of header x as a string

open('method','URL','a')specifies the HTTP method (for example, GET or POST), the target URL, and whether the request should be handled asynchronously (If yes, a='True'the default; if no, a='false'.)

send(content) HTTP status code returned by server

setRequestHeader('x','y') HTTP reason phrase returned by server

Methods Description

send() MethodOnce the XMLHTTPRequest object is prepared with the open() method, it ispossible to send the request with the send() method.

If the request uses GET method ,then we can use send with a single argument null

objectInstance.send(null);If the request uses POST method ,we must feed the content type and thevalues.

objectInstance.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');objectInstance.send(var1=value1&var2=value2);

Creating the XMLHTTPRequest Object with Cross Browser solution

We can provide the solution for the Cross-Browsers using two ways

1. Using Object Detectionfunction getXMLHTTPRequest(){var request = false;try { request = new XMLHttpRequest(); /* e.g. Firefox */ }catch(err1) { try { vrequest = new ActiveXObject("Msxml2.XMLHTTP"); /* some versions IE */ } catch(err2) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); /* some versions IE */ } catch(err3) { request = false; } } }return request;}

2. Using Browser Detectionfunction getXMLHTTPRequest(){var request = false;if(window.XMLHTTPRequest) { request = new XMLHTTPRequest(); } else { if(window.ActiveXObject) { try { request = new ActiveXObject("Msml2.XMLHTTP"); } catch(err1) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch(err2) { request = false; } } } }return request;}

To-Do List

1. An HTML document forming the basis for the application

2. Javascript routines to create an instance of the XMLHTTPRequest object, construct and send asynchronous server calls

3. A server-side routine to configure and return the required information

4. A callback function to deal with the returned data and use it in the application

Building AJAX application

AJAX Frameworks and Toolkits

AJAX Java FrameworksEcho2

Tacos SWATO -Shift Web Application To WebORB

AJAX .NET Frameworks AJAX Engine ATLAS Bitkraft MagicAjax

AJAX PHP Frameworks AjaxAC AJAX AGENT Cajax Flexible Ajax

AJAX Frameworks and Toolkits

AJAX ToolkitsAJAXLib

CPAINT Dojo Prototype

Sajax

AJAX Flash Frameworks Flex Framework:FABridge

AJAX Gotchas

Back Button.

Entertaining the Users.

Don't use AJAX unnecessarily.

Less Security.

Vigorous testing on different platforms.

Ajax Won't Cure a Bad Design.

Permission Denied Errors

Summary / Take home

The combined effect of the issues just described, is to offer a much inferior user experience like desktop applications.

Adopt Ajax for usability, not just to strut your stuff.

Be careful about conserving resources in the server system, the browser system, and the connection between them.

Avoid much animations so that the user can focus on the important things.

The functions made available by libraries, greatly simplify some of the trickier programming tasks while developing Ajax applications.

Resources

Maxkiesler http://www.maxkiesler.com

Manageability http://www.manageability.org/

DHTMLgoodies http://www.dhtmlgoodies.com

Free programming resources http://www.freeprogrammingresources.com

Econsultant http://www.econsultant.com

Ajaxian http://ajaxian.com

Books

Special Thanks

CommVault Systems (India) Pvt. Ltd.http://www.commvault.com/

CommVault is a Storage Management, Backup and DisasterRecovery company incorporated in USAwith its Global Development Centre in Hyderabad, AP.

About us

CharterPromote, Develop and Showcase Open Source software.

LegalRegistered “not for profit” Society under A.P. Societies Reg Act, 2001.

ManagementGoverned by Society By-Laws. Led by 7-member board of directors.

Contact uswebsitewww.twincling.org

mailing listgroups.yahoo.com/group/twincling

forum (software --> twincling)http://www.nabble.com/twincling-15741.html

IRC#twincling

helpline+91-99496 50605+91-99499 91585

more infoMr. Kumar S. N. - Public Relations & Strategic Alliances