Getting Hands On AJAX-New

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

Getting Hands On AJAX-New

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Getting Hands On AJAX-New

Uploaded by

Copyright:

Available Formats

GETTING HANDS ON

Submitted To:- Prof. Abhinav Juneja

 Asynchronous: means that the processing

 XML: may be used to receive the data

Client makes http request

Server returns a new page

Server returns the requested information

Multiple requests are served

 Bandwidth consumed for the entire task

 With the XHR object, a web page can make

 The XHR object has 3 important properties:

 The readyState property

 The onreadystatechange property

 For this we need to set the onreadystatechange property, to a function

 In this onreadystatechange function we must test the readyState

 Possible values for the readyState property:

Drag and Drop Updating With User

You might also like