Unit 3

AJAX
UNIT-3
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

AJAX is not a programming language.
AJAX is a technique for accessing web servers from a
web page.
AJAX stands for Asynchronous JavaScript And
XML.
AJAX is a developer's dream, because you can:
Read data from a web server - after the page has

loaded
Update a web page without reloading the page
Send data to a web server - in the background
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
Ajax architecture & How it works
Difference between traditional and Ajax architecture
Workflow of traditional Web development mode:
 The traditional Web development model is a synchronization

concept. The user must wait for each request, when a request
completes, a new request is made before the result is used. For
example, when a user requests an article, he will definitely
read the article before going to get other data, otherwise the
current article page will be refreshed, Unable to read.
 It is completely a Request---> Refresh---> Response model,
the user can only wait for the completion of the user operation,
the operation is completed before submitting the next request,
user behavior and server behavior is a synchronous
relationship.
ajax Development Mode Workflow:
 The Ajax development model is an asynchronous concept. This means

that the client and server side do not have to wait for each other, but
rather do a concurrent operation. The user can continue to work on the
current job, including browsing or submitting information, after the
request is sent again. After the server response is complete, the AJAX
engine displays the updated data to the user, And the user determines
their next behavior according to the response content.
 There is an extra layer of Ajax engine on the user's behavior and server
side that handles the user's behavior and translates to server requests.
At the same time it receives server-side information, which is processed
and displayed to the user.
Architecture Working
Working steps of Ajax
 As you can see in the above example, XMLHttpRequest object plays a

important role.
Step1. User sends a request from the UI and a JavaScript call goes to
XMLHttpRequest object.
Step2. HTTP Request is sent to the server by XMLHttpRequest object.
Step3. Server interacts with the database using JSP, PHP, Servlet,
ASP.net etc.
Step4. Data is retrieved.
Step5. Server sends XML data or JSON data to the XMLHttpRequest
callback function.
Step6.HTML and CSS data is displayed on the browser.
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
AJAX - Send a Request To a Server
File
read
from
server
Synchronous
communicati
on
AJAX - Server Response
Access Across Domains
For security reasons, modern browsers do not allow

access across domains.
This means that both the web page and the XML file
it tries to load, must be located on the same server.
The examples on W3Schools all open XML files
located on the W3Schools domain.
If you want to use the example above on one of your
own web pages, the XML files you load must be
located on your own server.
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
 Ajax communication is often a piece of data, such as a

xml.html fragment, or plain text, which is not a complete
HTML document and is retrieved asynchronously through
the background and cannot be discovered and cached by
the search engine.
 Ajax transfer a large number of operations from the server
side to the client, meaning that the browser will bear a
greater burden, no longer a simple document display. The
core language in Ajax is JavaScript, which, as an
interpreted scripting language, does not run very
efficiently. and relies on different browsers to implement
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

Unit 3

Uploaded by

Copyright:

Available Formats

Unit 3

Uploaded by

Document Information

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

Unit 3

Uploaded by

Copyright:

Available Formats

AJAX

What does AJAX stand for?

Asynchronous JavaScript and XML

Read data from a web server - after the page has

Not a language itself

 The traditional Web development model is a synchronization

 The Ajax development model is an asynchronous concept. This means

 As you can see in the above example, XMLHttpRequest object plays a

XHTML/HTML and CSS

Elements are identified in the X/HTML code that

• Provides connection between the X/HTML

Provides format for data transfer between the

Two DOMs involved

• Object used for fetching/returning data

For security reasons, modern browsers do not allow

• Allows non-related technologies to work together

 Ajax communication is often a piece of data, such as a

• Difficult to debug because it is asynchronous

Real-time form data validation when server-side

You might also like