首先声明我是的初学者，有好多技术问题都不会，希望以后看到博客的技术大牛们，看到不对的和不好的，都能够提出；
1、首先用visual studio 新建一个网站，添加一个js文件夹，添加javascript文件名命AJAx.js，再添加一个Login.aspx网页，如图结构：
2、Default.aspx很简单
<head runat="server"><title></title><script language="javascrip" type="text/javascript" src="js/AJAx.js"></script></head><body><form id="form1" runat="server"><div>用户名：<asp:TextBox ID="UserName" runat="server"></asp:TextBox><br />密 码：<asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox><br /><input id="Button1" type="button" value="登录" οnclick="toLogin()" /><input id="Reset1" type="reset" value="重置" /></div></form></body>
3、主要代码在这里AJAx.js
function Ajax() {var m_xmlReq = false;//判断是否IE浏览器并创建异步对象//判断的原因是,各种浏览器对JavaScript的支持不一样..所以XmlHttpRequest对象的产生方式也不一样.比如IE.他支持的是ActiveX的方式.//["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];这些是他ActiveX的版本.//而有些浏览器.象FireFox,浏览器本身有对XmlHttpRequest的支持.浏览器有内置对象.所以用"xmlHttp = new XMLHttpRequest(); "就可以了if (window.ActiveXObject) {try {m_xmlReq = new ActiveXObject('Msxml2.XMLHTTP');}catch (e) {try {m_xmlReq = new ActiveXObject('Microsoft.XMLHTTP');}catch (e) { }}}else if (window.XMLHttpRequest) {m_xmlReq = new XMLHttpRequest();}this.send = function (Url, send_data, CallBack) {if (!m_xmlReq) {return;}method = "POST";m_xmlReq.open(method, Url, true); //加载服务器if (method == 'POST') {m_xmlReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');}m_xmlReq.onreadystatechange = function () { //关联异步调用方法if (m_xmlReq.readyState == 4) { //判断异步调用完成if (m_xmlReq.status == 200) { //判断是否调用成功CallBack(true, m_xmlReq.responseText);} else {CallBack(false);}}}m_xmlReq.send(send_data.toString()); //发送带参数的请求}}//创建ajax对象var AjaxObject = new Ajax();function toLogin() {var username = document.getElementById("UserName").value;var pwd = document.getElementById("Password").value;AjaxObject.send("Login.aspx", "username=" + username + "&pwd=" + pwd,function (succeed, responseUrl) { //绑定回调函数if (succeed) {var arr = responseUrl.split("|");if (arr[0] == 'true') {document.location.href = arr[1];//设置登录成功后跳转的URL//document.location 与document.URL有什么区别？//////}else {alert("用户名或者密码错误");}}});}
（一）创建XMLHttpRequest对象：
m_xmlReq = new ActiveXObject('Msxml2.XMLHTTP');
m_xmlReq = new XMLHttpRequest();
（二）初始化对象
1、调用open()方法为同服务器间通信的对象做准备并初始化，通过send()方法发出实际请求。open()方法包括三个参数：请求类型（POST\GET\...）、URL以及键值对参数、可选参数（true异步/fasle同步，默认true）。
2、GET和POST，post需要发送额外的数据：setRequestHander("Content-type", "application/x-www-form-urlencodes")；
3、最后通过send()方法把请求发到服务器。
(1)XMLHttpRequest对象的open()方法，比如我们有了要连接的URL，还有像传递的参数都可以跟在url的后面，然后就可以配置请求了。这时用open()方法来完成。open()方法有五个参数：
request-type：发送请求的类型。典型的值是GET 或POST，但也可以发送HEAD 请求。
url：要连接的URL。
asynch：如果希望使用异步连接则为true，否则为false。该参数是可选的，默认为true。
username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。
password：如果需要身份验证，则可以在此指定口令。 该可选参数没有默认值
通常使用其中的前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为“true”。这是默认值，但坚持明确指定请求是异步的还是同步的更容易理解。
下面是open()方法的一个使用示例：
var url = "lookup.php?name='haha'";
request.open("GET", url, true);
(2)GET和POST，post需要发送额外的数据：setRequestHander("Content-type", "application/x-www-form-urlencodes")；
(3)最后是send
eg: (1) ajaxObject.open("GET","URL",true) ;
ajaxObject.send(null) ;
(2) ajaxObject.open("POST","URL",true);
ajaxObject.setRequestHander("Content-type", "application/x-www-form-urlencodes");
ajaxObject.send();
（三）监控服务器响应状态
监听XMLHttpRequest对象的onreadystatechange()事件，在触发时调用函数
xmlHttp.onreadystatechange = function() {}。意思是 把函数function() {}运行...
eg：ajaxObject.onreadystatechange = function() {
if( ajaxObject.readyState == 4) {
if(ajaxObject.status == 才200) {
//执行成功，处理结果
}else if(ajaxObject.status == 404){
//404错误
}
}
}
4、Login.aspx.cs文件
public partial class Login : System.Web.UI.Page{//内定的用户和密码string tempUserName = "123";string tempPassword = "123";protected void Page_Load(object sender, EventArgs e){string username = Request["username"];string pwd = Request["pwd"];if (tempUserName == username && pwd == tempPassword){//返回真，并且要跳转的网页Response.Write("true||");}else{Response.Write("false");}}}
努力学习中！
如果觉得《asp.net实现无刷新ajax技术登录界面》对你有帮助，请点赞、收藏，并留下你的观点哦！
