httpxml

xmlhttp-JS-实现用户是否注册无刷新验证

代码下载

为一个初级用户写的通过JS实现用户名是否注册的无刷新校对DEMO

页面核心代码CheckUser.aspx:

<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server">      <title>无标题页</title> </head> <body>     <form id="form1" runat="server">     <div>         用户名<asp:TextBox ID="txtUserName" runat="server" onblur="CheckUserName(this.value);"></asp:TextBox>         <span id="checkInfo"></span>         <br />         密&nbsp;&nbsp;&nbsp;&nbsp;码<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>     </div>     </form> </body> </html>

     <script language="javascript" type="text/javascript">
function CheckUserName(userName){
u_name=userName;
if (u_name==null||u_name==''){
alert("请您输入用户名");
return false;
}
infoBoard=document.getElementById("checkInfo");
infoBoard.innerText='查询中...';

**    myurl="**http://localhost:8078/Login.aspx?UserName="+u_name**;  //记得修改为你的实际页面地址下。**  
alert("提交验证的服务器页面地址:"+myurl);

var retCode;

retCode=openurl(myurl);

    alert("服务器返回值:"+retCode);  

switch(retCode){
case "-2":
infoBoard.innerText='<font color=red>抱歉</font>,查询失败';break;
case "1":
infoBoard.innerText='<font color=red>恭喜</font>,'+userName+'可以使用';break;
case "0":
infoBoard.innerText='<font color=red>抱歉</font>,用户名'+userName+'已经被使用';
}
return;
}
function openurl(url){
var objxml;

   
if(window.ActiveXObject)
{
objxml=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
objxml=new XMLHttpRequest();
}

    objxml.open("GET",url,false);
try{
objxml.send();
retInfo= objxml.responseText;               

if (objxml.status=="200"){
return retInfo;
}
else{
return "-2";
}
}
catch(e){
alert(e);


}
</script>

校对页面代码login.cs:

 

            //获取用户名
string userName = Request.QueryString["UserName"];

            //根据用户名判断改用户是否存在
//连接数据库
// System.Data.OleDb.OleDbConnection conn = new OleDbConnection(DB_BC.DBConnectionString);

            // //根据输入的用户名读取数据库信息
//   string sql = string.Format("Select Count(*) From User Where Name='{0}'", userName);

            // //新建数据库执行的对象
//   OleDbCommand cmd = new OleDbCommand(sql, conn);
// //当数据库可读
//   conn.Open();

            //// 判断输出的值是否为1,不为1就输出2
//     if (int.Parse(cmd.ExecuteScalar().ToString()) == 1)
//     {
//         Response.Write("1");
//     }
//     else
//     {
//         Response.Write("2");
//     }

xmlhttp介绍:

 

XmlHttp是什么?

最通用的定义为:XmlHttp是一套可以在javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
来自MSDN的解释:XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0) 向http服务器发送请求并使用微软XML文档对象模型Microsoft?? XML Document Object Model (DOM)处理回应。

现在的绝对多数浏览器都增加了对XmlHttp的支持,IE中使用ActiveXObject方式创建XmlHttp对象,其他浏览器如:Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。

XmlHttp对象参考:

MSXML中提供了Microsoft.XMLHTTP对象,能够完成从数据包到Request对象的转换以及发送任务。

创建XMLHTTP对象的语句如下:

1Set objXML = CreateObject("Msxml2.XMLHTTP") 或 Set objXML = CreateObject("Microsoft.XMLHTTP") 'Or for version 3.0 of XMLHTTP, use: 'Set objXML = Server.CreateObject("MSXML2.ServerXMLHTTP") 2

对象创建后调用Open方法对Request对象进行初始化,语法格式为:

1objXML.open http-method,url,async,userID,password 2

Open方法中包含了5个参数,前三个是必要的,后两个是可选的(在服务器需要进行身份验证时提供)。参数的含义如下所示:

http-method:HTTP的通信方式,比如GET或是POST

url:接收XML数据的服务器的URL地址。通常在URL中要指明ASP或CGI程序

async:一个布尔标识,说明请求是否为异步的。如果是异步通信方式(true),客户机就不等待服务器的响应;如果是同步方式(false),客户机就要等到服务器返回消息后才去执行其他操作
userID:用户ID,用于服务器身份验证
password:用户密码,用于服务器身份验证

XMLHTTP对象的Send方法

用Open方法对Request对象进行初始化后,调用Send方法发送XML数据:

objXML.send()

Send方法的参数类型是Variant,可以是字符串、DOM树或任意数据流。

发送数据的方式分为同步和异步两种。在异步方式下,数据包一旦发送完毕,就结束Send进程,客户机执行其他的操作;而在同步方式下,客户机要等到服务器返回确认消息后才结束Send进程。

XMLHTTP对象中的readyState属性

其能够反映出服务器在处理请求时的进展状况。客户机的程序可以根据这个状态信息设置相应的事件处理方法。属性值及其含义如下表所示:

值  说明
0   Response对象已经创建,但XML文档上载过程尚未结束
1   XML文档已经装载完毕
2   XML文档已经装载完毕,正在处理中
3   部分XML文档已经解析
4   文档已经解析完毕,客户端可以接受返回消息

客户机处理响应信息,客户机接收到返回消息后,进行简单的处理,基本上就完成了C/S之间的一个交互周期。

客户机接收响应是通过XMLHTTP对象的属性实现的:
responseText:将返回消息作为文本字符串;
responseBody:将返回消息作为HTML文档内容;
responseXML:将返回消息视为XML文档,在服务器响应消息中含有XML数据时使用;
responseStream:将返回消息视为Stream对象

以下是一个简单的例子:类似新闻小偷

1<% Set objXML = Server.CreateObject("MSXML2.ServerXMLHTTP") objXML.open "GET","http://www.alexa.com",false objXML.send() response.write(objXML.responseText) %> 2

整个步骤很明显:建立、打开、发送和接受。

代码交流 2021