Ajax

What is Ajax Today Ajax is the hottest buzzword of the web. Thanks to web developers of google, they are making Ajax more popular. Ajax is not a new technology; it combines a lot of existing technologies. Ajax stands for Asynchronous JavaScript and XML. It is a combination of existing technologies such as DHTML, CSS, JavaScript, DOM, XML, XSLT and XMLHttpRequest. The core component of Ajax is XMLHttpRequest that enables us to execute server side code without any page refresh. Ajax can create an asynchronous request to the web server using JavaScript and XMLHttpRequest object, and map a function (a Callback method) to be executed when the response is received. You can execute the asynchronous request without any page refresh or page post back. The beauty of Ajax is that, you can execute server side code with out any page refresh. Ajax is a world of “No Page Refresh” and rich user interface like windows applications. In traditional web applications, the user actions in the user interface invoke an HTTP request to the web server. Then the server will do lot of process on the server and then returns an HTML page to the client. In Ajax applications, the request is not for GUI or HTML, It is only for data. After fetching the data, you can create the user interface from the client using JavaScript and DOM. Ajax is a client-side technology and can interact any server side technologies such as ASP.net, JSP, PHP, ColdFusion, and others.Advantages of Ajax

1.Rich User InterfaceAjax allows us to create highly interactive user interface. A user don’t like page refresh continuously. In Ajax, we can do lot of things without any page refresh. Ajax is crossing the barriers between windows applications and web applications. Ajax communities are fans of rich user interface.

2. High PerformanceAnother advantage of Ajax is better performance than traditional web applications. In the Ajax applications there will be no post back to the server that will render entire GUI as HTML. Ajax request is only for page data. So it enable us better performance.

Limitation of AjaxThe main limitation of Ajax is it’s complexity for implementation.Developers have to write complex JavaScript code for implementing Ajax. If your company has good expertise in writing JavaScript code, you can start Ajax enabled applications.

Google: The early adopter of AjaxAjax is not a new technology, it is old thing. But google is leveraging very highly in Ajax and they are making interactive Ajax web applications such as gmail, Google Groups, Google Suggest and Maps. The popularity behind the Ajax is the success of google applications. Methods of XMLHttpRequestabort()Abort the current request.

getAllResponseHeaders()Returns all the response headers for the HTTP request as key/value pairs.

getResponseHeader(“header”)Returns the string value of the specified header.

open(“method”, “url”)Sets the stage for a call to the server. The method argument

can be either GET, POST, or PUT. The url argument

can be relative or absolute. This method includes three

optional arguments.

send(content)Sends the request to the server.

setRequestHeader(“header”, “value”)

Sets the specified header to the supplied value.

Properties of XMLHttpRequest OnreadystatechangeThe event handler that fires at every state change, typically a call to a

JavaScript function.

readyStateThe state of the request. The five possible values are 0 = uninitialized,

1 = loading, 2 = loaded, 3 = interactive, and 4 = complete.

responseTextThe response from the server as a string.

responseXMLThe response from the server as XML. This object can be parsed and

examined as a DOM object.

statusThe HTTP status code from the server (that is, 200 for OK, 404 for Not

Found, and so on).

statusTextThe text version of the HTTP status code (that is, OK or Not Found, and

so on).

Instantiate an XMLHttpRequest object and send request to server<script type=”text/JavaScript”>

var xmlHttp;

//function creating new instance of XMLHttpRequest object

function createXMLHttpRequest() {

//In IE XMLHttpRequest is a ActiveX object

if (window.ActiveXObject) {

xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

}

//non IE browsers

else if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

}

//function call asynchronous request to server

function startRequest() {

createXMLHttpRequest();

//set callback method

xmlHttp.onreadystatechange = callBackMethod;

var url=”MyAjaxServer.aspx”;

//instantiate request

xmlHttp.open(“GET”,url, true);

//send request to server

xmlHttp.send(null);

}

//callback method

function callBackMethod()

{

}

JSON : An Emerging standard for Ajax CommunicationAn alternative to XML is JSON, which you can find at www.json.org. JSON stands for JavaScript Object Notation and is a lightweight data-interchange format. It is a standard for communication between the client and server. JSON is a text format that is language independent but that uses conventions similar to the C family of languages such as C, C#, JavaScript, and others. Today JSON is a growing data-interchange standard for Ajax communication. Most of the Google’s Ajax applications are using JSON for communication between the client and server. JSON is faster than XML. Microsoft Atlas.NET : The next evolution of AjaxMicrosoft Atlas is the first scalable and reliable platform for building Ajax applications. Today ASP.net is the undisputed leader in the server-side programming and faster than JSP and PHP. Atlas is the next level of growing ASP.net technology. Today the problem of Ajax is high complexity for implementing it. A developer should be highly expert in JavaScript for implementing Ajax. Atlas is reducing this complexity for implementing Ajax. Atlas extends the Ajax concept by providing a rich, integrated server development platform in ASP.NET 2.0. The ASP.NET 2.0 Atlas package of client and server-side development tools and components is a significant evolution and enhancement of the Ajax concept.

