asp.net实现无刷新ajax技术登录界面

来源：互联网发布：网络红人海棘的照片编辑：程序博客网时间：2024/05/21 08:53

首先声明我是asp.net的初学者，有好多技术问题都不会，希望以后看到博客的技术大牛们，看到不对的和不好的，都能够提出；

1、首先用visual studio 2012新建一个asp.net网站，添加一个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="登录" onclick="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|http://www.baidu.com|");        }        else        {            Response.Write("false");        }    }}

努力学习中！