GETTING HANDS ON
AJAX
Submitted To:- Prof. Abhinav Juneja
H.O.D CSE
Submitted By:- Chuni Lal
IT/06/512
Outline
1. What you’re in for…
2. What’s AJAX?
3. Why AJAX?
4. Look at AJAX example
5. Issues related with AJAX
What you’re in for…
A discussion about an emerging web
application framework
An introduction to the essential
elements of AJAX
Walkthrough the code of a working
AJAX example
Issues related with AJAX
What is AJAX?
Asynchronous Javascript and XML
Not all AJAX apps involve XML
Combination of technologies
HTML, CSS, DOM
XML, XMLHttp, JavaScript
Not a language but a methodology
A method for building more responsive and
interactive applications.
Who are using AJAX ?
Why Do I Care About AJAX?
Enables building Rich Internet Applications (RIA)
Allows dynamic interaction on the Web
Improves performance
Real-time updates, without reloading the whole page
No plug-ins required
Open Source
Work on Open Standards
Platform independence (OS, server, browser, IDE)
Compatible with HTML and existing web development
technologies
Job Trends
AJAX = Asynchronous JavaScript
and XML
JavaScript: used to make a request to the
web server.
Asynchronous: means that the processing
will continue on without waiting for the server
side retrieval to complete.
XML: may be used to receive the data
returned from the web server.
Traditional Web Interaction
Client makes http request
Server returns a new page
Web server
How AJAX works
Client makes http request for specific information
Server returns the requested information
Web server
Multiple requests are served
Click, Wait, Refresh
Ajax-powered user
experiences
Ajax Value Proposition
More productive end-users, lower
bandwidth, and strong ROI
Time spent waiting for data to be
transmitted.
Time spent completing a particular task
Bandwidth consumed for the entire task
Client vs. Server Scripting
Client scripting
Web browser does all the work
Server Scripting
Web server does all the work
AJAX leverages both client and server
side scripting
AJAX Web Interaction
What you don’t see
Data reload happens in the background
JavaScript queries the server to get the
proper data without you knowing it
Page updates without a screen “reload”
AJAX uses the XMLHttpRequest
object
Our JavaScript communicates directly with
the server, through the JavaScript XHR
object.
With the XHR object, a web page can make
a request to, and get a response from a
web server - without reloading the page.
Walkthrough An Example
We create an AJAX application from
scratch.
It will have a click button to fetch data
from a server and display the
information in a web page, without
reloading the page itself..
<html>
HMTL Code
<head>
<script src="ajax.js"></script> </head>
<body>
<center>
<h1>Hello I.T. FINAL YEAR </h1>
<div id="test">
<h2>Click to let AJAX change this text</h2></div>
<button type="button"
onclick="loadXMLDoc('test1.txt')">ClickMe</button>
</center>
</body>
</html>
JavaScript Code
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest(); create a XMLHttpRequest
object
}
else
{// code for IE6, IE5
if IE5 or IE6 create an
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
ActiveXObject
}
Open the request
xmlhttp.open("GET",url,true);
Send request object
to
xmlhttp.send(null);
server
document.getElementById('test').innerHTML=xmlhttp.responeText;
} Update page with the
response from the server
Important Properties
The XHR object has 3 important properties:
The responseText property
The readyState property
The onreadystatechange property
responseText - stores any data retrieved from a server.
document.getElementById('test').innerHTML=xmlhttp.responseText
Once we have sent a request to the server we are not sure about the
request completion.
For this we need to set the onreadystatechange property, to a function
(or name of a function) to be executed after completion.
In this onreadystatechange function we must test the readyState
property before we can use the result of the server call.
The readyState property
The readyState property holds the status of the server's
response.
Possible values for the readyState property:
State Description
0 The request is not initialized
1 The request has been set up
2 The request has been sent
3 The request is in process
4 The request is complete
Make A Change
xmlhttp.onreadystatechange=state_Change();
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
function state_Change()
{
if(xmlhttp.readyState==4)
{ if (xmlhttp.status==200)
{ // 200 = "OK"
document.getElementById(‘test').innerHTML=xmlhttp.responseText; }
else
{
alert("Problem retrieving data:" + xmlhttp.statusText); }
}
}
INSPECT OUR CODE
XHR Object can Request any
Data
Requesting Text Files
Requesting XML Files
Requesting HTML, JSP, ASPX, or ASP
Files
Submitting Forms
Potential Uses for AJAX
Chat Rooms And
Login Forms
Instant
Messaging
Auto-Complete
Form
Voting and Rating Submission &
Validation
Lightboxes Using AJAX With
Flash
Drag and Drop Updating With User
Content
Potential Problems
Ajax reliance on JavaScript
Pages can be difficult to bookmark
Time lag
Debugging is difficult
Complexity of the code makes it
difficult for web developers
AJAX - Further References
Articles
Ajax: A New Approach to Web Applications by Jesse James Garrett
http://www.adaptivepath.com/publications/essays/archives/000385.php
Ajax gives software a fresh look (from CNET News)
http://beta.news.com.com/Ajax+gives+software+a+fresh+look/2100-1007_3-
5886709.html?
Weighing the Alternatives (from ajax info)
http://www.ajaxinfo.com/default~viewart~8.htm
Resources
XMLHttpRequest & Ajax Based Applications (from Fiftyfoureleven.com)
http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/
Foundations of Ajax by Ryan Asleson, Nathaniel T. Schutta
ISBN: 1590595823 http://www.worldcatlibraries.org/wcpa/isbn/1590595823
Tutorials
Getting Started with AJAX (from A List Apart)
http://www.alistapart.com/articles/gettingstartedwithajax
AJAX:Getting Started (from Mozilla Developer Center)
http://developer.mozilla.org/en/docs/AJAX:Getting_Started
Dynamic HTML and XML: The XMLHTTPRequest Object (from Apple Developer
Connection) http://developer.apple.com/internet/webcontent/xmlhttpreq.html
Mastering Ajax, Part 1: Introduction to Ajax (from IBM developerWorks)
http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html?
ca=dgr-wikiAJAXinto1
THANK YOU
