AJAX

What is AJAX ?

Ajax is just a style of design, one that makes feel

less web and more desktop

Asynchronous JavaScript And XML

AJAX : The Next Generation of Web Applications

 What is AJAX ?

Also know as XMLHTTP, Remote Scripting, XMLHttpRequest

Like LAMP, AJAX is not a technology or Language , but rather a
group of technologies
Term coined by Jesse James Garrett
Ajax is not New , Active use for at least six years
Development technique for creating Interactive web applications

AJAX : The Next Generation of Web Applications

 What is AJAX ?

Ajax, shorthand for Asynchronous JavaScript and XML, is a web

development technique for creating interactive web applications. The
intent is to make web pages feel more responsive by exchanging small
amounts of data with the server behind the scenes, so that the entire web
page does not have to be reloaded each time the user makes a change.
This is meant to increase the web page's interactivity, speed, and usability.

AJAX : The Next Generation of Web Applications

 Why we Require AJAX ?
WebPages always RELOAD and never get UPDATED
Users wait for the entire page to load even if a single piece of data is
needed
Single request/response restrictions
These factors cause……

Slow Web Apps

Poor User Experience
Wasted Resources
Un-Familiar User Interfaces

AJAX : The Next Generation of Web Applications

 What AJAX does for Us ?
 Real-Time Form Data Validation
 Form data that require server-side validation can be validated in a form
“before” the user submits it.

 Auto completion
 A specific portion of form data may be auto-completed as the user
types.

 Master Details Operations

 Based on a client event, an HTML page can fetch more detailed
information on data without refreshing the page.

 Sophisticated UI Controls
 Controls such as tree controls, menus, and progress bars may be
provided without page refreshes.

AJAX : The Next Generation of Web Applications

 Why AJAX is Better ?
AJAX is
In Bytes Transferred - 73% More Compact
Total Task Time - 32% Faster
Transmission Time – 68% Faster
CLASSIC

So
Better User Experience
AJAX

More Flexibility , More Options

AJAX : The Next Generation of Web Applications

 Components of AJAX

 HTML and CSS

• Presenting information
 Document Object Model
• Dynamic display and interaction with the information
 XMLHttpRequest object
• Retrieving data asynchronously from the web server.
 JavaScript
• Binding everything together

AJAX : The Next Generation of Web Applications

AJAX : The Next Generation of Web Applications
 “Classic” Web Applications
Browser sends Server generates
User does something request to server web page (html +
(e.g. for a web page) css) as a response
to the request

1 3
browser server-side systems
2
http request data
web stores
UI

server backend
4 html + css data etc.
5

Data is returned
Browser replaces view in response to
with data sent from the request
server

AJAX : The Next Generation of Web Applications

 What is inside a “Browser”
Rendering Engine -- takes HTML/CSS
data and images, and ‘knows’ how to
What really happens “under the hood” of
format and display it.
a “Classic” browser.

browser

request

HTML rendering engine

browser
UI

UI HTML
HTML/ /CSS
CSS
data
data data

other
other
data
data (e.g.
(e.g.
images)
images)
Data Stores. Browser knows how to
save and manage data it downloads.

AJAX : The Next Generation of Web Applications

 JavaScript Enters (1996-98)
JavaScript engine – can run programs downloaded alongside the
HTML, CSS and images.
JavaScript
programs can browser
detect UI events
(clicks, etc.) and JavaScript Engine

HTML rendering engine

run code when
the user does
something:
interactivity is
programmable. UI HTML
HTML/ /CSS
CSS JavaScript
JavaScript
data
data programs
programs
data
other
other
data
data (e.g.
(e.g.
images)
images)

JavaScript programs, via the engine, can access and modify the HTML /
CSS data, dynamically changing the UI that’s displayed.

AJAX : The Next Generation of Web Applications

 “XmlHttpRequest” [ XHR ]
Heart of AJAX
An interface allows for the HTTP communication without a page refresh

