Page 1 of 1 AJAX, it's the hottest thing since sliced bread right now. It stands for Asynchronous Javascript using XMLHttpRequest. The basic premise of it is that you can call server-side code from client side JavaScript without reloading the page. In essence, this gives almost limitless powers (as far as programming languages go) to the "little script that could". The canonical example that started the whole craze was Google Suggest, where search results show up as you type.
In this article, I'm going to discuss a novel product, which is thankfully free, that takes all the guesswork out of creating AJAX applications. The code is presented in C# and you will not need a compiler to run it.
The product I'm referring to is called the AJAX Wrapper for .NET, and the latest version can be found at Schwarz Interactive. The version I downloaded at the time of this writing is included in the article download found at the bottom of this page so you don't have to worry about any incompatibilities. The latest version can be downloaded at the Schwarz Interactive site.
The download contains three files:
Honestly, the QuickGuide.txt file found in the download explains it rather thoroughly (and even more thorough is the AjaxGuide.doc), My goal here is to spread the word and show you just how easy it is to use this invaluable tool. I will basically paraphrase the instructions found in the QuickGuide.txt and extend the concept just a tad.
<configuration>
<system.web>
<httpHandlers>
<add verb="POST,GET" path="ajaxwrapper/*.ashx"
type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>
...
<system.web>
</configuration>If you do not copy the dll into your /bin folder, you will get the following error message:
File or assembly name Ajax, or one of its dependencies, was not found.
<script language="javascript" src="ajaxwrapper/common.ashx"></script> <script language="javascript" src="ajaxwrapper/<%= this.GetType() %>,This references the specially customized script that the AJAX.NET wrapper generates and makes it available for your local scripts to call. The great thing about this technique (as opposed to the way it's explained in the QuickGuide.txt is that this doesn't require you to know the name of the page class you're in and the assembly. This makes it usable by inline script which is common amongst Dreamweaver users.
private void Page_Load(object sender, EventArgs e){
Ajax.Utility.RegisterTypeForAjax(this.GetType());
}[Ajax.JavascriptMethod()]
public int ServerSideAdd(int firstNumber, int secondNumber)
{
return firstNumber + secondNumber;
}
I love how simple this is to implement as the AJAX.NET wrapper is generating
all sorts of code behind the scenes that facilitates the communication from
the client code to the server. And the best part about it is that you, as the
user of this API, don't have to know all the gritty details.<body onload="alert(ServerSideAdd(30,7))">
Here you see an example page that takes this technique and applies some extremely simple DHTML to provide instant feedback to the user.
<%@ Page language="C#" %>
<script language="CS" runat="server">
private void Page_Load(object sender, EventArgs e){
Ajax.Utility.RegisterTypeForAjax(this.GetType());
}
[Ajax.JavascriptMethod()]
public int ServerSideAdd(int firstNumber, int secondNumber)
{
return firstNumber + secondNumber;
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX.NET Test</title>
<script language="javascript" src="ajaxwrapper/common.ashx"></script>
<script language="javascript" src="ajaxwrapper/<%= this.GetType() %>,
<%= System.IO.Path.GetFileNameWithoutExtension(this.GetType().
Assembly.Location) %>.ashx"></script>
</head>
<body>
<form>
<input type="text" id="txtNum1"
onkeyup="document.getElementById('lblResult').innerHTML =
(ServerSideAdd( document.getElementById('txtNum1').value,
document.getElementById('txtNum2').value))" />
+
<input type="text" id="txtNum2"
onkeyup="document.getElementById('lblResult').innerHTML =
(ServerSideAdd( document.getElementById('txtNum1').value,
document.getElementById('txtNum2').value))" />
<p id="lblResult">0</p>
</form>
</body>
</html>
The above page will present two textboxes to the user. As they type numbers into the textboxes, it will show the result of the addition of the two numbers (which is being calculated on the server). Of course, this is a rather simplistic example, the point was to showcase just how easy it was to get started using AJAX under ASP.NET.
Page 1 of 1 1
Keywords
AJAX Asynchronous remote scripting XMLHttpRequest rich client
