如何用ajax实现无刷新ASP用户登录页面？

[RedChimae]

我试了好多次都提交不成功。我想要做到的是，登录页面输入用户名和密码，点提交按钮通过ajax后台验证，成功后跳转到指定页面，若不成功则直接在登录页面提示登录失败信息。请问这样的代码如何书写？

[cuayi]

<script>
var xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp.open("Get","Url.asp?ID="+ID+"&password="+password+",true);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readystate==4&&xmlhttp.status==200){
document.getElementById("div_mess").innerHTML=xmlhttp.responseTEXT;
}
xmlhttp.send(null);
</script>

至于服务端接收文件你应该会写吧？
以ASP为例：

<%
Dim Username,Password
Username=request.queryString("ID")
Password=request.queryString("Password")

...........数据库连接...........

if Username<>obj_name or Password<>obj_Password then
response.write "用户名出错了"
response.end()
else
response.redirect("Userurl.asp")
end if
%>

[RedChimae]

非常感谢，我再去试试看！

其实Get方法我很熟练，只是这样会在URL地址后面暴露变量参数，考虑到安全，我才想使用POST

[RedChimae]

首先感谢楼上的朋友！但是我想使用ajax的POST方法提交表单，这个我始终测试不成功。另外，对于ajax的调用是应该在表单的form onSubmit=""里面呢还是在提交按钮的onclick=""里呢？

[cuayi]

form onsubmit里面

光测试帐号密码没必要用POST的
Javascript的GET提交方式就是属于AJAX

