AJAX

In this AJAX tutorial we discuss about asynchronous call for servers. AJAX, short form of
Asynchronous JavaScript and XML, is a web development technique for creating interactive web
applications.

AJAX meant to increase the web page’s interactivity, speed, and usability. AJAX is not a new
programming language, but a new way to use existing standards. AJAX is the art of exchanging
data with a server, and updating parts of a web page – without reloading the whole page.

AJAX allows you to send only important information to the server not the entire page. So only
valuable data from the client side is routed to the server side. It makes your application
interactive and faster.

Ajax uses XHTML for content and CSS for presentation, as well as the Document Object Model
and JavaScript for dynamic content display.

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. No clicking required only Mouse movement is a sufficient
event trigger.

Data-driven as opposed to page-driven.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data
with the server behind the scenes. This means that it is possible to update parts of a web page,
without reloading the whole page.AJAX = Asynchronous JavaScript and XML.

JAX is a technique for creating fast and dynamic web pages.

How AJAX Works-

AJAX is Based on Internet Standards

AJAX is based on internet standards, and uses a combination of:

 XMLHttpRequest object (to exchange data asynchronously with a server)

 JavaScript/DOM (to display/interact with the information)
 CSS (to style the data)
 XML (often used as the format for transferring data)

Asynchronous vs Synchronous Ajax

Synchronous 
Script stops and waits for the server to send back a reply before continuing. There are
some situations where Synchronous Ajax is mandatory.

June 2, 2014

Asynchronous vs Synchronous Ajax

Synchronous 
Script stops and waits for the server to send back a reply before continuing. There are
some situations where Synchronous Ajax is mandatory.
In standard Web applications, the interaction between the customer and the server is
synchronous. This means that one has to happen after the other. If a customer clicks a
link, the request is sent to the server, which then sends the results back.

Because of the danger of a request getting lost and hanging the browser, synchronous
javascript isn’t recommended for anything outside of (onbefore)unload event handlers,
but if you need to hear back from the server before you can allow the user to navigate
away from the page, synchronous Javascript isn’t just your best option.

Asynchronous
Where the script allows the page to continue to be processed and will handle the reply if
and when it arrives. If anything goes wrong in the request and/or transfer of the file,
your program still has the ability to recognize the problem and recover from it.
Processing asynchronously avoids the delay while the retrieval from the server is taking
place because your visitor can continue to interact with the web page and the
requested information will be processed with the response updating the page as and
when it arrives.

XMLHttpRequest Object in Ajax

XMLHttpRequest (XHR) is an API available to web browser scripting languages such
as JavaScript. It is used to send HTTP or HTTPS requests to a web server and load the
server response data back into the script. Development versions of all major browsers
support URI schemes beyond http: and https:, in particular, blob: URLs are supported.An
object of XMLHttpRequest is used for asynchronous communication between client and
server.
It performs following operations:
 Sends data from the client in the background
 Receives the data from the server
 Updates the webpage without reloading it.

Properties of XMLHttpRequest object

The common properties of XMLHttpRequest object are as follows:
onReadyStateChange-
It is called whenever readystate attribute changes. It must not be used with synchronous
requests.

readyState-
represents the state of the request. It ranges from 0 to 4.
0 UNOPENED open() is not called.
1 OPENED open is called but send() is not called.
2 HEADERS_RECEIVED send() is called, and headers and status are available.
3 LOADING Downloading data; responseText holds the data.
4 DONE The operation is completed fully.
reponseText-
returns response as text.
responseXML-
returns response as XML
Methods of XMLHttpRequest object-
The important methods of XMLHttpRequest object are as follows:

void open(method, URL):

opens the request specifying get or post method and url.
void open(method, URL, async):
same as above but specifies asynchronous or not.
void open(method, URL, async, username, password):
same as above but specifies username and password.
void send():
sends get request.
void send(string):
send post request.
setRequestHeader(header,value):
it adds request headers.
Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML, and it
supports protocols other than HTTP (including file and ftp).

Create an XMLHttpRequest Object-

To create an instance of XMLHttpRequest, simply do this:

var myRequest = new XMLHttpRequest();

Old versions of Internet Explorer (IE5 and IE6) use an ActiveX Object:

var xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

XMLHttpRequest Object in Ajax

XMLHttpRequest (XHR) is an API available to web browser scripting languages such as
JavaScript. It is used to send HTTP or HTTPS requests to a web server and load the server
response data back into the script. Development versions of all major browsers support URI
schemes beyond http: and https:, in particular, blob: URLs are supported.An object of
XMLHttpRequest is used for asynchronous communication between client and server.

It performs following operations:

 Sends data from the client in the background
 Receives the data from the server
 Updates the webpage without reloading it.

Properties of XMLHttpRequest object

The common properties of XMLHttpRequest object are as follows:

onReadyStateChange-
It is called whenever readystate attribute changes. It must not be used with synchronous
requests.

readyState-
represents the state of the request. It ranges from 0 to 4.
0 UNOPENED open() is not called.
1 OPENED open is called but send() is not called.
2 HEADERS_RECEIVED send() is called, and headers and status are available.
3 LOADING Downloading data; responseText holds the data.
4 DONE The operation is completed fully.
reponseText-
returns response as text.
responseXML-
returns response as XML
Methods of XMLHttpRequest object-
The important methods of XMLHttpRequest object are as follows:

void open(method, URL):

opens the request specifying get or post method and url.
void open(method, URL, async):
same as above but specifies asynchronous or not.
void open(method, URL, async, username, password):
same as above but specifies username and password.
void send():
sends get request.
void send(string):
send post request.
setRequestHeader(header,value):
it adds request headers.
Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML, and it
supports protocols other than HTTP (including file and ftp).

Create an XMLHttpRequest Object-

To create an instance of XMLHttpRequest, simply do this:
var myRequest = new XMLHttpRequest();
Old versions of Internet Explorer (IE5 and IE6) use an ActiveX Object:

var xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);