您的位置:首页 > 编程语言 > ASP

asp.net2.0基于flex3.0的ajax登录验证(MXML和XML)

2008-10-14 09:50 302 查看
刚接触的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表示成功!

       }

    }

}

ok搞定
简单吧!有什么不足的地方请大家指点一下!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息