An Ajax “Hello World” project to get you going

A lead to a great posting Rasmus' 30 second Ajax tutorial was too good a treat not to share around. Sometimes we all want something very simple to build a thorough understanding of the mechanics of a new technique before we dive into the deeper water beyond. Now, if you are into ASP.NET and not PHP you might like to take a look at my version of this ultra-simple introduction to Ajax with sincere thanks to the original author. Now most simple introductions to Ajax using ASP.NET seem to quickly become complex - introducing libraries and DLLs and helper functions just about as soon as the first paragraph is over. This is because they all seem to miss out the fact that you have to work around the ASP.Net functionality to get thing working in a nice simple manner. I will try and take you through the steps that explain the problem and thus make the solutions seem much more obvious.

So let's get going. Create a new Web project and, to keep things very simple at this initial stage, add a couple of HTML controls - a text field and a button to the initial page. Note, not regular ASP.NET web forms controls - click the HTML tab.

Then add a JavaScript file to the project and paste the following into it:

function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}

var http = createRequestObject();

function sndReq(action) {
http.open('POST', 'WebForm2.aspx?action='+action);
http.onreadystatechange = handleResponse;
http.send(null);
}

function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
alert(response);
document.getElementById('MessBox').value = response;
}
}

You will need to add a reference to this JavaScript file to the web page - although you could just add the script to that page directly.

I gave my Test Field the name "MessBox" and then added an OnClick event to the button to call the sndReq() JavaScript function. You can check out the two HTML lines at the code repository for this blog

Now add a second page to the project - The default name will be WebForm2.aspx which matches with the hard coded value you will have noticed in the sndReq() JavaScript function above - if you call your new page something else then you will have to adjust the http.open() line in that function.

Do not put any controls on the new page and for a first run just add the following to the PageLoad() sub in the "code behind".

Dim YouSent As String = Request.QueryString(0)
Response.Write("You sent " & YouSent)

Now let us have a quick look at the JavaScript. There is a good explanation of the function at the location linked at the top of this article so I can keep it simple here. The CreateRequestObject() function simply handles the fact that versions of Internet Explorer before version 7 have the XMLHTTPRequest object named as XMLHTTP - in fact this code will need adjustment if it is likely to run into a beta of IE7. The sndReq() function makes an asynchronous call to the specified URL and the handleResponse() function is registered as part of the sndReq() function as the function that will manage any returned responses.

Fire up the application and click the button. The alert() command added to the JavaScript handleResponse() function will show you exactly what comes back. You will see the expected message "you sent foo" followed by the HTML for the empty page - including (nearly) empty HEAD, FORM and BODY tags.

Just to get our first ASP.NET/Ajax app up and running we can make a couple of changes and then think about the implications of what just happened.

First - let's change the Response.Write line to

Response.Write("Hello World") as that was our original intention although it was nice to see that we could pass data to the server as well as retrieve it using our ultra simple Ajax functions.

Then open up WebPage2 in the HTML view and remove all of the code with the exception of the first line (the one that registers the Code Behind). This will stop the ASP.NET page adding it's HTML to the response - because there will be none to add. This can be done programmatically at run time but not from the page load event (as the HTML has not yet been rendered at that point in time).

Then run the application and click the button. We now have a working application that implements Ajax technology with requested data being displayed without reloading the page.

Clearly a more complex web page with multiple opportunities to implement Ajax technology would require a more sophisticated set-up at the client end. Also, while the technique shown could be easily amended to handle multiple requirements at the server end it is probable that you would want individual controls to communicate directly with prepared functions within the same page. In all probability you will want to move on to one of the Ajax control libraries or to implement something like the Ajax.dll file described in the MSDN article ASP.NET Spiced: Ajax that allows you to tag specified functions as "Ajax Methods" and call them from the client. I will take the opportunity to explore one or two of these options in this blog although I am traveling again for the next few days - to the USA this time.