javascript实现前后台数据的交互
前几天的时候网友问了个技术性的问题，考虑了好几天，今天把自己总结出来的点点经验总结如下：
怎样使用用户注册时，自动的查找用户名字是否已经注册，其实总结起来很多种方式能实现，把最常用的几种方式列一下：
《1》用javascrpt实现用户名的查找功能，即当我们打开注册页面的时候就将已经注册的用户名放入客户端，此种方法适合于轻量级的用户注册，并且对系统的要求安全性不高的基础之上，放入客户端的kookie或者直接放在页面代码中，当我们用户输入的时候直接检查就行：
后台代码：
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Text;
public partial class Default2 : System.Web.UI.Page
{
protected ArrayList a1 = new ArrayList();
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection Conn = Cls_Data_Conn.Data_Conn();
SqlCommand sql = new SqlCommand("SELECT U_Name FROM Tb_User", Conn);
SqlDataReader myReader;
Conn.Open();
myReader = sql.ExecuteReader();
while (myReader.Read())
{
a1.Add(myReader[0]);
}
Conn.Close();
sql.Dispose();
Conn.Dispose();
CreateJSArray();
}
void CreateJSArray()
{
string[] array = (string[])a1.ToArray(typeof(string));//事先定义好的数组，类型转换，小知识点
////创建js数组的脚本
//StringBuilder createJSScript = new StringBuilder(" function ceshi() { var jsArray = {"); ;
StringBuilder he = new StringBuilder();
he.Append(" function ceshi(obj) {");
he.Append(" var name= new Array(");
foreach (string i in array)
{
he.Append("'" + i + "'" + ",");
}
he.Remove(he.Length - 1, 1);
he.Append(");");
he.Append(" for(var i=0;i<name.length;i++)
{
var avalue = name[i];
if(avalue ==obj)
alert('已存在') ; } ");
//注册
//createJSScript.Append("}");
he.Append("}");
ClientScript.RegisterStartupScript(this.GetType(), "ceshi(obj)", he.ToString(), true);
}
}
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <script type ="text/javascript" > </script> </head> <body> <form id="form1" runat="server"> <div> </div>
<input id="Text1" runat ="server" type="text" onblur ="ceshi(this.value)" /> </form> </body> </html>
《2》这种方式是大部分网站使用的，使用ajax检查用户名，借用第三个页面，这里面同样的有几个知识点需要自己去掌握，静态的方法实现传入后台数据，这也是ajax对xml语言的运用。
可以使用微软给出的验证控件CustomValidator
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="kehuduanyanzheng .aspx.cs" Inherits="kehuduanyanzheng_" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>客户端验证控件</title>
<script type="text/javascript">
function ValidationFunctionName(source, arguments)
//这个是微软控件规定的验证方法，必须这样写。
{ var userName =document.getElementById("UserName");
var oBao = new ActiveXObject("Microsoft.XMLHTTP");
oBao.open("Get","Check.aspx?username=" + userName.value,false);
oBao.send(); var strResult = oBao.responseText;
//如果返回 1 就代表可以使用，否则不能通过验证
if (Number(strResult) == 1)
arguments.IsValid = true;
else
arguments.IsValid = false;
} </script>
</head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="UserName" runat="server"></asp:TextBox> <asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="ValidationFunctionName" ControlToValidate="UserName" ErrorMessage="此用户名已经存在" SetFocusOnError="True" OnServerValidate="CustomValidator1_ServerValidate" ValidateEmptyText="True"></asp:CustomValidator> <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return jiancha()" /> </div> <div > <input id="Text1" type="text" onblur =" return ceshi()" /> <span id="dd"></span> </div>
<script type ="text/javascript" >
function ceshi() //这个是自己定义的方法，同样的用来验证用户名。
{ var mingzi=document .getElementById ("Text1").value;
var oBao = new ActiveXObject("Microsoft.XMLHTTP");
//通过微软规定的xmL统一标准进行数据的传输。
oBao.open("Get","Check.aspx?username=" + mingzi,false);
oBao.send(); var strResult = oBao.responseText;
dd.innerHTML ="<img src =\"images/loading.gif\" />"
setTimeout("yanchi("+strResult+")",1000);
//如果返回 1 就代表可以使用，否则不能通过验证
}
function yanchi(strResult)
{
if (Number(strResult) == 1)
{
dd.innerHTML ="成功"
}
else
{
dd.innerHTML ="<img src =\"images/delete.png\" />"
}
}
function jiancha()
{
var mingzi=document .getElementById ("Text1").value;
if(mingzi=="")
{
alert ("请输入数据");
return false ;
}
else
return true ;
}
</script>
</form>
</body>
</html>
后台代码：
后台不用写任何代码。此处的应用的验证的是在第三个页面中：
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class Check : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string name=Request.QueryString["username"].ToString();
Response.Clear(); ///当我们进行检查时，必须的清空里面已有的数值
//检查用户名
if (name== "wu")
Response.Write("1");
else
Response.Write("0");
Response.End();
}
}