Ajax Workflow

With traditional HTML and JavaScript, to get some data from the server side, it was necessary to make a form submission. With each submission the entire form was being reloaded. So it was loading an entirely new page and that was making performance slow.

By 2003, all the major browsers adopted the XMLHttpRequest (XHR) object, that allowed browsers to communicate with the server directly without a page reload.

The JavaScript object “XMLHttpRequest” is actually part of AJAX technology. Using the XMLHttpRequest API, JavaScript can directly interact with the server. The user can make a request to the server with a HTTP Get Response from the server and modify the required portion only (without a form submission/reload). But, various browsers implement it differently. For example Internet Explorer uses an ActiveXObject whereas other modern browsers use the built-in “XMLHttpRequest” JavaScript object.

So it's an overhead for developers to make implementation of XMLHttpRequest universal. To create an object that can call Server-side functionality directly we need to consider other browsers like:

function CreateAsyncObject()
{
var ObjXmlHttp;
try
{
ObjXmlHttp = new XMLHttpRequest();
}
catch(Exception OuterEx)
{
try
{
ObjXmlHttp = ActiveXObject(“Msxml2.XMLHTTP”);
}
catch(Exception Ex)
{
try
{
ObjXmlHttp = ActiveXObject(“Microsoft.XMLHTTP”);
}
catch(Exception ExInner)
{
alert(“Your browser doesn't support XMLHttpRequest.”);
}
}
}
}

Then we need to open this object with the required parameters and send it to the server like:

ObjXmlHttp.open(“<GET/POST>”, “<Server side url>”, <true/false>);

The last parameter indicates whether the request is to be handled asynchronously.

ObjXmlHttp.send(null);

Properties of XMLHttpRequest

ReadyState: It has a value from 0 to 4.
1. The XMLHttpRequest object is created, but open() has not been called.
2. open () is called, but not send().
3. send() has been called
4. The browser has established a connection with the server but the server hasn't processed the response.
5. The response data has been completely received from the server.
Onreadystatechange: This is an event handler for the change in readyState
responseText: Server response as a string
responseXML: Response as XML.
status: status of the HTTP request(200, 404 and so on)
statusText: status as a message (“OK”, “Not found” and so on)

A complete request using XMLHttpRequest will be as follows:

<input type= “text” onkeyup = “GetName()”>
<div id= “divResult”></div>
function GetName()
{
var ObjXmlHttp;
try
{
ObjXmlHttp = new XMLHttpRequest();
}
catch(Exception OuterEx)
{
try
{
ObjXmlHttp = ActiveXObject(“Msxml2.XMLHTTP”);
}
catch(Exception Ex)
{
try
{
ObjXmlHttp = ActiveXObject(“Microsoft.XMLHTTP”);
}
catch(Exception ExInner)
{
alert(“Your browser doesn't support XMLHttpRequest.”);
}
}
}
ObjXmlHttp.open(“GET”, “GetName.aspx”, true);
ObjXmlHttp.onreadystatechange(function(){
if(readyState == 4)
{
divResult.innerHTML = ObjXmlHttp.responseText;
}
});
}

jQuery-Ajax

jQuery provides Ajax support that removes all the overhead of creating objects (considering various browsers), handling a “readystatechange” event, checking readyState and so on. By some full-featured method like $.ajax() and some convenience methods like $.get(), $.post() and so on.

$.get()

It makes a get request to the provided URL.
$.post()

It makes a post request to the provided URL.
$.ajax()
This jQuery method takes a configuration object having all instructions, that jQuery requires to complete the request.

There are many $.ajax() Options available. Some of the most common properties are:

Option	Description	Default value
async	If the request should be served asynchronously	(true)
url	URL to request. This is the only required value to make an Ajax call
contentType	Type of content query is ed to the server	application/x-www-form-urlencoded;charset=UTF-8
data	Data query is ed to the server
dataType	Type of data jQuery is expecting from server	MIME type of response
success	Success callback
error	Error callback
complete	Code to execute irrespective of success/failure
crossDomain	It indicates if request is to/from cross-domain	(false)

NOTE: If you are not sure about ContentType and dataType, just don't mention them in the configuration of a jQuery Ajax call, It'll take default values that will satisfy most of the types.

$.ajax({
type: "POST",
url:"http://localhost/WebServiceForBlog/MyService.asmx/SumOfNums",
data: "First=" + FirstNum + "&Second=" + SecondNum,
contentType: "application/x-www-form-urlencoded;charset=UTF-8"
dataType: "text",
crossDomain: true,
success: function (data) {
$('#divSum1').html(data);
}
error: function(data)
{alert("Error");}
});

Let's discuss one of the most commonly used callback functions.

error

function(jqXHR, textStatus, errorThrown).
jqXHR: A string describing the type of error that has occurred and an exception object (if occurred).
TextStatus: request status like null, "timeout", "error", "abort", and "parsererror".
ErrorThrown: Textual portion of the HTTP status, such as "Not Found".

Success

function(data, textStatus, jqXHR).
data: data returned from server.
textStatus: string decribing the status.
JqXHR: success setting.

These jQuery methods use the XMLHttpRequest API internally for calling server-side functionalities directly.

By default, Ajax doesn't support cross-domain calls since it violates “Same origin policy”. JSONP (JSON with padding) that uses Cross-Origin Resource Sharing can be used for cross-domain calls.

8 Comments

Join the conversation! Your thoughts help the community grow.

Gowtham Rajamanickam11y ago
good one..
Ravi Patel11y ago
Nice article
Gaurav Kumar Arora12y ago
Nice explanation I would like to see explanation how request interprets in different browsers
Venkat Mungari12y ago
Nice article Thanks for sharing..........
Sam Hobbs12y ago
The XMLHttpRequest object originated as the IXMLHTTPRequest ActiveX interface in the Microsoft MSXML library in about 1999. The World Wide Web Consortium published a Working Draft specification of the XMLHttpRequest object in 2006. The XMLHttpRequest object exists in JavaScript as well as other languages such as Java.
Sam Hobbs12y ago
I see people saying that IE is not a modern browser but I do not understand why. I know that ActiveX is old technology but the internet uses even older technology. For example HTTP uses TCP/IP and it is about 20 years older than ActiveX (ActiveX is built on OLE; TCP/IP is about 10 years older than OLE). If the age of something determines how modern it is then Windows (especially the Windows API) is archaic.
Shehzad12y ago
Thanks for sharing
Manish Kumar Choudhary12y ago
Nice one..