AJAX is simply a callback to the web server that doesn't refresh the current web page. Most AJAX application then use that information to dynamically modify the web page. We can quickly setup an AJAX call in ASP.NET. To start we need to have a web form. For this example we'll add a input text box, a button(not a submit button), and a textarea. You will input a customer's name in the input box and click on the button to get the customer's address in the textarea.
<body>
</body>
On the button's onclick event the javascript method GetCustomer is called. GetCustomer is where we will make our AJAX call. Most of the AJAX magic is done with the XMLHttpRequest object. The XMLHttpRequest object sends a request back to the web server without refreshing the page. To make a request you need three things: a function to handle the response, a handler on the web server and the content to be sent. Since we are sending a request that is asynchronous we need to have a function to handle the response. A handle is a simple web page that will handle our request and send back a response. The content can be null so technically content is optional. The callback function that will handle the request will set the textarea to the response text we will get from the handler. We will set the location of the request to handler that will create in a second. We will also send the customer so the handler will know what customer to lookup. Here is the code we will use to send our request:
function GetCustomer() {
var ajaxRequest=new XMLHttpRequest();
ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readyState==4)
document.getElementById("TextArea1").value=ajaxRequest.responseText;
}
ajaxRequest.open("POST", "Handler1.ashx", true);
var customer=document.getElementById("Text1").value;
ajaxRequest.send(customer);
}
Next we need to create the Generic Handler, Handler1.ashx. In the Handler1.ashx.cs file you need to handle our AJAX request. The ProcessRequest method will be called when a request is sent so we will place our customer lookup code there. We will first pull out the customer from the request, look it up and then return the address in the response.
public void ProcessRequest(HttpContext context)
{
string customer = new StreamReader(context.Request.InputStream).ReadToEnd();
context.Response.ContentType = "text/plain";
if (String.Compare(customer, "Bob") == 0)
context.Response.Write("123 Bob Ave.\nBobville, BO 12345");
else if (String.Compare(customer, "Foo") == 0)
context.Response.Write("789 Bar St.\nFooville, FB, 01111");
else
context.Response.Write("Unknown customer!");
context.Response.Flush();
context.Response.Close();
}
Be sure to include the Flush method otherwise the response will not be sent. Here we only have two customers: Bob and Foo. Any other values will return "Unknown customer!"
Gotchas
The XMLHttpRequest object is only compatible in Opera 8.0+, Firefox, Safari, IE 7.0+. If we want to have support for other browsers we need to make a small modification. We will create a new factory function to return a AJAX request object.
function getAjaxRequest() {
// Opera 8.0+, Firefox, Safari, IE 7.0+
if (window.XMLHttpRequest) return new XMLHttpRequest();
// IE 5-6
else if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
return false;
}
We need to make a small change to the GetCustomer class to implement this change.
function GetCustomer() {
var ajaxRequest=getAjaxRequest();
if (ajaxRequest!=false) {
ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readyState==4)
document.getElementById("TextArea1").value=ajaxRequest.responseText;
}
ajaxRequest.open("POST", "Handler1.ashx", true);
var customer=document.getElementById("Text1").value;
ajaxRequest.send(customer);
}
}
From this example you can see that it is very easy to setup an AJAX call within ASP.NET. The possibles for AJAX are endless. Hope you find it as innovative as I have.
If you are having trouble with any of the code try downloading the full source code for the above example.
