1. AJAX – Part I
Mukesh N. Tekwani
tekwani@email.com

2. Ajax – A Brief Introduction
 Ajax – Asynchronous JavaScript and XML
 Components of Ajax are:
 Browser-based presentation using HTML and CSS
 Data stored in XML format and fetched from the
server
 Data fetched by using XMLHttpRequest objects in
the browser.
 JavaScript to make everything happen

3. How Ajax Works
1. The JavaScript code fetches data from
the server as needed
2. When more data is needed from the
server, JavaScript uses the
XMLHttpRequest object to send a
request to the server behind the
scenes – without causing a page
refresh.

4. How Ajax Works
3. The JavaScript does not have to stop
everything to wait for that data to
come back from the server. It can
wait for the data in the background
and display it when the data appears.
This is called asynchronous data
retrieval.

5. How Ajax Works
4. The data that comes back from the server
can be XML or even plain text. The
JavaScript code in the browser can read the
data and put it to work immediately.
5. Thus, Ajax uses JavaScript in the browser
and the XMLHttpRequest object to
communicate with the server without page
refreshes. It also handles XML or other data
sent back from the server.

6. What is needed to make Ajax
Work?
1. We need JavaScript code to fetch data
from the server.
2. An online server is needed to store the
data.
3. We can put code on the server with
which JavaScript can interact. We will
use PHP for this purpose. PHP is a
server-side scripting language.

7. What can you do with Ajax?
Applications of Ajax - 1
 Searching the Web in real time with live
searches:
 With Ajax we get search results instantly as we
enter the term we are searching for.
 E.g., in Google, as soon as we enter the term to
search for, Ajax contacts Google behind the
scenes and we see a drop-down menu that
displays the common search terms from Google.

8. What can you do with Ajax?
Applications of Ajax - 2
 Getting answers with autocomplete:
 Autocomplete applications try to guess
the word you are entering by getting a
list of similar words from the server and
displaying them.

9. What can you do with Ajax?
Applications of Ajax - 3
 Chatting with friends
 Ajax is a great choice for Web-based chat
applications because it updates the Web
page without refreshing the displayed
page.

10. What can you do with Ajax?
Applications of Ajax - 4
 Getting instant login feedback:
 Suppose a user enters wrong
username/password, he may get a page
explaining the problem and then another
page to login again.
 With Ajax, it is possible to get instant
feedback on the login attempt.

11. What can you do with Ajax?
Applications of Ajax - 5
 Ajax-enabled pop-up menu:
 We can get data from the server as soon
as the user needs it using Ajax.
 With Ajax we can set up an interactive
menu system that responds to the user’s
choices immediately.

12. What can you do with Ajax?
Applications of Ajax - 6
 Modifying Web pages on the fly:
 Ajax can update Web pages on the fly
without page refreshes.
 For example, a news website can use
Ajax techniques to update itself
periodically by adding new article titles to
the list on the Web page.

13. What can you do with Ajax?
Applications of Ajax - 7
 Google Maps:
 This is one of the most famous
applications of Ajax.