具体请求的登录验证页面后台逻辑处理,这里我们忽略,不在我们的学习范围内;关键的是使用jQuery异步请求方法,如下例子:
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head id="Head1" runat="server"> 6 <title></title> 7 <script type="text/javascript" src="_layouts/Scripts/jquery-1.4.1.js"></script> 8 </head> 9 <body> 10 <form id="form1" runat="server"> 11 <div id="loginDiv"> 12 <asp:Label ID="lbl_LoginName" runat="server" Text="用户账号:"></asp:Label><asp:TextBox 13 ID="txt_LoginName" runat="server" Text="searchstg"></asp:TextBox><br /> 14 <asp:Label ID="lbl_Pwd" runat="server" Text="用户密码:"></asp:Label><asp:TextBox ID="txt_Pwd" 15 runat="server" Text="portal@stG"></asp:TextBox><br /> 16 <asp:Button ID="btn_Submit" runat="server" Text="提交" OnClientClick="clearAuthCache();" /> 17 <asp:Label ID="lbl_Info" runat="server"></asp:Label> 18 <hr /> 19 <input type="button" id="btn_Login" value="异步登录网站" onclick="doLogin();" /> 20 <input type="button" id="btn_Logout" value="注销账号" onclick="clearAuthCache();" /> 21 </div> 22 </form> 23 <script type="text/javascript"> 24 var clearAuthCache = function () { 25 if ('<%= isClearAuthCache %>'.toLowerCase() == 'true') { 26 try { 27 document.execCommand('ClearAuthenticationCache'); //只针对IE 28 } 29 catch (e) { 30 } 31 finally { 32 } 33 } 34 }; 35 //兼容其它浏览器 36 var jq_AsynLogin = function (loginName, pwd, domain, asynUrl, successDefaultUrl) { 37 $.ajax({ 38 type: 'POST', 39 url: asynUrl, 40 async: true, 41 global: false, 42 username: domain + '\' + loginName, 43 password: pwd, 44 beforeSend: function (xmlHttpRequest) { 45 var imgStr = '<img src="/_Layouts/Styles/WorkPlatform/Blue/loading.gif" alt="" />'; 46 $('#loginDiv').html(imgStr); 47 }, 48 success: function (data, textStatus) { 49 window.location.href = successDefaultUrl; 50 }, 51 complete: function () { 52 }, 53 error: function (xmlHttpRequest, textStatus) { 54 if (xmlHttpRequest.status == '401') { 55 alert('帐号或密码错误!'); 56 window.location.href = window.location.href; 57 } 58 else { 59 alert("获取数据失败,请重试!"); 60 } 61 } 62 }); 63 }; 64 //只针对IE 65 var asynLogin = function (loginName, pwd, domain, asynUrl, successDefaultUrl) { 66 var auth = new ActiveXObject('msxml2.xmlhttp'); 67 auth.open('post', asynUrl, false, domain + '\' + loginName, pwd); 68 auth.send(); 69 70 switch (auth.status) { 71 case 200: 72 window.location.href = successDefaultUrl; 73 break; 74 case 401: 75 alert('帐号或密码错误!'); 76 break; 77 default: 78 alert('抱歉,请再试一次!'); 79 } 80 }; 81 var doLogin = function () { 82 var loginNameObj = document.getElementById('<%= txt_LoginName.ClientID %>'); 83 var pwdObj = document.getElementById('<%= txt_Pwd.ClientID %>'); 84 if (loginNameObj.value == '') { 85 alert('请输入用户账号!'); 86 loginNameObj.onfocus(); 87 return; 88 } 89 if (pwdObj.value == '') { 90 alert('请输入用户密码!'); 91 pwdObj.onfocus(); 92 return; 93 } 94 jq_AsynLogin(loginNameObj.value, pwdObj.value, 'contoso', 'http://yxjt.contoso.com/', 'http://yxjt.contoso.com/WorkPlatform2/Pages/default.aspx'); 95 }; 96 </script> 97 </body> 98 </html>