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 Interface
Ajax 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 Performance
Another 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.
Google: The early adopter of Ajax
Ajax 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 XMLHttpRequest
abort()
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
Onreadystatechange
The event handler that fires at every state change, typically a call to a
JavaScript function.
readyState
The state of the request. The five possible values are 0 = uninitialized,
1 = loading, 2 = loaded, 3 = interactive, and 4 = complete.
responseText
The response from the server as a string.
responseXML
The response from the server as XML. This object can be parsed and
examined as a DOM object.
status
The HTTP status code from the server (that is, 200 for OK, 404 for Not
Found, and so on).
statusText
The 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()
{
}
</script>JSON : An Emerging standard for Ajax Communication
An alternative to XML is JSON, which you can find at http://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 ASP.NET Ajax : The next evolution of Ajax
Microsoft ASP.net Ajax 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. ASP.net Ajax 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. ASP.net Ajax is reducing this complexity for implementing Ajax. ASP.net Ajax extends the Ajax concept by providing a rich, integrated server development platform in ASP.NET 2.0. The ASP.NET 2.0 Ajax 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
<b>Search For Books</b>
<span id=\"header\"></span>
<table width=\"500\" border=\"0\">
<tbody>
<tr>
<td>Search</td>
<td><input onkeyup=\"doSearch(this.value);\" size=\"40\">
</td>
</tr>
<tr>
<td colspan=\"2\">
<table id=\"tblSearchResults\" width=\"100%\" border=\"0\">
<tbody id=\"tbSearchResults\"></tbody>
</td>
</tr>
</tbody>
</table>
td></tr></tbody></table>
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; i =" 0;" book =" books[i];" title =" book.getElementsByTagName(" author =" book.getElementsByTagName(" publisher =" book.getElementsByTagName(" row =" document.createElement(" cell =" createCellWithText(title);" cell =" createCellWithText(author);" cell =" createCellWithText(publisher);" cell =" document.createElement(" textnode =" document.createTextNode(text);" row =" document.createElement(" cell =" createCellWithText(" cell =" createCellWithText(" cell =" createCellWithText(" search =" Request["> 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();
}
}
Welcome to the Ajaxian community.If you want any help to implement Ajax enabled applications feel free to contact me via shiju.varghese@gmail.com
No comments:
Post a Comment