有群里的朋友问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("注册失败");
}
}
----------------------------------------------------------------------
这样就弄好了。
－－－－－－－－－－－－－－－－－－－－－－－
下载
应用例子