AJAX Web Applications

Some of Volt's most popular technical training classes center around AJAX (Asynchronous JavaScript And XML) technology. Regardless of your job position, if you work at Microsoft, you should have at least a basic knowledge of what AJAX is, and how AJAX relates to ASP.NET Web applications.

The key to understanding AJAX is to understand the problem that AJAX addresses. Let's briefly think about a scenario that demonstrates two closely related problems. Suppose you are browsing the Internet with Internet Explorer or any other Web browser. You have surely seen mapping applications that display the location of some company. A crude mapping applications has buttons around the edge of the map display to move to the north, south, east, or west. When you click on one of these buttons, the Web page you are at will freeze up while the mapping applications retrieves the next map image (during which time you lose most of your ability to interact with the Web application), and then when the new image is returned from the Web server, you will see an annoying page flicker effect while the entire page is being repainted.

These two related problems -- page flicker when an entire page is being repainted, and page lockup when a Web application has to wait for data to be returned from a Web server -- are the problems addressed by AJAX.

AJAX solves the page flicker problem by only repainting the part of a Web page that needs updating. AJAX solves the page lockup problem by sending a special asynchronous XML HTTP request to the Web server instead of a standard synchronous HTTP request. A synchronous request is one where the Web application waits until the Web server responds (which can cause page lockup, especially if the Web server has to do a lot of work such as searching a large database). An asynchronous request is one where the Web application continues working after the request, listening for the response, and then reacts after the asynchronous response is received. AJAX accomplishes the page flicker solution by using HTML <div> tags to identify an update area on a Web page (for example <div name="updateArea">), and then using JavaScript DHTML to update only a particular area with the response (for example, document.getElementById( "updateArea" ).innerHTML = xmlHttp.responseText; ). AJAX accomplishes the page lockup solution by using a special XML HTTP object, for example, objXMLHttp = new ActiveXObject( "Microsoft.XMLHTTP" ), instead of the normal HTTP GET or POST mechanisms.

Although it is possible to write raw AJAX applications using JavaScript, the process is fairly tedious and error-prone. For one thing, each browser works slightly differently which means you have to first programmatically determine what Web client (IE? Firefox? Opera?) is making the AJAX request, and then write code that targets that particular client.

AJAX enabled Web applications are one area where ASP.NET really shines. Instead of writing raw JavaScript code, with the ASP.NET AJAX library you can insert special tags. For example, the tag <asp:UpdatePanel ID="up1" runat="server"> essentially means, "I want this spot to begin the area on my Web page where an AJAX response will repaint; please generate the appropriate JavaScript code for me." And the tag <asp:AsyncPostBackTrigger ControlID = "Button1" EventName = "Click" /> means, "When a user clicks on the control with ID Button1, please send an asynchronous request to the Web server; and please take care of the ugly details of generating the JavaScript code for me."

This little explanation of AJAX should give you enough information so that you don't embarrass yourself in a job interview if you're asked about what AJAX is. The key to career growth in the technology world is continuously upgrading your personal skill set. Keep an eye out for Volt Technical Education course announcements from your Employee Relations representative.