AJAX Introduction By Oliver Cai Oct 17, 2006
Jan 19, 2015
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