AJAX.NET应用----异步注册

有群里的朋友问AJAX这个问题.
1.我觉得应该首先了解DOM客户端模型,至少应该知道它是什么
2.应该懂一定JS语法,至少应该能构造自己的类.
3.最好使用一种相对成熟的框架.

----------------------------------------
首先AJAX技术核心就是异步。

先说说我自己的经验。
    我认为实际上AJAX就是一种共同遵守的C/S模型而已。
    只不过碰巧AJAX的客户端是不同的浏览器,它们都有共同的规范。
    而随着XMLHTTP成为规范,大家都得到了一个最小的数据描述集。

而在客户端,我们拥有JS脚本语言,可以为我们营造强大的客户端模型。
然后通过XML格式与服务端交互数据(ASPNET,ASP,PHP,JSP,CGI。。)

----------------------------------------------------------

我经常使用的是AJAX.NET,现在它有更多的版本,AJAXPRO,AJAXPRO2等等。

对用它的使用,可以访问http://www.ajax.net获得。

------------------------------------------------------------------
现在有一个常见的AJAX注册的应用。

下面是一个JS对象,可以构造不同的遮罩效果。它是可以在IE中正常运行的脚本。

function MyScreen()
{
  
}

MyScreen.prototype.gray=function(layers,divname,styleclass,lp,tp,x,y)
{
     
      var objScreen = document.getElementById(divname);
      if(!objScreen)
      {
        var objScreen = document.createElement("div");
      }
   
     objScreen.id = divname;
     objScreen.className = styleclass;
     var wh = x + "px";
     var hh = y + "px";
    // var toppoint = resultPanelTop+"px"
     var toppoint = tp+"px"
     //var leftpoint = (document.body.clientWidth/2 + x/2+resultPanelLeft)+"px";;  
     var leftpoint = (document.body.clientWidth/2 + x/2+lp)+"px";;                        
                 
   
    var oS = objScreen.style;
   oS.display = "block";
   oS.top = toppoint;
   oS.left = leftpoint;
   oS.margin = oS.padding = "0px";
 
    oS.width = wh;
    oS.height =  hh;
   oS.position = "absolute";
 oS.zIndex = layers;
    oS.background = "#fff";
   // oS.filter = "alpha(opacity="+filterNo+")";
    document.body.appendChild(objScreen);
}
MyScreen.prototype.SetText=function(divname,text)
{
   var objScreen = document.getElementById(divname);
   objScreen.innerHTML = text;
}
MyScreen.prototype.clear=function(divname)
{
  var objScreen = document.getElementById(divname);
  var oS = objScreen.style;
    oS.width = "0";
    oS.height ="0"
    oS.zIndex=0;
}
MyScreen.prototype.remove=function(el)
{
 
  var removediv=document.getElementById(el);
  document.body.removeChild(removediv);
}
-----------------------------------------------------------
可以这样来使用它。就生成了一个层:
 var ms = new MyScreen();
 ms.gray(11,"guanggao","",0,0,document.body.clientWidth,document.body.clientHeigth);
 删除它,可以如下:
 ms.remove("guanggao");
 现在有了一层,然后再添加一个注册时使用的层。
 ms.gray(12,"login","",resultPanelLeft-81,40,200,300);
 ----------------------------------------------------------
 然后在这个login上描述你的注册页面。可以这样:
 var htmltable = "<table><tr><td>帐号</td><td><input type='text' id='registerName'></td></tr>"+
                 "<tr><td>密码</td><td><input type='password' id='registerpwd1'></td></tr>"+
   "<tr><td><input type='button' id='regPost' onclick='regPost();' value ='注册'></td><td><input type='button' id='cancelreg' onclick='cancelReg();' value ='取消'></td></tr></table>";

 var logindiv = document.getElementById("login");
 logindiv.innerHTML = htmltable;
 ----------------------------------------------------------
 经过以上步骤,注册页面出现了。
 剩下的你要做的就是收集registerName和registerpwd1的值返回到服务器了。
 怎么收集不用讲了。

 -------------------------------------------------------------

 下面是服务端,我用的是ASPNET,使用AJAX.net框架,需要引用它AJAX.dll
 public class AJAXbackgroup
 {
  public AJAXbackgroup()
  {
   //
   // TODO: 在此处添加构造函数逻辑
   //
  }
 [Ajax.AjaxMethod()]
 public string RegisterUser(string name,string pwd)
  {
   #region 检查参数
   if(name == "" || pwd == "")
   {
    return "-1";
   }
   #endregion
   try
   {
   //你的注册方法实现
     registerFunc(name,pwd);
           
    return "1";
   }
   catch(Exception ex)
   {
    return ex.Message;
   }
   
  }
          }
------------------------------------------------------------
然后你在需要使用AJAX的页面注册该类(AJAXbackgroup)

private void Page_Load(object sender, System.EventArgs e)
  {
   Ajax.Utility.RegisterTypeForAjax(typeof(QueryGame));


   //.....
          }
------------------------------------------------------------
这样服务端做好了,现在回到客户端,取得registerName和registerpwd1的值,
使用这样的方法回传给服务器。

function registerFunc(registerName,registerpwd1)
{
   var response = AJAXbackgroup.RegisterUser(registerName,registerpwd1);
   if(response == "-1")
   {
      alert("注册成功");
   }
   else
   {
      alert("注册失败");
   }
}
----------------------------------------------------------------------
这样就弄好了。
-----------------------
下载
应用例子

posted on 2007-01-09 19:03  LT  阅读(530)  评论(0编辑  收藏  举报

导航

直角体Web动力