AJAX is becoming a hot topic in Web applications and it seems that every Web developer is talking about it or advocating it or criticizing it, or whatever. Some even refer it as “future of the Web”.
What in the world is AJAX then?
First of all, AJAX is NOT a language.
Secondly, AJAX stands for Asynchronous JavaScript and XML. It is just a technique, actually an old technique called remote scripting which allows client-side JavaScript to request data from a server without having to refresh the Web page. That’s pretty much it!
What really makes AJAX possible is the XmlHttpRequest object or its Microsoft’s ActiveX equivalent. It is this object that allows data to be transferred asynchronously. What asynchronous means that a process can be handled independently from other processes, for instance, in a Web application, some data can be retrieved and displayed without post-backs.
I will go through an example to explain how to implement AJAX in an ASP.NET Web application.
1. Scenario
Suppose you have a user registration form where user needs to pick a user name for themselves. It will be very convenient for user to know if the user name s/he picked is available right after s/he moves the cursor to the next field, instead of waiting the user to click a button to check the availability of user names.
This is where AJAX is very useful for.
2. Basic Ideas and Steps
- We need a Web page, say called ValidateInputData.aspx, to check the availability of user names. This Web page will be accessed by the XmlHttpRequest or ActiveX object asynchronously.
- On the registration page, we need a JavaScript, say prepareRequest() to perform initialization. This function will take user’s input from the text box and append it to the current URL. Then pass the customized URL to the second JavaScript function, called makeRequest(url).
- The second JavaScript function, makeRequest(url), will create an XmlHttpRequest object or ActiveX object and use the object to send a request to the Web page ValidateInputData.aspx. And at the same time, use the object as a parameter to call the third JavaScript, alterContents(http_request) to display information based on the response coming back from ValidateInputData.aspx.
3. Get Started
- Create a user registration page UserRegistration.aspx in MS VS.NET like this:
- Let’s write the three JavaScript’s one by one.
prepareRequest()
Assumptions:
1. The text box’s ID is txtUsername.
2. The Web page ValidateInputData.aspx is placed under a folder called “AJAX” in your Web application.
makeRequest()
alterContents(http_request)
- Open your UserRegistration.aspx page, switch to HTML editor, then put the above three JavaScript functions into <HEAD> section.
- Open ValidateInputData.aspx and go to code behind. Change your Page_Load event handler as following (VB.NET):
- “IsInSystem(objectValue)” is a function that checks the availability of the entered user name.
- Set UserRegistration.aspx as the start up page, then compile and run the Web application. Type in “Jeffrey” as user name, once your cursor leaves the text box, you will see an error message and the “Register” button will be disabled until an available user name is entered.
4. Enhancement
Those JavaScript functions are easy to understand and to write, but you may think it is tedious to hard code them for each page using them. What a headache! Yes, but the good news is that we can enhance it and let those functions be generated automatically when a page is loaded.
I have created a PageUtility class library, and within the class I have created a function called ValidateInputData with several parameter: the text box needs to be monitored, the label used to display messages, a string contains success message, a string contains failure message, an object type defines what type of validation in case we have more than one type, and a button to be disabled/enabled. Here is the function header in VB.NET and you can download the source code at the end of this post:
The rest of the function will basically use a StirngBuilder to generate those three JavaScript functions. Because it is too long, I will not post screen shots here, but you can download the source file if you are interested. After those functions have been generated, you need the following two lines (assume the StringBuilder’s name is sb):
Now, I don’t have to manually write those JavaScript functions in the HTML editor. All I need to do is to go to the code behind of page, for instance UserRegistration.aspx, in the Page_Load section, type the following line of code:
Hope this post will help you in any way understanding AJAX.
Download the source code here.(after download, remove the extension .gif, it is a .zip file, but WordPress does not allow .zip files, so I had to add .gif extension after .zip)