In this post I want to show you how to use jQuery to create an AJAX login screen. I am going to use an ASP.NET MVC application for this demonstration. I will be modifying the small default application that is created when you create a new MVC application. So go ahead and create a new MVC application. I will be walking through the process step by step so when this article is done you will have a working application.

I’m sure you’ve seen those nice interactive form validations on some Web 2.0 websites. The validation occurs while you’re typing your form input. For example, you’re typing your email in the email address field. You see a red “X” mark beside the field and when you’re finished typing your email address, a green check mark replaces the red “X” mark. What happens there is while you’re typing in your email address, the page communicates with the server to validate what you’re typing. When you finished typing your email address and the data you keyed in is valid, it passes the validation so it shows the green check mark without reloading the page. This is done using Ajax.

In this tutorial, you’re going to learn how to make this kind of interactive, Ajax-powered form validation (the same validation sample mentioned earlier). If you haven’t used Ajax before, don’t worry because I will show you how you can create Ajax-powered applications without worrying about the whole XmlHttpRequest process. If you can program with PHP and a little Javascript, you’re good to go. All you need is this handy little open-source Ajax toolkit called Sajax.