Scribd
Upload
21 views15 pages

AJAX (Unit 3part 2)

Uploaded by

Rohan Rathi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views15 pages

AJAX (Unit 3part 2)

Uploaded by

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

WEB

TECHNOLOGY
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
Introduction to
AJAXstands for Asynchronous Javascript And
• Ajax
Xml.
• Ajax is just a means of loading data from the
server and selectively updating parts of a web
page without reloading the whole page.

• Ajax make use of the browser's built-in


XMLHttpRequest (XHR) object to send and
receive information to and from a web server
asynchronously, in the background, without
blocking the page or interfering with the
user's experience.
AJAX
• Ajax has become so popular that you
hardly find an application that doesn't use Ajax
to some extent.
• 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.
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
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
 XMLHttpRequest
whole page. Based on:object - communicate with server
 JavaScript/DOM - display/manipulate
 CSS - information Style it to make it
 XML - look nice 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
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.
Create a simple XMLHttpRequest, and retrieve data from a TXT file

<html> <body> <div


<h1>The
id="demo"> 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").innerHTM
L = this.responseText;
} };
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script> </body> </html>
Than
k
You

You might also like