Scribd
Upload
37 views11 pages

2 AJAX (Unit 3)

AJAX (Asynchronous Javascript and XML) is a client-side technology that allows web pages to update dynamically without reloading, enhancing user experience by loading only necessary data. It utilizes a combination of JavaScript, XMLHttpRequest, and various data formats like XML or JSON for data exchange, making web applications faster and more interactive. While AJAX has advantages such as independence from server technology and improved interactivity, it also presents challenges like the back button issue and potential network latency problems.

Uploaded by

vibhavbhartiya13
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
37 views11 pages

2 AJAX (Unit 3)

AJAX (Asynchronous Javascript and XML) is a client-side technology that allows web pages to update dynamically without reloading, enhancing user experience by loading only necessary data. It utilizes a combination of JavaScript, XMLHttpRequest, and various data formats like XML or JSON for data exchange, making web applications faster and more interactive. While AJAX has advantages such as independence from server technology and improved interactivity, it also presents challenges like the back button issue and potential network latency problems.

Uploaded by

vibhavbhartiya13
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/ 11

Contents

 Introduction to AJAX
 Working of AJAX
 Purpose of AJAX
 Data Exchange in AJAX
 History of AJAX
 Structure and C/S Process
 Pros and Cons of AJAX
What is AJAX ?
• AJAX = Asynchronous Javascript and XML.
• Not a stand-alone language or technology.
• AJAX just uses a combination of:
A browser built-in XMLHttpRequest object (to request data from a web
server), JavaScript and HTML DOM (to display or use the data)
• It combines a set of known technologies in order to create faster and more
user friendly web pages.
• It is a client side technology.
• 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

The example of some large-scale Ajax-driven online applications


are: Gmail, Google Maps, Google Docs, YouTube, Facebook,
Flickr, and so many other applications.

The term X (i.e. XML) in AJAX:


Other data exchange format such as JSON, HTML, or plain text can be used instead of XML.
Working of AJAX :

1. An event occurs in a web page (the page is loaded, a button is clicked)


2. An XMLHttpRequest object is created by JavaScript
3. The XMLHttpRequest object sends a request to a web server
4. The server processes the request
5. The server sends a response back to the web page
6. The response is read by JavaScript
7. Proper action (like page update) is performed by JavaScript
Purpose of AJAX
• Prevents unnecessary reloading of a page.
• When we submit a form, although most of the page remains the
same, whole page is reloaded from the server.
• This causes very long waiting times and waste of bandwidth.
• AJAX aims at loading only the necessary information, and
making only the necessary changes on the current page without
reloading the whole page.

Technologies Used

AJAX uses:
• Javascript (for altering the page)
• XML (for information exchange)
• ASP or JSP (server side)
Data Exchange in AJAX
• In AJAX:

Therefore, by using AJAX, unnecessary exchange of data is


prevented, web pages become:
•More interactive
•Faster
•More user friendly
Structure of System
• Client/Server architecture
• XMLHTTP object is used to make request and get response in Client
side
• Request can be done via “GET” or “POST” methods
– “GET”: parameters are attached to the url used to connect.
– “POST”: parameters are sent as parameters to a function
• Not many changes in Server side
– Response is a combination of xml tags

C/S Processes
 Most of the time client requires two files
 Html page: handles GUI and calls a function of JavaScript.
 JavaScript: handles the business logic of the system
 In JavaScript, a request is sent by client and response is taken
from server via XMLHTTP object
 Response of server should be returned in xml file structure
 Only requested data is returned
XMLHTTP Object
• The object that is used to connect to the remote server is called XMLHTTP.
• It resembles the Java’s URL object that is used to access a specific URL and get the
contents.

Creating the object

For IE 5.5:

objXmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”)

For Mozilla:

objXmlHttp=new XMLHttpRequest()
Sending and Retrieving information
• After creating the object, we can send information to the web server and get
the answer using this object’s functions:
• GET METHOD
• POST METHOD

Retrieving information
We get the returned value with the property:
“xmlHttp.responseText”.

Fast and Dynamic web pages

Perform behind the scenes to update portions of a webpage without having to reload the
whole page. Based on:

 XMLHttpRequest object - communicate with server


 JavaScript/DOM - display/manipulate information
 CSS - Style it to make it look nice
 XML - Format data for transfering
AJAX - readyState

• Holds the status of the XMLHttpRequest object


• Perform actions based on the readyState

readyState statuses:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

status:
200 = "OK"
404 = Page not found
Create a simple XMLHttpRequest, and retrieve data from a TXT file

<html> <body> <div id="demo">


<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change
Content</button>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
} };
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script> </body> </html>
Pros/Cons
• Advantages:
– Independent of server technology.
– Apart from obtaining the XMLHTTP object, all processing is
same for all browser types, because Javascript is used.
– Permits the development of faster and more interactive web
applications.

• Disadvantages:
– The back button problem. People think that when they press
back button, they will return to the last change they made, but
in AJAX this doesn not hold.
– Possible network latency problems. People should be given
feedback about the processing.
– Does not run on all browsers.

You might also like