Ajax Overview

Web technological terms

HTML
The World Wide Web is constructed from many millions of individual pages,
and those pages are written in a language called HTML. The purpose
of this language is to display the content in the browser.
Cascading Style Sheets
Normal files with HTML understandable style syntax that results colorful
display of the content in the browser.
JavaScript
Scripting code that is embedded in the HTML to make the normal HTML
pages more dynamic.
Server script
Script at the server side that provides results to the clients requests.
EX: PHP,ASP,JSP,ASP.NET

Framework
A Framework in software development is defined as the support structure in
which other projects can be developed and organized.
Library
A library is defined as a collection of related functions and subroutines used
to develop software. They are not independent programs.
Toolkits
A toolkit is generally used in reference to graphical user interface (GUI)
toolkits. Basically, a library that is mainly focused on creating a GUI..
Object




Ajax allows you to add to your web application interfaces some of this
functionality more commonly seen in desktop applications and often
referred to as a rich user experience.
To achieve this, Ajax builds an extra layer of processing between the
web page and the server. This layer is commonly referred as
AJAX Engine (or)
AJAX Framework
The updating of page elements to reflect the revised information received
from the server is also looked after by Ajax, happening dynamically
while the page continues to be used.

An object can be thought of a single package contains set of properties,which
contains and classify the data,set of methods with which objects can perform
actions on the data.







Constituent stages in AJAX

XMLHTTPRequest Object
Heart of the AJAX Engine and it is responsible to carry the HTTP request
to the server asynchronously.
Note The XMLHTTPRequest object can generally only make calls to URLs within the same domain as the
calling page and cannot directly call a remote server.
Talking with the Server
XMLHTTPRequest talks with the server with its appropriate methods and
properties asynchronously at the backside.
Server Response
As per the Server script is concerned the request from the
XMLHTTPRequest is just another HTTP request.
Dealing with the Server Response
Once after the AJAX Engine gets notified about the sucessful execution.
It modifies the data according to the functionality and keeps in place.




AJAX Engine setup

XMLHTTPRequest Object Properties and Methods
onreadystatechange Determines which event handler will be called when
the object's readyState property changes
readystate
Integer reporting the status of the request:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = completed
responseText Data returned by the server in text string form
responseXML Data returned by the server expressed as the document
object
status HTTP status code returned by server
statusText HTTP reason phrase returned by server

Methods Description


abort() : Stops the current request
GetAllResponseHeaders() : Returns all headers as a string
getresponseHeader(x) : Returns the value of header x as a string
open('method','URL','a') : specifies the HTTP method (for example, GET or POST),
the target URL, and whether the request should be
handled asynchronously (If yes, a='True'the default;
if no, a='false'.)
send(content) : HTTP status code returned by server
setRequestHeader('x','y') : HTTP reason phrase returned by server



send() Method
Once the XMLHTTPRequest object is prepared with the open() method, it is
possible to send the request with the send() method.
If the request uses GET method ,then we can use send with a single
argument null
objectInstance.send(null);
If the request uses POST method ,we must feed the content type and the
values.
objectInstance.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
objectInstance.send(var1=value1&var2=value2);

Creating the XMLHTTPRequest Object with Cross Browser solution

We can provide the solution for the Cross-Browsers using two ways

1. Using Object Detection

function getXMLHTTPRequest()
{
var request = false;
try
{
request = new XMLHttpRequest(); /* e.g. Firefox */
}
catch(err1)
{
try
{
vrequest = new ActiveXObject("Msxml2.XMLHTTP"); /* some versions IE */
}
catch(err2)
{
try
{
request = new ActiveXObject("Microsoft.XMLHTTP"); /* some versions IE */
}
catch(err3)
{
request = false;
}
}
}
return request;
}

2. Using Browser Detection

function getXMLHTTPRequest()
{
var request = false;
if(window.XMLHTTPRequest)
{
request = new XMLHTTPRequest();
} else {
if(window.ActiveXObject)
{
try
{
request = new ActiveXObject("Msml2.XMLHTTP");
}
catch(err1)
{
try
{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(err2)
{
request = false;
}
}
}
}
return request;
}