Ajax开发主要有两种,一是以UpdatePanel控件为代表的微软技术,一种是AjaxPro技术。
各种技术有着各自的特点。采用微软的技术UpdatePanel为例,实现简单Ajax程序几乎不需要了解DOM、网页脚本知识和XHTML知 识,缺点也有一些,通常会带来一些不必要的网络流量(整个UpdatePanel控件内所有的控件内容都会提交),造成网络流量的浪费,另外就是VS2005下经常会出现 “***不是已知元素 原因可能是网站中存在编译错误 ”的提示。碰到过的开发人员恐怕身有体会吧?
AjaxPro则需要开发人员孰知JS脚本和XHTML相关知识,因为所有的方法需要你自己编写网页脚本。开发速度相对会较慢一点,JS调试要相对麻烦一点。
读过 周公( http://blog.csdn.net/zhoufoxcn)的一篇Blog ( http://blog.csdn.net/zhoufoxcn/archive/2008/01/05/2026908.aspx)后,决定照着实现一下前台代码:Test.aspx
<! 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 > 利用AjaxPro实现用户注册时输入用户名是否已经被注册了 </ title >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
用户名: < asp:TextBox ID ="txtUserName" runat ="server" ></ asp:TextBox >
< div id ="errorMsg" ></ div >
</ div >
< script type ="text/javascript" language ="javascript" defer ="defer" >
function checkUserName_Client()
{
var userName = document.getElementById( ' <%=txtUserName.UniqueID %> ' ).value;
document.getElementById( ' errorMsg ' ).style.display = " block " ;
document.getElementById( ' errorMsg ' ).style.color = " red " ;
if (userName == '' )
{
document.getElementById( ' errorMsg ' ).innerText = " 用户名不能为空 " ;
return false ;
}
document.getElementById( ' errorMsg ' ).innerText = Test.checkUserName_Server( "" + userName + "" ).value ? " 该用户名已被注册 " : " 可以注册 " ;
}
</ script >
</ form >
</ body >
</ html >
其中用到的数据库
表名:Users
字段名:UserName
记录可添加你喜欢的用户名
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
/* *
* 参照周公的Blog
* 写作说明:本文展示了如何利用AjaxPro与服务器交互,并且给服务器传值的情况。
* 作者:奈奈
* 日期:2008-1-10
* 首发地址: http://blog.csdn.net/mndn_nana/
* */
public partial class Test : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
if ( ! this .IsPostBack)
{
txtUserName.Attributes[ " onkeyup " ] = " javascript:checkUserName_Client(); " ;
}
AjaxPro.Utility.RegisterTypeForAjax( typeof (Test)); // 注册AjaxPro组件
}
[AjaxPro.AjaxMethod] // 申明可以在js中使用AjaxPro调用的服务器端方法
public bool checkUserName_Server( string userName)
{
string strConnection = System.Configuration.ConfigurationManager.AppSettings[ " ConnectionString " ];
SqlConnection con = new SqlConnection(strConnection);
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = " select count(*) from Users where UserName=' " + userName + " ' " ;
con.Open();
int i = ( int )cmd.ExecuteScalar();
if (i > 0 )
{
return true ;
// return "该用户名已被注册";
}
else
{
return false ;
// return "可以注册";
}
}
}
说明:在前台aspx代码中我们写了个JS方法,负责与服务器的交互,分别是function checkUserName_Client(),请注意看:
function checkUserName_Client()
{
var userName = document.getElementById( ' <%=txtUserName.UniqueID %> ' ).value;
document.getElementById( ' errorMsg ' ).style.display = " block " ;
document.getElementById( ' errorMsg ' ).style.color = " red " ;
if (userName == '' )
{
document.getElementById( ' errorMsg ' ).innerText = " 用户名不能为空 " ;
return false ;
}
document.getElementById( ' errorMsg ' ).innerText = Test.checkUserName_Server( "" + userName + "" ).value ? " 该用户名已被注册 " : " 可以注册 " ;
}
</ script >
public bool checkUserName_Server( string userName)
{
string strConnection = System.Configuration.ConfigurationManager.AppSettings[ " ConnectionString " ];
SqlConnection con = new SqlConnection(strConnection);
SqlCommand cmd = new SqlCommand();
cmd.Connection = con;
cmd.CommandText = " select count(*) from Users where UserName=' " + userName + " ' " ;
con.Open();
int i = ( int )cmd.ExecuteScalar();
if (i > 0 )
{
return true ;
// 该用户名已被注册
}
else
{
return false ;
// return "可以注册";
}
}
其中[AjaxPro.AjaxMethod]表明是可以被JS代码所调用的,另外方法需要的参数类型是string类型,而JS中数据是没有类型的,因为都是var来声明的,所以如何把参数值和参数类型传给服务器还是一个麻烦问题。
资料上说可以通过下述的方式解决:
Test.checkUserName_Server(""+userName+""),服务器就自动把参数值当字符串类型来识别了;
看看下边3次运行的效果:
该用户名已经被注册过的效果:
可以注册的效果:
用户名为空时的效果:
在Page_Load里调用AjaxPro.Utility.RegisterTypeForAjax(typeof(你的aspx页面所依附的class名称));这句话必须有,预了解详细,请查找有关AjaxPro的介绍资料。