What is 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.

How AJAX Works

 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

The XMLHttpRequest Object

All modern browsers support the XMLHttpRequest object.

The XMLHttpRequest object can be used to exchange data with a server

behind the scenes. This means that it is possible to update parts of a web
page, without reloading the whole page.

Create an XMLHttpRequest Object

All modern browsers (Chrome, Firefox, IE7+, Edge, Safari Opera) have a
built-in XMLHttpRequest object.

Syntax for creating an XMLHttpRequest object:

variable = new XMLHttpRequest();

Example
var xhttp = new XMLHttpRequest();

XMLHttpRequest Object Methods

Method Description

new XMLHttpRequest() Creates a new XMLHttpRequest object

abort() Cancels the current request

getAllResponseHeaders() Returns header information

getResponseHeader() Returns specific header information

open(method,url,async,user,psw) Specifies the request

method: the request type GET or POST

url: the file location
async: true (asynchronous) or false (synchronous)
user: optional user name
psw: optional password

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

XMLHttpRequest Object Properties

Property Description

onreadystatechange Defines a function to be called when the readySt

readyState Holds the status of the XMLHttpRequest.

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

responseText Returns the response data as a string

responseXML Returns the response data as XML data

status Returns the status-number of a request

200: "OK"
403: "Forbidden"
404: "Not Found"
For a complete list go to the Http Messages Refe
 statusText Returns the status-text (e.g. "OK" or "Not Found

AJAX - Send a Request To a Server

The XMLHttpRequest object is used to exchange data with a server.

Send a Request To a Server

To send a request to a server, we use the open() and send() methods of the
XMLHttpRequest object:

xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();

Method Description

open(method, url, async) Specifies the type of request

method: the type of request: GET or POST

url: the server (file) location
async: true (asynchronous) or false (synchronous)

send() Sends the request to the server (used for GET)

send(string) Sends the request to the server (used for POST)

GET or POST?
GET is simpler and faster than POST, and can be used in most cases.

However, always use POST requests when:

 A cached file is not an option (update a file or database on the server).

 Sending a large amount of data to the server (POST has no size
limitations).
 Sending user input (which can contain unknown characters), POST is
more robust and secure than GET.

GET Requests
A simple GET request:

Example
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

In the example above, you may get a cached result. To avoid this, add a
unique ID to the URL:

Example
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

If you want to send information with the GET method, add the information to
the URL:

Example
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
POST Requests
A simple POST request:

Example
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

To POST data like an HTML form, add an HTTP header with

setRequestHeader(). Specify the data you want to send in the send()
method:

Example
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
xhttp.send("fname=Henry&lname=Ford");

Method Description

setRequestHeader(header, value) Adds HTTP headers to the request

header: specifies the header name

value: specifies the header value

The url - A File On a Server

The url parameter of the open() method, is an address to a file on a server:

xhttp.open("GET", "ajax_test.asp", true);

The file can be any kind of file, like .txt and .xml, or server scripting files like
.asp and .php (which can perform actions on the server before sending the
response back).
Asynchronous - True or False?
Server requests should be sent asynchronously.

The async parameter of the open() method should be set to true:

xhttp.open("GET", "ajax_test.asp", true);

By sending asynchronously, the JavaScript does not have to wait for the
server response, but can instead:

 execute other scripts while waiting for server response

 deal with the response after the response is ready

The onreadystatechange Property

With the XMLHttpRequest object you can define a function to be executed
when the request receives an answer.

The function is defined in the onreadystatechange property of the

XMLHttpResponse object:

Example
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();

You will learn more about onreadystatechange in a later chapter.

Synchronous Request
To execute a synchronous request, change the third parameter in the open()
method to false:
xhttp.open("GET", "ajax_info.txt", false);

Sometimes async = false are used for quick testing. You will also find
synchronous requests in older JavaScript code.

Since the code will wait for server completion, there is no need for an
onreadystatechange function:

Example
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

AJAX - Server Response

The onreadystatechange Property

The readyState property holds the status of the XMLHttpRequest.

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.

Property Description
 onreadystatechange Defines a function to be called when the readyState
property changes

readyState Holds the status of the XMLHttpRequest.

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

status 200: "OK"

403: "Forbidden"
404: "Page not found"
For a complete list go to the Http Messages Reference

statusText Returns the status-text (e.g. "OK" or "Not Found")

The onreadystatechange function is called every time the readyState

changes.

When readyState is 4 and status is 200, the response is ready:

Example
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();
}

Server Response Properties

 Property Description

responseText get the response data as a string

responseXML get the response data as XML data

Server Response Methods

Method Description

getResponseHeader() Returns specific header information from the server

resource

getAllResponseHeaders() Returns all the header information from the server

resource

The responseText Property

The responseText property returns the server response as a JavaScript
string, and you can use it accordingly:

Example
document.getElementById("demo").innerHTML = xhttp.responseText;
The responseXML Property
The XML HttpRequest object has an in-built XML parser.

The responseXML property returns the server response as an XML DOM

object.

Using this property you can parse the response as an XML DOM object:

Example
Request the file cd_catalog.xml and parse the response:

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();

The getAllResponseHeaders() Method

The getAllResponseHeaders() method returns all header information from
the server response.

Example
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};

The getResponseHeader() Method

The getResponseHeader() method returns specific header information
from the server response.

Example
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();