AJAX Introduction

By Oliver Cai

Oct 17, 2006

What does it mean?

AJAX

shorthand for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications.

* The first use of the term in public was by Jesse James Garrett in February 2005.

Defining Ajax

Ajax is a set of technologies being used together in a particular way. It is the software bundle, it incorporates:

– standards-based presentation using XHTML and CSS; – dynamic display and interaction using the

Document Object Model; – data interchange and manipulation using XML and XSLT; – asynchronous data retrieval using XMLHttpRequest; – and JavaScript binding everything together.

How does Ajax work?

– Use client-side scripting for layout and formatting– Use less than full page reloads to change content– Use data formats other than HTML– Interact asynchronously with the server

Upstream Options

– GETs and Form POSTs– SOAP envelope– XML– JAVA remoting

Downstream Options

– XML– JSON– Full Javascript– Javascript Arrays– Custom Serialization Frameworks

(such as: Atlas, Google Web Tookkit)

Advantages of Ajax

Bandwidth utilization Generating the HTML locally within the browser, and only

bringing down JavaScript calls and the actual data. Interactivity

Ajax can be used for all without the requirement to fetch a full page of HTML each time a change is made. it extends the browser with lightweight mini-applications

Examples: updating or deleting records; expanding web forms; returning simple search queries; or editing category trees

Drawbacks of Ajax

- If JavaScript is not activated, Ajax can't works.

- Since data to display are loaded dynamically, they are not part of the page, and the keywords inside are not used by search engines.- The asynchronous mode may change the page with delays (when the processing on the server take some times), this may be disturbing.- The back button may be deactivated (for ie 6.0 and earlier)

Who’s Using Ajax

Google is making a huge investment in developing the Ajax approach.

Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticated Google Maps (also using at A9, MS Outlook)

Ajax’s Specifications

Ajax is based on these specifications:- XML 1, HTML 4.0, DOM 2, from W3C - ECMAScript 1.5 (standard for JavaScript) from ECMA.- W3C draft specification for XMLHttpRequest.

Ajax methods’ providers

– XMLHttpRequest(API) or XMLHTTP(ActiveX)– Invisible inline frames or iframes (pure Javascript) – Netscape's LiveConnect – Microsoft's ActiveX – Microsoft's XML Data Islands – Macromedia Flash Player – Java Applets

XMLHttpRequest (XHR)

It is an API that can be used by JavaScript, JScript, VBScript and other web browser scripting languages to transfer and manipulate XML data to and from a web server using HTTP, establishing an independent connection channel between a web page's Client-Side and Server-Side.

XHR’s Methods

abort() : Cancels the current request getResponseHeader(headerName) : Returns the value of the

specified HTTP header open( method, URL, async ) :

“method” parameter can have a value of "GET", "POST", or "HEAD". Other HTTP methods, such as "PUT" and "DELETE" (primarily used in REST applications), may be possible.

“URL” parameter may be either a relative or complete URL. "async" parameter specifies whether the request should be

handled asynchronously or not. send( content ) : Sends the request. setRequestHeader( label, value ) : Adds a label/value pair to the

HTTP header to be sent.

Framework & Toolkit

Dojo Toolkit /Clean AJAX /SAJAX DWR (Direct Web Remoting) AJAX-enabled JSF Components Google Web Toolkit(GWT) ASP.NET Ajax /Ajax.NET Professional

XHR’s Properties

onreadystatechange: An event handler for an event that fires at every state change.

readyState: Returns the state of the object as follows: 0 = uninitialized, 1 = open, 2 = sent, 3 = receiving and 4 = loaded.

responseText: Returns the response as a string. responseXML: Returns the response as XML. This property returns

an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties.

status: Returns the status as a number (e.g. 404 for "Not Found" and 200 for "OK")

statusText: Returns the status as a string (e.g. "Not Found" or "OK").

function createXMLHttp(){ if (typeof XMLHttpRequest !="undefined"){ return new XMLHttpRequest(); } else if (window.ActiveXObject){ return new ActiveXObject(“MSXML2.XMLHttp.5.0”); }

throw new Error("XMLHttp object could be created."); }

Implementation

Create Communication Object for cross-platform browsers

function getServerInfo(){Var oXMLHttp = CreateXMLHttp();Var sURL=“serverresponse.php?”;oXMLHttp.open("GET", sURL, true );oXMLHttp.onreadystatechange= function(){

if( oXMLHttp.readyState ==4){if(oXMLHttp.status ==200){

showInfo(oXMLHttp.responseText);}else{

showInfo("An error occurred”);}

}}oXMLHttp.send(null); //send the request

}

Simple “GET”

JSON’s “POST”

function getServerInfo(){ Var oXMLHttp = CreateXMLHttp(); Var sURL=“serverresponse.php”; Var oData={ items1:”values”,items2::”values”}; //define the data oXMLHttp.open(“POST", sURL, true ); oXMLHttp.onreadystatechange= function(){ if( oXMLHttp.readyState ==4){ if(oXMLHttp.status ==200){

var aGetInfo = JSON.parse(oXMLHttp.responseText); showInfo(aGetInfo); //show info }else{ showInfo("An error occurred”); } } } oXMLHttp.send(JSON.stringify(oData)); //sent the request

}* At back-end, JSON.encode or JSON.decode for data

Create POST sending data

Function getRequestBody(oForm){var aParams = new Array();for (var i=0; i< oForm.elements.length;i++){

var sParams = encodeURIComponent(oForm.elements[i].name);sParams += “=”;sParams += encodeURIComponent(oForm.elements[i].value);aParams.push(sParams);

}return aParams.join(“&”);

}

Links

AutoSuggestion http://localhost/test/auto/autosuggestexample.htm

Notificationhttp://localhost/test/newnotify/ordernotify.php

Starhttp://localhost/test/admin/sample_new.php