xmlhttp.open( "Get ", "Url.asp?ID= "+ID+ "&password= "+password+ ",true);
这句中的ID值为 form.id.value或者直接 document.getElementById("id").value
像Obj_name 这值为：(例如rs("username"))

如果一定要用XMLHTTP的POST方式
xmlhttp.open( "Post ", "Url.asp",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xmlhttp.send("id="+id+"&password="+password);

其它不动，改了以上就OK

[cuayi]

form onsubmit="return obj()"

[cuayi]

中心思想已经说了
处理代码还是得你自已写。

以上只是实现的原理而以

[RedChimae]

我参考上面的实例制作了一个传递用户名/密码的测试页，具体代码清单如下：

这是测试主页面：
<script language="JavaScript" type="text/javascript">
HTTPrequest = function() {
// 声明并初始化变量
var obj_xmlHttp = null;

try {
obj_xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (err_1) {
try {
obj_xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err_2) {
obj_xmlHttp = false;
}
}
if (!obj_xmlHttp && typeof XMLHttpRequest != 'undefined') {
try {
obj_xmlHttp = new XMLHttpRequest();
} catch (err_3) {
obj_xmlHttp = false;
}
}
return obj_xmlHttp;
}
function logonCheck()
{
// 声明并初始化变量
var htp_userName = new HTTPrequest();
var str_userName = document.userlogon.username.value;
var str_passWord = document.userlogon.passwords.value;

htp_userName.open("POST", "receive.asp", false);
htp_userName.setrequestheader("content-type", "application/x-www-form-urlencoded");
htp_userName.onreadystatechange = function() { logonResponse(htp_userName)};
htp_userName.send("id="+str_userName+"&pwd="+str_passWord);
}
function logonResponse(htp_userName)
{
// 声明并初始化变量
var str_dopeResult = "";

if (htp_userName.readyState < 4)
{
document.getElementById("errortd").innerHTML = "Loading...";
}
if (htp_userName.readyState == 4)
{
str_dopeResult = htp_userName.responseText;

document.getElementById("errortd").innerHTML = str_dopeResult;
}
}
</script>

<form id='userlogon' name='userlogon'>用户名：<input name='username' id='username' type='text' class='inp' value='' accesskey='names' tabindex='1' maxlength='15' />密　码：<input name='passwords' type='password' class='inp' value='' accesskey='pass' tabindex='2' maxlength='20' /><button name='logon' class='logons' onclick='logonCheck();'accesskey='enter' tabindex='3'>登录</button></form><br><p><table width="200" height="300" border="1" cellpadding="0" cellspacing="0" bgcolor="#333333">
<tr>
<td id='errortd' colspan=2 align=left valign='top' style='color:#7E7E7E;'></td>
</tr>
</table></p>


这是后台调用页面：
<%
dim str_userName
dim str_passWord

str_userName = request.form("id")
str_passWord = request.form("pwd")

response.charset = "gb2312"
response.write str_userName & "<br>" & str_passWord
%>


经实际测试，如果用户名是英文的话就一切传递显示正常，如果是汉字就显示莫名的乱码，我已经加了response.charset = "gb2312"也不起作用。请问，我哪里有问题需要改？

[RedChimae]

我找到了escape这个函数，所以把代码修改为：
htp_userName.send("id="+escape(str_userName)+"&pwd="+str_passWord);

现在汉字不再乱码，显示一切正常。我想问一下用escape是最佳解决方法吗？

[cuayi]

你使用的服务器端是什么脚本语言？

[cuayi]

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

response.Charset="gb2312"

[RedChimae]

我还有最后一个问题，具体请先看以下代码：

function logonCheck()
{
// 声明并初始化变量
var htp_userName = new HTTPrequest();
var str_userName = document.userlogon.username.value;
var str_passWord = document.userlogon.passwords.value;

htp_userName.open("POST", "receive.asp", false);
htp_userName.setrequestheader("content-type", "application/x-www-form-urlencoded");
htp_userName.onreadystatechange = function() { logonResponse(htp_userName)};
htp_userName.send("id="+escape(str_userName)+"&pwd="+str_passWord);
}
function logonResponse(htp_userName)
{
// 声明并初始化变量
var str_dopeResult = "";

if (htp_userName.readyState < 4)
{
document.getElementById("errortd").innerHTML = "Loading...";
}
if (htp_userName.readyState == 4)
{
str_dopeResult = htp_userName.responseText;

document.getElementById("errortd").innerHTML = str_dopeResult;
if (str_dopeResult == "ok") {
return true;
window.location.href = "runlist.asp";
} else {
return false;
}
}
}

以上的函数调用使用的是表单的 onSubmit="return logonCheck();" 方法，假如后台验证成功返回Ok，失败返回No，那么我怎样通过responseText的值让logonCheck()函数返回return true;、return false;两个不同的状态呢？

[RedChimae]

发表于：2007-11-14 20:08:07 9楼
你使用的服务器端是什么脚本语言？
------------------------------

IIS里设置的是VBScript

[RedChimae]

谢谢了，我终于想出来方法了，用一个全局变量控制

var bln_logonStatus = true;

function logonCheck()
{
// 声明并初始化变量
var htp_userName = new HTTPrequest();
var str_userName = document.userlogon.username.value;
var str_passWord = document.userlogon.passwords.value;

htp_userName.open("POST", "receive.asp", false);
htp_userName.setrequestheader("content-type", "application/x-www-form-urlencoded");
htp_userName.onreadystatechange = function() { logonResponse(htp_userName)};
htp_userName.send("usename="+escape(str_userName)+"&pasword="+str_passWord);

if (bln_logonStatus) {
return true;
} else {
return false;
}
}
function logonResponse(htp_userName)
{
// 声明并初始化变量
var str_dopeResult = "";

if (htp_userName.readyState < 4)
{
document.getElementById("errortd").innerHTML = "Loading...";
}
if (htp_userName.readyState == 4)
{
str_dopeResult = htp_userName.responseText;
if (str_dopeResult == "Ok") {
document.getElementById("errortd").innerHTML = str_dopeResult;
bln_logonStatus = true;
} else {
document.getElementById("errortd").innerHTML = "用户登录失败！";
bln_logonStatus = false;
}
}
}

现在问题圆满解决了

[Joson.e8love]

ding~~~~~~~~~~~~~

[hbtm77889]

var url = "Send.aspx?info=" + encodeURI(info);
xmlHttp.open("get", url, true);
这样就避免了中文乱码问题 encodeURI
不管你传递的是中文 英文 数字 都可以

希望有用