Microsoft seems to have been slow to adopt AJAX, having very little support for it in .NET 1.1 and VS2003. They did release ATLAS, which was their set of libraries that aided in the implementation of AJAX in .NET 2.0. You can read more about ATLAS on Wikipedia. But, rather than just dump some libraries on you and say "have fun", I'd prefer to illustrate the usage of the
XMLHttpRequest object, and show how easy it can be to implement its functionality into your website with very little overhead.
The root functionality of AJAX lies in the
XMLHttpRequest object. There are four primary steps in utilizing this object.
- Create the request
- Send the request
- Receive the response
- Process the response
Using the code
There are several different steps to creating and using the code. Because AJAX uses multiple technologies to accomplish its tasks, I'll break it down here with a brief explanation using my included example:
- shoutbox.xml - Houses all of the messages in XML format.
- shoutbox.css - The stylesheet. This is optional, but will definitely help make your app look cool.
- saveXML.aspx - The HTML page is nothing...We're only interested in the code-behind. This is the server-side script that handles the XML request, does all of the processing, and returns a response.
I'm not going to include a lot of source code in this article, because the code I'm providing in the source is fairly well documented. If you're fairly up to date on your C#, the provided server-side code should be a no brainer for you. If not, I'll explain the three methods:
Page_Load() - Here, we receive the query string from the
XMLHttpRequest object, save the message to our XML file (see below), and write out a response (the response contains our formatted messages in HTML format).
saveNewMessage() - Accepts a message string and a username. This adds a new node to the XML file with the message, and saves the XML server-side.
getMessages() - This loads the messages from the XML file, creates a data table, and loads the messages in as rows, sorts the data table by the timestamp, and then converts all of the rows in the datatable to formatted HTML. This method returns a string, which is the output in the response.
Points of interest
processResponse()). It seems the key to ensuring your
XMLHttpRequest object never loses scope is to declare the variable globally and initialize it once. I was previously attempting to create the object within a function, then pass the object to the delegate as an argument, which failed miserable (I kept getting a type mismatch error).
All you'll really need to worry about with this code is styling the Shoutbox using the provided CSS. All of the code should work "out of the box". Some changes you might want to make? Well, for starters, you could easily turn this into a Web Control. You could also scrub the message input for links, and format the anchor tags appropriately. You could make a user login, and capture their login name in a hidden HTML input so they wouldn't need to enter a name. There are a lot of possibilities. Hopefully, this can get you started down the right path.
I have worked professionally in IT since 2004, and as a software architect since 2008, specializing in user interface design and experience, something I am still extremely passionate about. In 2013 I moved into management, and since then I've held positions as Director of Product Development, Director of Engineering, and Practice Director.