本篇将于读者一起从零开始制作一个关于AJAX的登录DEMO，程序功能、业务非常简单，因此我就不需要跟大家讲解这方面的东西，我们主要来看怎么利用AJAX实现登录，目的是利用这个DEMO来融合之前我们学到技术知识点，希望对读者有意义。
一、组件介绍
根据这个功能，我们需要一个ASPX页面、一个JS文件
1、ASPX页面：登录表单页面，用于接收用户输入的信息并处理信息。
2、JS文件：实现AJAX的封装。
二、实现步骤
1、登录表单页面：
我们用VS2005或VS2008新建一个ASXP页面，代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script src="Ajax.js" type="text/javascript">
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
用户名:<br /><input type="text" id="uname" /><br />
密 码:<br /><input type="password" id="upwd" /><br />
<input type="button" value="提交" οnclick="useAjaxDemo()" /><br />
<div id="msg"></div>
</div>
</form>
</body>
</html>
2、JS文件：
JS文件中编写着我们要使用AJAX技术的代码，如果读者关注这个系列中的每一篇文章，那么我相信读者很容易理解并写出更好的代码。
//此方法建立一个AJAX对象
function useAjaxDemo()
{
var ajax=createAjaxObject();
sendToValidata();
function createAjaxObject()
{
var ajax;
try
{
ajax= new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
ajax = new XMLHttpRequest();
}
}
return ajax;
}
//使用AJAX对象
function sendToValidata()
{
if(!ajax)
{
document.getElementById("msg").innerText="浏览器不支持使用AJAX技术";
}
else
{
var url="default.aspx?u="+document.getElementById("uname").value+"&p="+document.getElementById("upwd").value;
ajax.open("GET",url,true);
ajax.onreadystatechange =result;
ajax.send(null);
}
}
function result()
{
if(4==ajax.readyState)
{
document.getElementById("msg").innerText=ajax.responseText;
}
}
}
3、业务功能的实现
有了上面的组件，我们离成功就只差一步了，接下来我们得继续编写我们的功能实现代码，代码如下：
if ((Request.QueryString["u"] != null) && (Request.QueryString["p"] != null))
{
string uname = Request.QueryString["u"];
string upwd = Request.QueryString["p"];
if (("daigua" == uname) && ("daigua" == upwd))//虚拟用户名和密码都是"daigua"
{
Response.Clear();
Response.Write("成功登陆");
Response.End();
}
else
{
Response.Clear();
Response.Write("登陆失败");
Response.End();
}
}
} 三、总结：
本篇没有详细技术点的实现，这功能很简单，大家都很了解，因此我只分享出我的代码融合之前的知识点以便让大家很深刻的理解。
经过一段时间，这系列的文章告一段落，在此谢谢大家一直对我的支持，虽然这系列终结了，但我还是会继续分享我的学习过程，以便让更多的人快速入门。
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)