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搞定
简单吧!有什么不足的地方请大家指点一下!
本来想用微软的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搞定
简单吧!有什么不足的地方请大家指点一下!
相关文章推荐
- ASP.NET基于JQUERY的AJAX的验证登录(JSON)
- 基于ajax的简单的登录验证
- ajax学习之1-登录验证之-xml
- ASP.NET基于JQUERY的AJAX的验证登录(JSON)
- MVC登录ajax验证 随笔记录
- SpringMVC+Apache Shiro+JPA(hibernate)案例教学(二)基于SpringMVC+Shiro的用户登录权限验证
- 基于OAuth2.0的登录验证授权方式获取sessionkey
- 【唯星宠物】——BootStrap/Mysql/PHP/Ajax爬坑之正则验证登录注册子页
- Extjs与struts2整合,ajax请求登录验证
- 基于jQuery实现的Ajax 验证用户名是否存在的实现代码
- 完整的 dataType=text/plain jquery ajax 登录验证
- 基于CAS实现单点登录(SSO):自定义登录验证方法
- 一个可以基于Ajax提交的表单验证
- Comet4J(Comet for Java)是一个纯粹基于AJAX(XMLHTTPRequest)的服务器推送框架,消息以JSON方式传递,具备长轮询、长连接、自动选择三种工作模式。
- 通过配置http拦截器,来进行ajax请求验证用户登录的页面跳转
- JQuery遮罩层登录界面实现(AJAX+ASP.NET实现登录验证,源码下载)
- Ajax 和 JavaScript 验证用户登录
- XMLHttpRequest方式的Ajax的用户名验证
- 利用ajax实现登录:验证完用户信息后如何保存用户信息并实现跳转
- Ajax实现用户登录验证--原生JavaScript使用POST方法