A search example application that implementing Ajax

In this sample below, I have written a sample code in order to demonstrate a search functionality. There is an input textbox where user can input a seacrhtext.On each keypress of textbox, an asynchronous search is performed without any page refresh and the results in dynamically generated as a table. HTML Code<HTML><HEAD><title>Search Books</title>

</HEAD>

<body>

<b>Search For Books</b>

<TBODY>

<TR>

<TD>Search</TD>

</TD>

</TR>

<TR>

</TD>

</TR>

</TBODY>

</TABLE>

</form>

</body>

</HTML>

JavaScript Code(search.js)//global variable for hold XMLHttpRequest Object

var xmlHttp;

//Creating and setting the instance of appropriate XMLHTTP Request object to a “xmlHttp” variable

function CreateXmlHttp()

{

//Creating object of XMLHTTP in IE

try

{

//it will work if IE have JavaScript version 5.0

xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);

}

catch(e)

{

try

{

xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

}

catch(oc)

{

xmlHttp = null;

}

//Creating object of XMLHTTP for non-IE browsers

if(!xmlHttp && typeof XMLHttpRequest != “undefined”)

{

xmlHttp = new XMLHttpRequest();

}

//function to search

function doSearch(searchText)

{

//create XMLHttpRequest Object

CreateXmlHttp();

//Requested url

var ajaxRequest=”ProcessSearch.aspx?search=”+searchText;

//set callback function

xmlHttp.onreadystatechange = callBackMethod;

//Initializes request

xmlHttp.open(“GET”,ajaxRequest, true);

//send request

xmlHttp.send(null);

}

function callBackMethod()

{

//if request completed sucessfully clear the previous result and show the new search results

if(xmlHttp.readyState == 4)

{

if(xmlHttp.status == 200)

{

clearResults();

showResults();

}

//function clear previous results

function clearResults()

{

var tableBody = document.getElementById(“tbSearchResults”);

while(tableBody.childNodes.length > 0) {

tableBody.removeChild(tableBody.childNodes[0]);

}

//function show search results in a table

//dynamically creating table rows for show the results

function showResults() {

var results = xmlHttp.responseXML;

var book = null;

var title = “”;

var author= “”;

var publisher = “”;

var books = results.getElementsByTagName(“book”);

if(books.length<1)return;

//add header of the search table

addHeader();

//dynamically add search results in a table

for(var i = 0; i < books.length; i++) {

book = books[i];

title = book.getElementsByTagName(“title”)[0].firstChild.nodeValue;

author = book.getElementsByTagName(“author”)[0].firstChild.nodeValue;

publisher = book.getElementsByTagName(“publisher”)[0].firstChild.nodeValue;

//creating new table row

addTableRow(title, author, publisher);

}

document.getElementById(“tblSearchResults”).setAttribute(“border”, “1”);

document.getElementById(“tblSearchResults”).setAttribute(“class”, “searchtable”);

}

//function for creating new table row

function addTableRow(title, author, publisher) {

var row = document.createElement(“tr”);

var cell = createCellWithText(title);

row.appendChild(cell);

cell = createCellWithText(author);

row.appendChild(cell);

cell = createCellWithText(publisher);

row.appendChild(cell);

document.getElementById(“tbSearchResults”).appendChild(row);

}

//function for create a cell with text

function createCellWithText(text) {

var cell = document.createElement(“td”);

var textNode = document.createTextNode(text);

cell.appendChild(textNode);

return cell;

}

//add headers of the search result table

function addHeader() {

var row = document.createElement(“tr”);

var cell = createCellWithText(“Title”);

row.appendChild(cell);

cell = createCellWithText(“Author”);

row.appendChild(cell);

cell = createCellWithText(“publisher”);

row.appendChild(cell);

document.getElementById(“tbSearchResults”).appendChild(row);

}

ProcessSearch.aspx.csprivate void Page_Load(object sender, System.EventArgs e)

{

if(!IsPostBack )

{

string search = Request[“search”];

if(search.Length > 0)

{

Response.Clear();

DataSet dsResults=new DataSet();

//call business layer method for search results

dsResults =Books.GetBookList(dsResults);

string resultsString= dsResults.GetXml();

Response.Clear();

Response.ContentType =”text/xml”;

Response.Write(resultsString);

//end the response

Response.End();

}

else

{

//clears the response written into the buffer and end the response.

Response.Clear();

Response.End();

}

else

{

//clears the response written into the buffer and end the response.

Response.Clear();

Response.End();

}

Ajax

Ajax Debugging tools for asp.net Developers

Ajax: The next evolution of web applications