On the client side, the confirmAuthenticated javascript function is responsible for reading the JSON formatted response generated from the code above. The JSON object created has a single property "isAuthenticated" that represents the current login status of the user. All client-side code can be found in Listing [ajaxlogin.js]. Now that we can check the login status without posting back, the only missing piece of the solution is the ability to log back in if necessary. Instead of relying on a separate form, these fields can be added to a hidden DIV of the existing page. As with any login page, there will have to be a username and password field for the user to enter data, along with a button to submit the data. Using the default.aspx page created earlier, an additional section has to be added as seen below. The entire contents of the default.aspx page can be found in listing [default.aspx]. (see Figure 2)

    <div class="loginDialog" style="display:none" id="loginDialog">
    <label for="username">UserName</label>
    <input type="text" id="username" /><br />
    <label for="password">Password</label>
    <input type="password" id="password" />
    <button onclick="javascript:ReLogin()">Login</button>
    </div>

Notice in this code that the button has assigned the ReLogin function to its click event. The purpose of the ReLogin function is just as it sounds. To keep this example simple, the username and password are simply submitted back to the login.aspx page. By carefully crafting the POST arguments to include the username, password, and the __EVENTTARGET, you can get the Login page to accept data that didn't actually originate from the page itself. Unfortunately, this requires turning off the EventValidation on the login page.

With all of the pieces now in place, let's take a look at the control flow for a typical request. We'll assume that the user has already successfully logged in and is viewing the default.aspx page. The user enters a value into the textbox and clicks the button. At this point, the onsubmit handler that was added to the form initiates an XmlHTTPRequest to check whether the user is logged in. If the user is logged in, the form submit can continue. However, if the user is no longer logged in, we must cancel the form submission. The form will be submitted again automatically, but only after the user enters the correct credentials.

The main difference here is that with the help of AJAX, we are now able to present the login screen on the same page the user is currently on instead of the previous default behavior that redirected the user away from the current page. This single change has improved the user experience dramatically and solved the data loss problem associated with redirects.

If you think hard enough these days, you can come up with a way to improve just about anything by using AJAX. It's quickly becoming the WD-40 of the ASP.NET world. With the emergence of client-side libraries such as Atlas, much of the hard-coded AJAX programming used here can be abstracted away. As these libraries continue evolve, even more time can be spent on logic with less time worrying about JSON and cross-browser compatibility.

What started out as a miserable user experience has been transformed into a streamlined pleasure, thanks to some well-placed AJAX. Taking this example to the next level, the code and functionality can all be packaged up into a single reusable control. Doing so will enable you to add this functionality quickly to any page in any project through a simple drag-and-drop action.