jQuery, AJAX, and Classic ASP

While there was a good size buzz about jQuery before Scott Guthrie announced that jQuery will be shipping with Visual Studio, I have seen even more buzz with people wanting to learn more about it.  I have seen a huge number of new posts on ways to integrate it with traditional ASP.Net WebForm projects and tips and tricks with various extensions.  I have also noticed that Dreamweaver CS4 also has it bundled with it as well.  I'm not an Adobe guy so I have no idea if it was part of CS3 or not; however, I still find the momentum of jQuery amazing right now.

 

Even though I love learning and reading about the latest and greatest that the web design/development blogs have to offer, there are times in which we don't have the luxury of rebuilding our older/legacy applications.  Because of this, and a project I recently had, I explored the prospect of using jQuery to implement/replace AJAX functionality in a classic ASP application.

 

Background

This past week at work, I was given an unusual project that involved a legacy application that we rarely touch.  You know, one of those applications that has been around for ages and it works so no one wants to touch it if they really don't have to.  This particular application in my organization was a classic ASP application that had a page which was added on a couple years back that had the beginnings of AJAX.  The project was simple, ensure the site would be IE7 and FF3 compatible, because the current JavaScript would only work in IE6.  Sounds simple right?

 

Well, in all honesty, the project was pretty simple since I just had to use the appropriate XMLHTTPRequest object; however, once I put in the examples that are scattered across the Internet, it still didn't work.  So I had a choice between rewriting the entire JavaScript, the entire page in ASP.Net (my boss suggested/approved of such actions if required), or look into using jQuery instead of a homebrew of the XHR object.  I chose the latter.

 

The AJAX logic was rather simple.  The XHR object would send a request to a different classic ASP page which interpreted the query string and send back either a string value or actual HTML code through Response.Write().  There was no true, well formatted XML and it really was just simple request/response in a stateless manner.  Since this was the first time I'd ever looked at AJAX (or AJAH as some people would call this I'm finding out), I figured that I'd post it to help others with a speedy enhancement to their classic ASP instead of doing a full rebuild (which is costly).

 

Code

Download: jQuery and Classic ASP.zip

 

Overview

The code for this post focuses on a standard HTML page that sends XHR requests to a classic ASP application.  The way the classic ASP page is used in this example is similar to many web services where it exposes a number of functionality without publishing the WSDL file.  Our XHR will be passing a query string to this page that involves an ACTION parameter and then other values for that particular action.  Based on the ACTION, the ASP page will return a string value through the Response.Write() function.  In one instance, the ASP function will produce a string that is an HTML Select element, as well to illustrate what I'm finding out is called AJAH (Asynchronous JavaScript and HTML).

 

The ASP Code

This page has no UI.  On load, the page examines the query string for the ACTION parameter and based on the value, it will called the "Hello" function or the "GetList" function.

 

The HTML Form

The basic HTML Form is simple and divided into 2 parts.  The first is your typical "Hello, World!" example where the user enters their name and the jQuery makes a request to the classic ASP page for a returning string.  The second is a simple series of cascading drop down lists that are dynamically created on by the classic ASP page and sent back.  In both examples, I use jQuery's append() function to output the response to the screen.

The jQuery AJAX call is identical in both examples with the exception to the information being passed to the ASP page and the element the response is appended to.

   1: $.ajax({

   2:     type:"POST",

   3:     url: "http://localhost/jQueryExample.asp",

   4:     dataType: "application/x-www-form-urlencoded",

   5:     data: "Action=hello&Val=" + $("#txtName").val(),

   6:     async: false,

   7:     success: function(msg){ $("#fldHello").append(msg);}

   8: })

 

Conclusion

While I have to admit I hope I don't dive too much into classic ASP in the future, I do know that this experience has made my outlook on using it a bit better from a usability stance.  jQuery has made making AJAX style calls on classic ASP very simple to implement and allows for developers to not have to write their own plumbing code.