.net采用ajax实现邮箱注册和地区选择实例
本文实例讲述了.net采用ajax实现邮箱注册和地区选择的方法。分享给大家供大家参考。具体实现方法如下：
首先要知道Ajax是AsynchronousJavaScriptandXML（以及DHTML等）的缩写.
ajax就是在浏览器上同服务器实现异步交互。在XMLhttpRequest被广泛使用之前，用户停留在页面上没有办法实现局部更新的功能，只能通过刷新整个页面来获取最新的数据，而由此代码的代价是需要传输大量的数据，而且有可能临时的一些用户信息也会丢失，而ajax的使用实现了局部更新页面内容的作用，原理是调用XMLhttpRequest这个代理，向服务发送请求，之后通过ajax定义的处理接口来更新页面的内容。
接下来用ajax实现邮箱注册和地区选择实例来说明：
首先前台部分：
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="WebApplication2._Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>ajax的初步练习使用</title>
<styletype="text/css">
div{width:800px;margin:0auto;height:25px;}
</style>
<scripttype="text/javascript">
functioncreateRequest()//创建对象
{
varrequest;
try
{
request=newXMLHttpRequest();
}
catch(microspft)
{
try
{
request=newActiveXObject("Msxml2.XMLHTTP");
}
catch(othermicrosoft)
{
try
{
request=newActiveXObject("Microsoft.XMLHTTP");
}
catch(failed)
{
request=null;
}
}
}
returnrequest;
}
varreq=null;//注册邮箱
functionsendRequest()//发送请求
{
if(document.forms[0].useremail.value=="")
{
alert("用户邮箱不可为空！");
document.forms[0].useremail.focus();
returnfalse;
}
req=createRequest();//创建Ajax请求对象
req.open("GET","default.aspx?Email="+document.forms[0].useremail.value);
req.send("");//打开服务器连接，发送请求
req.onreadystatechange=dealMethod;//设置服务器响应完成后要运行的函数
}
functiondealMethod()//调用函数
{
if(req.readyState==4&&req.status==200)//此时是服务器已经响应完成状态
{
if(req.responseText=="0")//responseText为服务器响应值属性
document.getElementById("canuse").innerHTML="<imgsrc='//img.jbzj.com/file_images/article/201410/icon_need.gif'/>"+"该邮箱已注册";
else
document.getElementById("canuse").innerHTML="<imgsrc='//img.jbzj.com/file_images/article/201410/icon_error.gif'/>"+"该邮箱未注册";
}
}
varreq2=null;//初始化下拉框
functionGetSelect()
{
req2=createRequest();
req2.open("GET","default.aspx?Selected=1");
req2.send("");
req2.onreadystatechange=changeSelected;
}
functionchangeSelected()
{
if(req2.readyState==4&&req2.status==200)
{
vars=req2.responseText;
varprovinces=s.split('&')[0].split('|');//在后台返回字段中获得省份子列如(1，河南),(2，江西)等
varcities=s.split('&')[1].split('|');//在后台返回字段中获得城市子列如(1，郑州),(2，洛阳),(3，开封)等
document.forms[0].province.length=0;
for(vari=0;i<provinces.length;i++)
{
varop=newOption();
op.value=provinces[i].split(',')[0];
op.text=provinces[i].split(',')[1];
document.forms[0].province.options.add(op);//将省份编号和省份名分别以value和text的形式添加到select下的option里面
}
document.forms[0].city.length=0;
for(varj=0;j<cities.length;j++)
{
varop2=newOption();
op2.value=cities[j].split(',')[0];
op2.text=cities[j].split(',')[1];
document.forms[0].city.options.add(op2);//将城市编号和城市名分别以value和text的形式添加到select下的option里面
}
}
}
varreq3=null;//改变省份触动城市的改变
functionGetCity()
{
req3=createRequest();
req3.open("GET","default.aspx?ProId="+document.forms[0].province.value);
req3.send("");
req3.onreadystatechange=changeCity;
}
functionchangeCity()
{
if(req3.readyState==4&&req3.status==200)
{
vars=req3.responseText;
varcities=s.split('|');
document.forms[0].city.length=0;
for(vari=0;i<cities.length;i++)
{
varop=newOption();
op.value=cities[i].split(',')[0];
op.text=cities[i].split(',')[1];
document.forms[0].city.options.add(op);
}
}
}
</script>
</head>
<body>
<formid="form1"runat="server">
<tablealign="center">
<tr>
<th>Email</th>
<th><inputtype="text"name="useremail"value=""/></th>
<thid="canuse"></th>
<th></th>
</tr>
<tr>
<th><selectname="province"onchange="GetCity();"></select></th>
<th><selectname="city"></select></th>
<th><inputtype="button"value="注册"onclick="sendRequest();"/></th>
</tr>
</table>
</form>
</body>
<scripttype="text/javascript">
GetSelect();
</script>
</html>
然后是后台部分：
publicpartialclass_Default:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
if(Request.QueryString["Email"]!=null)//注册邮箱
{
//通常情况下，这里的数据来源应该是从某一个数据库里面读取的，这里为了方便就随便的定义了一个死板的数据代替了 stringbbb="2320774925@qq.com"; stringaaa=Request.QueryString["Email"]; if(aaa==bbb) Response.Write("0"); else Response.Write("1"); Response.End(); } //常规情况下，接下来的两个处理部分应该用到两张数据表 if(Request.QueryString["Selected"]!=null)//初始化下拉框 {
//通常情况下这里的数据应该是从数据库里面读取的，然后获取到省份编号为1对应下的所有城市编号和城市名称，接着按照某些方法首先将省份表里面的两列数据组合成形如"1,河南|2,浙江|3,湖北|4,江苏|5,安徽|6,山东|7,江西“这样的字符串，最后加上省份编号为1对应下的所有城市编号和城市名称最终形成形如"1,河南|2,浙江|3,湖北|4,江苏|5,安徽|6,山东|7,江西&1,郑州|2,洛阳|3,开封|4,信阳|5,南阳|6,驻马店|7,安阳|8,鹤壁|9,濮阳|10,平顶山"这样的一列字符串回传到前端 stringresult="1,河南|2,浙江|3,湖北|4,江苏|5,安徽|6,山东|7,江西&1,郑州|2,洛阳|3,开封|4,信阳|5,南阳|6,驻马店|7,安阳|8,鹤壁|9,濮阳|10,平顶山"; Response.Write(result); Response.End(); } if(Request.QueryString["ProId"]!=null)//改变省份触动城市的改变 {
//通常情况下这里的数据依然应该是从数据库里面读取的，在前端部分，初始化了下拉框之后，所有的省份将被填充到province下拉框中，省份编号为1的所有城市也将被填充到city下拉框中，此时，当你重新选择省份的时候，服务器将会接收到一个新的数据，其实这个数据也就是所谓的省份编号了，然后这里通过这个省份编号获得对应下的所有城市编号和城市名称，通过一定的方法处理最终获得形如"1,郑州|2,洛阳|3,开封|4,信阳|5,南阳"这样的字符串回传给前端 intnum=Int32.Parse(Request.QueryString["ProId"]); if(num==1) Response.Write("1,郑州|2,洛阳|3,开封|4,信阳|5,南阳"); if(num==2) Response.Write("1,杭州|2,宁波|3,温州|4,嘉兴|5,湖州"); if(num==3) Response.Write("1,武汉|2,黄石|3,十堰|4,宜昌|5,荆州"); if(num==4) Response.Write("1,南京|2,无锡|3,徐州|4,常州|5,苏州"); if(num==5) Response.Write("1,合肥|2,芜湖|3,蚌埠|4,淮南|5,马鞍山"); if(num==6) Response.Write("1,济南|2,青岛|3,淄博|4,枣庄|5,东营"); else Response.Write("1,南昌|2,景德镇|3,萍乡|4,九江|5,新余"); Response.End(); } } }