First implemented in IE in 1997 as part of the new DHTML

standard , In IE, it is named XMLHTTP and available as an
ActiveX Object. Mozilla and others modeled a native object called
XMLHttpRequest after IE’s ActiveX Object

AJAX : The Next Generation of Web Applications

 “XmlHttpRequest” [ XHR ]

Important Methods & Properties of XHR

Open (method, url, asyc)

Methods Send (content)
Abort ( )

Onreadystatechange , readyState (0-4)

Properties responseText, responseXML

AJAX : The Next Generation of Web Applications

 XML data , a new tool
a new JavaScript function.. This lets JavaScript programs send out
requests for data (images, XML, whatever) on their own, without
waiting for a user click.

browser request
XMLHttpRequest()

JavaScript Engine
JavaScript
HTML rendering engine
programs can
now go off and
“do their own
thing,” including HTML XML JavaScript
UI HTML/ /CSS
CSS XML JavaScript
getting data data data code
data data code
from elsewhere,
data
without waiting
for the user to other
other
do something! data
data (e.g.
(e.g.
images)
images)

XML data support. Browsers can now store XML data, and access / manipulate
from JavaScript programs via the JavaScript engine.
AJAX : The Next Generation of Web Applications
AJAX Changed it !
Browser user activity user activity User activity
UI

Response 

Response 
Request 
Request 
Ajax:
time

Server-side

server processing server processing time

Server-side

server processing

AJAX : The Next Generation of Web Applications

 Main Idea - Asynchronous JavaScript Calls to Server

 AJAX’s key concept is the use of XMLHttpRequest to buffer requests

and responses within the browser.
 Use XMLHttpRequest to make a call to the server and get back the
response without displaying it.
 The response is stored locally as either plain text (plain or HTML), or
XML.
 JavaScript + DOM can be used to walk the HTML or XML tree to
handle most user interactions.
 The XMLHttpRequest object in turn can issue requests and process
responses independently of the user’s interaction.
 Go and fetch additional info

AJAX : The Next Generation of Web Applications

 AJAX “Break the Code”

Enter your Name in the Box Suggestions

Frequency Div id

<form>
First Name: <input type="text" id="txt1"
onkeyup= “ showHint(this.value) “ >
</form>
<p>
Suggestions: <span id= “ txtHint “ >
</span>
</p>

AJAX : The Next Generation of Web Applications

 AJAX “Break the Code”
XmlHttpRequest
xmlHttp=GetXmlHttpObject()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
sql="SELECT * FROM CUSTOMERS "
sql=sql & request.querystring("q")
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/names.mdb"))
set rs = Server.CreateObject("ADODB.recordset")
rs.Open sql, conn
response.write("<td>" & x.value & "</td></tr>")

Server

Database
Frequency <div
Not aid=status
Valid Name>

Client/Browser

AJAX : The Next Generation of Web Applications

“Who Uses” AJAX

AJAX : The Next Generation of Web Applications

 How to build AJAX ?

 Could do it custom, but there are some libraries / tools to help you do this.
These have pre-built code that makes life much simpler by:
 providing a toolkit of functions (in JavaScript) that perform key
browser/Ajax functions or patterns of behavior
 supporting multiple browsers (i.e. have built-in workarounds for
differences between Internet Explorer 5/6/7, Firefox 1.0/1.5/1.7, others
 There are also servers / application ‘frameworks’ that support Ajax within a
server/application building environment. For example:
 ATLAS (for .NET)
 AJAX-JSF (Java)
 Cajax (PHP)

AJAX : The Next Generation of Web Applications

 Limitations of AJAX

 Increase in the code size on browser

 Response time affected
 Difficult to debug
 Processing logic both in client and server
 Viewable Source
 Open to Hackers
 Book marking a particular “State” becomes difficult
 JavaScript generates the page NOT server

AJAX : The Next Generation of Web Applications

Queries….

AJAX : The Next Generation of Web Applications