Scribd
Upload
35 views27 pages

Ruth Betcher Ruth Christie

AJAX stands for Asynchronous JavaScript and XML. It is a technique for building interactive web applications where data can be updated asynchronously in the background without interfering with the display and behavior of the existing page. AJAX uses a combination of technologies like XHTML, CSS, DOM, XML, XSLT, JavaScript, and the XMLHttpRequest object to retrieve data from the server asynchronously in the background without loading the entire web page. This makes for a more responsive and interactive web application.

Uploaded by

Ashwani Kumar Maurya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
35 views27 pages

Ruth Betcher Ruth Christie

AJAX stands for Asynchronous JavaScript and XML. It is a technique for building interactive web applications where data can be updated asynchronously in the background without interfering with the display and behavior of the existing page. AJAX uses a combination of technologies like XHTML, CSS, DOM, XML, XSLT, JavaScript, and the XMLHttpRequest object to retrieve data from the server asynchronously in the background without loading the entire web page. This makes for a more responsive and interactive web application.

Uploaded by

Ashwani Kumar Maurya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 27

AJAX

RUTH BETCHER
RUTH CHRISTIE
Outline

 What does AJAX stand for?


 What is AJAX?
 How it works
 The Internet standards it’s based on
 Advantages/disadvantages
 Uses for AJAX
 Example code
 Conclusion
What does AJAX stand for?

 Asynchronous JavaScript and XML


What is AJAX?

 Not a language itself


 A group of related existing technologies compiled
together or technique to make web pages feel more
responsive
 Makes interactive web pages by providing a way for
the web page to interact with the server
 AJAX is a framework
How it works
Based on Internet Standards

 XHTML/HTML and CSS


 To display the data

 JavaScript (XMLHttpRequest calls)


 To exchange data asynchronously with the server

 XML
 To tranfer the data

 DOM (document object model)


 To navigate the hierarchy of X/HTML elements
X/HTML and CSS

 Elements are identified in the X/HTML code that


will be worked with by the JavaScript
 These provide the visual layout and structure for how
the XML data will be displayed (performed on the
client machine)
 CSS provides the styling
JavaScript/XMLHttpRequest

• Provides connection between the X/HTML


element(s) and how they behave
• Sends XMLHttpRequests on demand when the user
creates events
• Handles events both from the user and the replies
from the server
• Can parse XML data and map it to data objects
needed in the JavaScript
• Updates the X/HTML elements as needed
XML

 Provides format for data transfer between the


JavaScript and the server
DOM

 Two DOMs involved


 One for the elements in the X/HTML

 One for the elements in the XML file

 Defines the logical structure of the documents


 Can be used by any programming language
 Used for navigating around the tree structure
 Provides quick access for changing/modifying
elements
XMLHttpRequest

• Object used for fetching/returning data


• Can be synchronous or asynchronous—AJAX uses it
asynchronously
• Allows the web pages to get more data from the
server incrementally and asynchronously while the
user is doing other things
• Examples are Gmail, which continuously asks the
server for new mail and Google Maps, which update
only the new parts of a map when the user mouses or
clicks on a new point
Advantages

• Interactivity
– Asynchronous transmission of data back and forth

• Bandwidth usage
– Smaller payload

• Encourages modularization
– Function, data sources, structure and style

• Allows non-related technologies to work together


(server-side languages, databases, client-side
languages, etc.)
Disadvantages

• Difficult to debug because it is asynchronous


• Search engines can’t index/optimize
• Browsers handle XHRs differently—Internet
Explorer didn’t have a native one till version 7
(presently on version 8)
• Back button and bookmarks may not work as
expected
• May experience response time/latency problems if
there are many frequent updates
Uses for AJAX

 Real-time form data validation when server-side


information is required
 Autocompletion (again when server-side info from a
database, for example, is needed)
 Sophisticated user interface controls and effects such
as progress bars
 Getting current data without reloading a full page
Web example

 Mower County Horticultural Society


 www.mowercountyhs.org
XML for Events
XML for Albums
HTML

CSS
HTML

CSS
Conclusion

 AJAX is a technique for creating fast, dynamic,


responsive web pages
 AJAX applications are browser- and platform-
independent
References

• Schwartz, Aaron. A Brief History of Ajax.


http://www.aaronw.com/weblog/ajaxhistory
• Ajax.org
• http://www.w3schools.com/Ajax
• Murray, Greg. Asynchronous JavaScript Technology
and XML (Ajax) With the Java Platform.
http:/java.sun.com/developer/technicalArticles/J2E
E/AJAX

You might also like