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

首先声明我是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="登录" ο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|http://www.baidu.com|");}else{Response.Write("false");}}
}

努力学习中！

asp.net实现无刷新ajax技术登录界面相关推荐

asp.net实现无刷新,无须AJAX
在.NET 2.0正式版中开发无刷新页面(http://searchwebservices.techtarget.com.cn)2007-05-14 23:42在已经发布的 ASP.NET2.0 中, ...
php动态网站开发唐四薪答案,ASP动态网页设计与Ajax技术（唐四薪谭晓兰） pdf扫描版_IT教程网...
<asp动态网页设计与ajax技术>全面介绍了asp动态网页设计与ajax技术,采用asp作为开发环境结合基于jquery的ajax技术,显著降低了ajax的入门难度.在叙述有关原理时安排 ...
ASP.NET 第八季 ajax技术-胡延亮-专题视频课程
ASP.NET 第八季 ajax技术-2015人已学习课程介绍主讲内容: 第一讲 asp.net ajax简介第二讲 ScriptManager脚本管理控件第三讲 Script ...
ajax 页面无刷新,Ajax的页面无刷新实现详解（附代码）
这次给大家带来Ajax的页面无刷新实现详解(附代码),Ajax页面无刷新实现的注意事项有哪些,下面就是实战案例,一起来看一下. ajax (ajax开发) AJAX即"Asynchronou ...
ASP.Net中无刷新执行Session身份验证
在写一个客户的B/S结构应用程序时,突然发现一个技巧,不知道是否是MS的一个BUG,给相关的有研究的朋友原先考虑写一个检查Session的类,Session失效后,必须转向登陆页面,可每一个调用该类的 ...
Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)
相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来实现呢?我并不否认"拿来主义",只是我个人 ...
ASP.NET—015：ASP.NET中无刷新页面实现
原文作者:杨友山原文地址:http://blog.csdn.net/yysyangyangyangshan/article/details/39679823 前面也说过在asp.net中前后前交互的 ...
页面无刷新ajax上传文件--模拟iframe，超简单
前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法 ...
ASP.NET DROPDOWNLIST无刷新联动（中文URL参数处理）
请求页的两个下拉框触发事件,在传递参数的时候要把参数escape()一下,如果未对参数进行处理,且你传递的是一个中文参数,那么在服务页接受这个参数的时候就会接受未"乱码"(其实应该 ...

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

asp.net实现无刷新ajax技术登录界面相关推荐

最新文章

热门文章