Unit-4 AJAX Web Designing-2
4.1 Fundamental of Ajax Technology
AJAX is an acronym for Asynchronous JavaScript and XML.
AJAX allows to send and receive data asynchronously without reloading the web page.
AJAX allows to send only important information to the server not the entire page, so onlyvaluable
data from the client side is routed to the server side.
It makes application interactive and faster.
AJAX is not a programming language.
AJAX allows web pages to be updated asynchronously by exchanging data with a webserver
behind the scenes. This means that it is possible to update parts of a web page, without
reloading the whole page.
There are too many web applications running on the web that are using ajax technologylike
Gmail, Facebook, twitter, google map, YouTube etc.
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)
How AJAX Works
Steps:
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
SHREE UTTAR GUJARAT BCA COLLEGE Page No. 1
Unit-4 AJAX Web Designing-2
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
4.1.1 Different between Synchronous & AsynchronousWeb Application
Synchronous (Classic Web-Application Model)
A synchronous request blocks the client until operation completes i.e. browser is
unresponsive. In such case, JavaScript engine of the browser is blocked.
As you can see in
the above image,
full page is
refreshed at
request time and
user is blocked
until request
completes.
SHREE UTTAR GUJARAT BCA COLLEGE Page No. 2
Unit-4 AJAX Web Designing-2
Asynchronous (AJAX Web-Application Model)
An asynchronous request doesn’t block the client i.e. browser is responsive. At that time,user can
perform another operation also.
As you can see in the above image, full page is not refreshed at request time and usergets
response from the ajax engine.
Let's try to understand asynchronous communication by the image given below.
SHREE UTTAR GUJARAT BCA COLLEGE Page No. 3
Unit-4 AJAX Web Designing-2
XMLHttpRequest Technology
An object of XMLHttpRequest is used for asynchronous communication betweenclient
and server.
It performs following operations:
1. Sends data from the client in the background
2. Receives the data from the server
3. Updates the webpage without reloading it.
The keystone of AJAX is the XMLHttpRequest object.
1. Create an XMLHttpRequest object
2. Define a callback function
3. Open & Send a Request to a server
1. Create an XMLHttpRequest object
All modern browsers support the XMLHttpRequest object.
XMLHttpRequest is basically used in Ajax programming. It retrieves any type ofdata such
as json, xml, text etc.
It requests for data in background and update the page without reloading page onclient
side.
An object of XMLHTTPRequest is used for asynchronous communication betweenclient and
server.
The XMLHttpRequest object can be used to exchange data with a web server behind
the scenes. This means that it is possible to update parts of a web page,without
reloading the whole page.
All modern browsers (Chrome, Firefox, IE, Edge, Safari, Opera) have a built-in
XMLHttpRequest object.
Syntax for creating an XMLHttpRequest object:
variable = new XMLHttpRequest();
Example: var xhttp = new XMLHttpRequest();
2. Define a callback function
A callback function is a function passed as a parameter to another function.
In this case, the callback function should contain the code to execute when the
response is ready.
SHREE UTTAR GUJARAT BCA COLLEGE Page No. 4
Unit-4 AJAX Web Designing-2
xhttp.onload = function() {
// What do when the response is ready
}
3. Send a Request to a Server
To send a request to a server, you can use the open() and send() methods ofthe
XMLHttpRequest object.
Example :
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
The file can be any kind of file, like .txt and .xml, or server scripting files like .aspand. php
(which can perform actions on the server before sending the response back).
XMLHttpRequest Properties:
Property Description
onReadyStateChange It is called whenever readystate attribute changes. It must notbe
used with synchronous requests.
readyState represents the state of the request. It ranges from 0 to 4.0:
request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
reponseText returns response as text.
responseXML returns response as XML data.
status Returns the status-number of a request
200: "OK"
403: "Forbidden"
404: "Not Found"
statusText Returns the status-text (e.g. "OK" or "Not Found")
The onreadystatechange Property
The readyState property holds the status of the XMLHttpRequest.
SHREE UTTAR GUJARAT BCA COLLEGE Page No. 5
Unit-4 AJAX Web Designing-2
The onreadystatechange property defines a function to be executed when the
readyState changes.
The status property and the statusText property holds the status of the
XMLHttpRequest object.
XMLHttpRequest Methods
Method Description
void open(method, URL) opens the request specifying get or post method and url.
void open(method, URL, same as above but specifies asynchronous or not.
async)
open(method, url, async, Specifies the request
user, psw) method: the request type GET or POSTurl:
the file location
async: true (asynchronous) or false (synchronous)user:
optional user name
psw: optional password
new XMLHttpRequest() Creates a new XMLHttpRequest object
getAllResponseHeaders() Returns header information
getResponseHeader() Returns specific header information
send() Sends the request to the server
Used for GET requests
send(string) Sends the request to the server.
Used for POST requests
setRequestHeader() Adds a label/value pair to the header to be sent
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 belocated
on the same server.
The examples on W3Schools all open XML files located on the W3Schoolsdomain.
If you want to use the example above on one of your own web pages, the XMLfiles you
load must be located on your own server.
SHREE UTTAR GUJARAT BCA COLLEGE Page No. 6
Unit-4 AJAX Web Designing-2
Example: demo.php
<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>
Ajax_info.txt
<div>
<h3>AJAX</h3>
<ul type="square">
SHREE UTTAR GUJARAT BCA COLLEGE Page No. 7
Unit-4 AJAX Web Designing-2
<li>AJAX is not a programming language.</li>
<li>AJAX is a technique for accessing web servers from aweb
page.</li>
<li>AJAX stands for Asynchronous JavaScript And XML.</li>
</ul>
</div>
Working of AJAX and its architecture
AJAX communicates with the server using XMLHttpRequest object. Let's try to
understand the flow of ajax or how ajax works by the image displayed below.
As you can see in the above example, XMLHttpRequest object plays an important role.
1. User sends a request from the UI and a JavaScript call goes to XMLHttpRequestobject.
2. HTTP Request is sent to the server by XMLHttpRequest object.
3. Server interacts with the database using JSP, PHP, Servlet, ASP.net etc.
4. Data is retrieved.
5. Server sends XML data or JSON data to the XMLHttpRequest callbackfunction.
6. HTML and CSS data is displayed on the browser.
SHREE UTTAR GUJARAT BCA COLLEGE Page No. 8
