asp.net2.0基于flex3.0的ajax登录验证（MXML和XML）(菜鸟分享)

编程有钱人了 2008-10-14 10:55:21

刚接触的flex3.0 好不容易自己做了个登陆模拟，和大家分享
本来想用微软的svilerlight的来，但是我不会，就用ADOBE的FLEX3.0吧！

演示地址：http://www.100w100d.cn/testflexlogin/bin-debug/testflexlogin.html

演示的账号和密码都是：admin

先建一个flex3.0工程名叫testflexlogin
先看我的flex工程目录

然后看代码.由于代码没有MXML格式的我就用JS来写

testflexlogin.mxml



<?xml version="1.0" encoding="utf-8"?> 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  

    creationComplete="initApp()" fontSize="14"> 

         <mx:states> 

     <!--新建“index”State--> 

  <mx:State name="index"> 

      <!--移除“登录框”--> 

   <mx:RemoveChild target="{panel1}"/> 

   <!--添加新的组件--> 

   <mx:AddChild position="lastChild"> 

    <mx:Label x="231" y="174" text="欢迎来到主页" fontFamily="Georgia" fontSize="20" /> 

   </mx:AddChild> 

  </mx:State> 

 </mx:states> 

 <mx:Script> 

  <![CDATA[ 

      import mx.controls.Alert; 

      import mx.rpc.events.ResultEvent; 

      private function initApp():void 

      { 

       //显示校验码 

        

         lblCheckCode.text=GenerateCheckCode();  

      } 

   private function loginHandle():void 

   { 

    //发送数据到你想验证的页面 

     httpser.url="http://www.100w100d.cn/Default.aspx";   

     //空的情况 

    if(txtUsername.text!=""&&txtPassword.text!="") 

    { 

         if(txtCheckCode.text=="") 

         { 

           Alert.show("校验码不能空!","信息提示！"); 

           return; 

         } 

         else 

          { 

         if(txtCheckCode.text.toLowerCase()!=lblCheckCode.text.toLowerCase()) 

          { 

            Alert.show("校验码错误!","信息提示！"); 

            //重新生成校验码 

            lblCheckCode.text=GenerateCheckCode();  

            return; 

          } 

          else 

          { 

             httpser.url+="?"; 

             httpser.url+="username="+this.txtUsername.text.toString()+"&"; 

             httpser.url+="userpwd="+this.txtPassword.text.toString(); 

          } 

          httpser.send(); 

     } 

    } 

    else 

    { 

         Alert.show("请输入完整数据!","信息提示！"); 

    }  

   } 

   private function resetHandle():void 

   { 

    txtUsername.text=""; 

    txtPassword.text=""; 

    txtCheckCode.text=""; 

   } 

             

            //生成随机码 

   private function GenerateCheckCode():String 

   { 

    //初始化 

    var ran:Number; 

    var number:Number; 

    var  code:String; 

    var checkCode:String =""; 

    //生成四位随机数 

    for(var i:int=0; i<4; i++) 

    { 

     //Math.random生成数为类似为0.1234 

     ran=Math.random(); 

     number =Math.round(ran*10000);  

     //如果是2的倍数生成一个数字 

     if(number % 2 == 0) 

       //"0"的ASCII码是48   

       code = String.fromCharCode(48+(number % 10));  

     //生成一个字母 

     else   

       //"A"的ASCII码为65 

       code = String.fromCharCode(65+(number % 26)) ; 

     checkCode += code; 

    } 

    return checkCode; 

   } 

private function httpHandle(e:ResultEvent):void //执行<mx:HTTPService>组件后的处理函数 

{ 

    var xx:Number; 

    xx=Number(e.result.ComputeResult); 

    if(xx>0) 

    { 

     Alert.show("OK,你成功登陆！","信息提示！");    

    

    } 

    else 

    { 

     Alert.show("密码不正确！","信息提示！");   

    } 

    } 

  ]]> 

 </mx:Script> 

 <mx:HTTPService id="httpser" showBusyCursor="true" result="httpHandle (event);" useProxy="false"/> 

<mx:Panel x="350" y="80" width="350" height="257" layout="absolute" title="用户登录" fontFamily="宋体"  



fontSize="12" id="panel1"> 

  <!--  "用户名"标签  --> 

  <mx:Label x="41.5" y="33" text="用户名："/>  

  <!--  "密码"标签  -->    

  <mx:Label x="42.5" y="81" text="密码："/>  

  <!--  "用户名"输入框  -->     

  <mx:TextInput x="94.5" y="33" id="txtUsername"/>   

  <!--  "密码"输入框  --> 

  <mx:TextInput x="95.5" y="81" id="txtPassword" displayAsPassword="true"/> 

  <!--  "登录"按钮  -->  

  <mx:Button x="82.5" y="159" label="登录" id="btnLogin" click="loginHandle()"/>  

        <!--  "重置"按钮  -->  

  <mx:Button x="181.5" y="159" label="重置" id="btnReset" click="resetHandle()"/>  

  <!--  "校验码"标签  -->  

  <mx:Label x="165.5" y="125" id="lblCheckCode" width="42.5" color="#377CD0"/> 

  <mx:LinkButton x="216" y="123" label="看不清楚?" id="linkbtnReGenerate" click="lblCheckCode.text=GenerateCheckCode();" fontFamily="宋体" fontSize="12"/> 

  <mx:Label x="39.5" y="123" text="校验码"/> 

  <!--  "校验码"输入框  -->  

  <mx:TextInput x="96.5" y="121" id="txtCheckCode" width="61" maxChars="4"/> 

 </mx:Panel> 

</mx:Application>

然后新建个asp.net工程
把flex整个工程放到asp.net根目录下

default.aspx.cs



using System; 

using System.Data; 

using System.Configuration; 

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; 



public partial class _Default : System.Web.UI.Page  

{ 

    protected void Page_Load(object sender, EventArgs e) 

    { 

        string username = Request.QueryString["username"].ToString(); 

        string pwd = Request.QueryString["userpwd"].ToString(); 

        if(username=="admin"&&pwd=="admin") 

        { 

            //返回XML数据。元素标签为<ComputeResult>。 

            Response.Write("<ComputeResult>" +"1"+ "</ComputeResult>");//返回1表示成功！ 

       } 

    } 

}