.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(); } } }