AJAX

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new

technique for creating better, faster, and more interactive web
applications with the help of XML, HTML, CSS, and Java Script.

• Ajax uses XHTML for content, CSS for presentation, along with
Document Object Model and JavaScript for dynamic content display.
• Conventional web applications transmit information to and from the
sever using synchronous requests. It means you fill out a form, hit
submit, and get directed to a new page with new information from
the server.
• With AJAX, when you hit submit, JavaScript will make a request to
the server, interpret the results, and update the current screen. In
the purest sense, the user would never know that anything was
even transmitted to the server.
• XML is commonly used as the format for receiving server data,
although any format, including plain text, can be used.
• AJAX is a web browser technology independent of web server
software.
• A user can continue to use the application while the client program
requests information from the server in the background.
• Intuitive and natural user interaction. Clicking is not required,
mouse movement is a sufficient event trigger.
• Data-driven as opposed to page-driven.

Rich Internet Application Technology

AJAX is the most viable Rich Internet Application (RIA) technology so far.
It is getting tremendous industry momentum and several tool kit and
frameworks are emerging. But at the same time, AJAX has browser
incompatibility and it is supported by JavaScript, which is hard to
maintain and debug.

AJAX is Based on Open Standards

AJAX is based on the following open standards −

• Browser-based presentation using HTML and Cascading Style Sheets

(CSS).
• Data is stored in XML format and fetched from the server.
• Behind-the-scenes data fetches using XMLHttpRequest objects in the
browser.
• JavaScript to make everything happen.
History of AJAX

AJAX is client-sided web development technique it’s wont to produce

interactive Web applications; AJAX could be a application
program technology independent of web server software. As For content
in Ajax, XHTML is getting used and for staging CSS with document Object
model and JS for vibrant content display are getting used.

Prior to 2005, it absolutely was difficult to determine a connection

between the client and therefore the server. Developers use hidden
frames to fill server data to the client side.

But in 2005 James Garrett wrote an editorial named AJAX: a

replacement Approach to Web Applications. In the early-to-mid 1990s,
most web sites were supported complete HTML pages. Each user action
required that a whole new page be loaded from the server. This process
was inefficient, as reflected by the user experience: all page content
disappeared, and then the new page appeared. On every occasion the
browser reloaded a page due to a partial change, all of the content had to
be re-sent, although just some of the data had changed. This placed
additional load on the server and made bandwidth a limiting factor on
performance.
C la ss ic w eb a pp lica t io n m od e l:

The classic web application model works like this:Most user actions in the
interface trigger an HTTP request back to a web server. The server does
some processing — retrieving data, crunching numbers, talking to various
legacy systems — and then returns an HTML page to the client. It’s a
model adapted from the Web’s original use as a hypertext medium, but as
fans of The Elements of User Experience know, what makes the Web good
for hypertext doesn’t necessarily make it good for software applications.
Figure 1: The traditional model for web applications (left) compared to the
Ajax model (right).

This approach makes a lot of technical sense, but it doesn’t make

for a great user experience. While the server is doing its thing, what’s the
user doing? That’s right, waiting. And at every step in a task, the user
waits some more.

Obviously, if we were designing the Web from scratch for

applications, we wouldn’t make users wait around. Once an interface is
loaded, why should the user interaction come to a halt every time the
application needs something from the server? In fact, why should the
user see the application go to the server at all?

Ho w Aja x is D iffe r e nt

An Ajax application eliminates the start-stop-start-stop nature of

interaction on the Web by introducing an intermediary — an Ajax engine
— between the user and the server. It seems like adding a layer to the
application would make it less responsive, but the opposite is true.

Instead of loading a webpage, at the start of the session, the

browser loads an Ajax engine — written in JavaScript and usually tucked
away in a hidden frame. This engine is responsible for both rendering the
interface the user sees and communicating with the server on the user’s
behalf. The Ajax engine allows the user’s interaction with the application
to happen asynchronously — independent of communication with the
server. So the user is never staring at a blank browser window and an
hourglass icon, waiting around for the server to do something.
Figure 2: The synchronous interaction pattern of a traditional web
application (top) compared with the asynchronous pattern of an Ajax
application (bottom).

Every user action that normally would generate an HTTP request

takes the form of a JavaScript call to the Ajax engine instead. Any
response to a user action that doesn’t require a trip back to the server —
such as simple data validation, editing data in memory, and even some
navigation — the engine handles on its own. If the engine needs
something from the server in order to respond — if it’s submitting data
for processing, loading additional interface code, or retrieving new data —
the engine makes those requests asynchronously, usually using XML,
without stalling a user’s interaction with the application.

AJAX XMLHttpRequest Object

XMLHttpRequest is an object that is used to send a request to the
webserver for exchanging data or transferring and manipulating to it and
from the server behind the scenes. You can use the received data to
update the data present on the web page without even reloading the
page.
Below is the complete syntax to use XMLHttpRequest object.

Syntax:
At first, you have to invoke the XMLHttpRequest() method as shown
below.
var variable_name = new XMLHttpRequest();

After calling the XMLHttpRequest() method you have to define a

callback function that will trigger after getting the response.
variable_name.onload = function () {

// Content of callback function

// after getting the response

Sending a request using the open() and send() methods as shown

below.
variable_name.open("GET", "textFile.txt");

variable_name.send();

The XMLHttpRequest object has different functions and properties that are
listed below.

XMLHttpRequest object methods:

 • new XMLHttpRequest(): It creates a new XMLHttpRequest object.
• abort(): This method will cancel the current request to exchange data.
• getAllResponseHeaders(): It will return a set of HTTP headers in
form of a string.
• getResponseHeader(): It will return the specified HTTP header
information.
• open(method, URL, async, userName, password): This method
specifies the method, URL, and other parameters of a request. In this
function call, the method parameter defines the operation that has to
be performed on the data like GET, POST, HEAD, and some other
HTTP methods such as PUT, DELETE. The async parameter specifies
the asynchronous behavior of the request. It holds two
values true and false. If the value is true then the script processing will
continue after send() method without waiting for the response
while false value means that the script will wait for a response before
processing it.
• send(): It will send the request to the server for data exchange. To
GET the requests, send() is used.
• send(string): It also sends the request to the server for data
exchange, but It is used to POST the requests.
• setRequestHeader(): It will add the label and value pair to the
header that has to be sent.
Example: Below example illustrates the use
of XMLHttpRequest() object methods.

• HTML

<!DOCTYPE html>

<html>
<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content=

"width=device-width, initial-scale=1.0">

<title>Ready states of a request in ajax</title>

<style>

#container {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

</style>

</head>

<body>

<div id="container">

<h1>Hey hello,</h1>
 <h3>Welcome to web technology</h3>

<button type="button" onclick="stateChange()">

Update Text

</button>

</div>

<script>

function stateChange() {

var state = new XMLHttpRequest();

state.onload = function () {

document.getElementById("container")

.innerHTML = state.getAllResponseHeaders();

state.open("GET", "gfgInfo.txt", true);

state.send();

</script>

</body>

</html>