当前位置: 首页 > 编程日记 > 正文

【转】Flex4:利用HttpService与ASP.NET传输JSON数据(登录为例)

开发环境:Flash Builder4,Vs2005

1、首先打开FlashBuilde4,创建一个名为HttpService_Net_Json的flex项目

new_flex_project_1.jpg

(图1)

然后下一步,应用程序类型选择web,应用程序服务器类型选择ASP.NET(如图2)

project_step1.jpg

(图2)

下一步,出现配置ASP.NET服务器的设置。我们选择使用IIS,web应用程序根目录选择你IIS下的某个网站所在文件夹,web应用程序URL设置为你网站的本地地址。注意要确保你当前IIS中已经有此对应的网站。然后我们点击"验证配置",提示"web 应用程序根目录和URL有效"(如图3)。OK。表示服务器通了。

validate_server_success.jpg

(图3)

下一步我们选择框架连接为"运行时共享库(RSL)"(如图4),这样可提高Flex发行版的flash加载速度,点击完成。项目就建好了。

select_frame.jpg

(图4)

2、界面设计。这块我不多叙述。跟VS开发环境类似。Flash Builder4内置了丰富的组件。我们将一些Lable、Button、LinkButton、Image、TextInput组件拖到工作区,同时Fb4支持CSS。我们新建一个Login.css的样式表,对一些组件进行样式控制。最后成型的界面如下图5。

design.jpg

3、提交数据。

我们要实现一个很简单的逻辑-登录。当用户输入用户名和密码,按下"登陆"按钮后,从服务器端返回成功的标志则跳转到default.aspx页面,否则弹出登陆失败的相关消息。

我们采用HtttService与Asp.NET进行交互,服务器端返回JSON格式的数据,Flex客户端进行解析后进行相关操作。

首先我们建立一个HttpService(放在delcarations之间)。设置id,提交到的URL,提交方式为POST,resultFormat为Text,返回结果后的任务分配给LoginHandle(event).

resutl属性简单点就是当返回结果后,通知客户端要做的事情。我们分配给一个loginHandle(event)来处理,成功就跳转,不成功就弹出提示。

mx:resquest是设置需要提交的数据。Flex传递的是成对出现的object.所以我们必须设置键和键值。我们这里只需提交userName和password。注意这里<userName>和<password>节是区分大小写的,同时要与aspx.cs文件中的Request中的key对应。比如这边是userName,那么cs文件中就是Request['userName']。

ContractedBlock.gifExpandedBlockStart.gif代码
    <fx:Declarations>
        
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
        
<mx:HTTPService id="loginService" url="/ajax/login.aspx"  method="POST" resultFormat="text" result="loginHandle(event)">
            
<mx:request xmlns=""> 
                
<userName>{username.text}</userName> 
                
<password>{password.text}</password> 
            
</mx:request>            
        
</mx:HTTPService>
    
</fx:Declarations>

好了,一切都准备就绪了。那我们就开始点击Id为LoginButton的按钮来进行提交吧。切换到"设计"视图,在click属性里,点击旁边的+

开发环境会自动给我们生成一个btnLogin_clickHandler(event)方法(如图)。是不是和visual studio很像呢?太方便了

autofunction.jpg

我们再切换到“源代码”视图,看看发生了什么变化。

button按钮多了click属性

<s:Button x="220" label="登陆" height="60" y="90" alpha="1.0" id="btnLogin" fontFamily="Arial" styleName="button"  click="btnLogin_clickHandler(event)"/>

fx:script之间多了一个function  btnLogin_clcikHandler

<fx:Script>
<![CDATA[
protected function btnLogin_clickHandler(event:MouseEvent):void
{
}
]]
>
</fx:Script

ok.完善一下这个方法。加入简单的数据验证,然后HttpService提交。

ContractedBlock.gifExpandedBlockStart.gif代码
            protected function btnLogin_clickHandler(event:MouseEvent):void
            {
                
// 提交登陆时
                if(username.text=="" || password.text==""){
                    Alert.show(
"用户名或密码不能为空","提示");return;
                }
                loginService.send();                
            }

4、处理返回数据。首先我们提交到的ajax/login.aspx.cs代码如下。在此我们简单化没有连接数据库,直接判断userName是否为123,密码是否为456。匹配则登陆成功

返回结果为诸如{"success":"0","msg":"用户名错误"}这样的严格的JSON格式,即属性和值必须都有双引号。为什么要强调是严格的JSON格式呢,因为发现FLex的JSON库对非严格的格式的JSON格式解析不成功。比如{"success":0,"msg":"用户名错误"},{success:0,"msg":"用户名错误"}。但是使用过ExtJS的朋友知道。这样的格式ExtJS是能解析的。我用的JSON库是

http://as3corelib.googlecode.com/files/as3corelib-.93.zip,里的as3corelib.swc(下载后放到fb安装目录下的sdks\4.0.0\frameworks\libs)。不知是版本问题还是什么。还请各位不吝赐教。

ContractedBlock.gifExpandedBlockStart.gif代码
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Clear();
            
string name = Request.Form["userName"].ToString();
            
string pwd = Request.Form["password"].ToString();
            
if (name!="123")
            {
                Response.Write(
"{\"success\":\"0\",\"msg\":\"用户名错误\"}");

            }
            
else
            {
                
if (name=="123" && pwd="456")
                {
                    Response.Write(
"{\"success\":\"1\",\"msg\":\"ok\"}");
                }
                
else
                {
                    Response.Write(
"{\"success\":\"0\",\"msg\":\"密码错误\"}");
                }
            }
            Response.End();
        }

好了。服务器端的JSON格式文本组织好了。那么flex客户端该如何处理呢,看下面

先将返回的结果event.result转化为String。然后对其进行JSON编码。最后判断success属性

ContractedBlock.gifExpandedBlockStart.gif代码
            protected function loginHandle(event:ResultEvent):void{
                var rawData:String
=String(event.result);
                var obj:Object
=JSON.decode(rawData,false);
                
if(obj.success=="1"){
                    navigateToURL(
new URLRequest("/default.aspx"),"_self");
                }
                
else{
                    Alert.show(obj.msg,
"提示");
                }
            }

OK,一切就绪。最后我们将flex导出发行版本,以便在html或aspx文件中调用生成的swf文件。附上整个工程和aspx文件。

/Files/showker/httpwebservice_net_json包.rar

login.aspx。登陆页面加载swf.

ajax/login.aspx。处理逻辑返回JSON字符串

HttpService_Net_Json。flex发行版本,login.aspx即调用里面的swf文件

HttpService_Net_Json_Project。flex项目。可在flash builder4中导入进行编辑

本文转自:http://www.cnblogs.com/showker/archive/2010/07/24/1784221.html

转载于:https://www.cnblogs.com/aooyu/archive/2010/09/19/1831297.html

相关文章:

使用Node.js写一个简单的api接口

引入Http模块 默认你已经安装了Node.js Node当中内置了Http模块&#xff1b; 可以使用 var http require("http"); 复制代码引入http模块&#xff1b; Hello world 用Node.js实现一个HTTP服务器程序非常简单。我们实现一个最简单的Web程序&#xff0c; 它对于所有请求…

body,td,th {

三、继承中容易引起的错误有时候继承也会带来些错误&#xff0c;比如说下面这条css定义&#xff1a; body{color:blue} 在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说&#xff0c;这是不正确的&#xff0c;但是它确实存在。所以我们经常需要借助于某些技巧…

JavaScript实现 按钮不可过频繁使用

主要用到setInterval和clearInterval方法和一个计时变量。 效果 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta na…

二十分钟教你如何将区块链应用与函数计算相结合

前言 本篇文章适合对区块链应用感兴趣或是想要通过函数计算服务进一步开发区块链应用的新人。本文将结合阿里云区块链服务、阿里云函数计算服务、阿里云日志服务 以及社区应用 Marbles&#xff0c;手把手教大家如何将阿里云区块链服务与阿里云函数计算服务相结合&#xff0c;并…

【转】推荐!国外程序员整理的Java资源大全

构建 这里搜集了用来构建应用程序的工具。 Apache Maven&#xff1a;Maven使用声明进行构建并进行依赖管理&#xff0c;偏向于使用约定而不是配置进行构建。Maven优于Apache Ant。后者采用了一种过程化的方式进行配置&#xff0c;所以维护起来相当困难。Gradle&#xff1a;Grad…

科研成果汇总:收获的季节

感谢课题组各届成员(2006&#xff5e;2010级)长期不懈的努力与付出&#xff0c;特别感谢目前仍工作在第一线的各位成员的鼎力配合与协作&#xff0c;大家辛苦了&#xff01;同时&#xff0c;还要感谢研究所对我们组的大力支持与帮助&#xff01;谢谢大家&#xff01; BTW&#…

JavaScript 利用location对象实现跨页面传参

需求简述&#xff1a; 两个页面login.html和homepage.html&#xff0c;在login页输入用户名&#xff0c;点击登录会跳转到主页&#xff0c;主页拿到login页输入的用户名 实现思路&#xff1a; 1. 跳转&#xff1a;修改location.html 2. 拿参&#xff1a;处理location.searc…

编译u-boot时候,make distclean 出现rm:无法删除,****是一个目录

今天在编译u-boot的时候&#xff0c;make distclean&#xff0c;出现了rm:无法删除 "include/asm-arm/arch": 是一个目录。经过查看网友的解决办法&#xff0c;已经解决了。 具体解决办法&#xff1a;在uboot顶层有个mkconfig文件&#xff0c;vim打开后&#xff0c;在…

[转载]MaxtoCode对.Net程序加密的原理及解密探讨三(实例解密)

标 题: 【原创】MaxtoCode对.Net程序加密的原理及解密探讨三&#xff08;实例解密&#xff09;作 者: rick时 间: 2006-09-29,23:16:28链 接: http://bbs.pediy.com/showthread.php?t32658上一回我们试验了通过反射的方式获取method的源代码。这次我们就用一个实例来演示dump一…

MyEclipse教程:Web开发——创建Web片段项目

MyEclipse 在线订购年终抄底促销&#xff01;火爆开抢>>MyEclipse最新版下载本教程向用户展示了使用关联的Web项目创建Web片段项目的机制。 用户还可以获得要检查的示例项目。 在本教程中&#xff0c;用户将学习如何&#xff1a;创建Web片段和关联的Web项目部署并测试包含…

JavaScript 实现鼠标移动时实时获取其相对盒子的偏移

实现思路&#xff1a; 1. 获得盒子相对于页面的偏移量 div.offsetTop和div.offsetLeft 2. 获得鼠标相对于页面的偏移量 e.pageY和e.pageX 3. 前两者相减即可获得鼠标相对于盒子上沿和左侧的偏移 4. 使用鼠标移动事件 mousemove 实现效果&#xff1a; 代码 <!DOCTYPE h…

H.264 picture parameter sets成员值含义学习笔记

-picture parameter sets1. pic_parameter_set_idpic_parameter_set_id指明了在切片头中对应的某个psp.pic_parameter_set_id的值应该在0到255,包括0和2552. seq_parameter_set_idset_parameter_set_id表示激活的sps.seq_parameter_set_id应该取值在0到31之间,包括边界值.3. en…

软件开发进度管理

一、什么是软件项目管理  软件项目管理是按需求确定范围、按目标制定项目计划、按计划执行管理的过 程。对软件开发各阶段加强项目管理的根本目的在于增强对软件开发的控 制能力&#xff0c;提升软件开发的质量。软件项目的建设按软件工程的生命周期法可分为项目立项、启动、…

SQLServer之ISO游标使用

什么是游标 结果集&#xff0c;结果集就是select查询之后返回的所有行数据的集合。 游标则是处理结果集的一种机制吧&#xff0c;它可以定位到结果集中的某一行&#xff0c;多数据进行读写&#xff0c;也可以移动游标定位到你所需要的行中进行操作数据。 一般复杂的存储过程&am…

JavaScript实现鼠标拖拽登录框

拖拽的本质是登录框获得光标的偏移来调整自身的偏移。 拖拽发生时&#xff0c;光标相对盒子的坐标不会变化&#xff0c;相对于页面的坐标却在变化&#xff0c;二者的差值就是盒子需要的。 两个注意点&#xff1a; 1. 赋值给盒子的什么属性 outer.style.top e.pageY - y p…

c++ STL容器初探

什么是容器 首先&#xff0c;我们必须理解一下什么是容器&#xff0c;在C 中容器被定义为&#xff1a;在数据存储上&#xff0c;有一种对象类型&#xff0c;它可以持有其它对象或指向其它对像的指针&#xff0c;这种对象类型就叫做容器。很简单&#xff0c;容器就是保存其它对…

flutter开发中常用的dart插件

flutter插件官网地址&#xff1a;https://pub.dartlang.org/packages/ 1. image_picker 一个可以从图库选择图片&#xff0c;并可以用相机拍摄新照片的flutter插件 2. flutter_image 使用NetworkImageWithRetry 代替Image.network 加载网络图片可获得重试能力。 3. barcode_sca…

XML(eXtensible Markup Language)文件的解析

XML与HTML一样&#xff0c;文件中除了根节点以外&#xff0c;整个文件包含一个隐含根“/”,所以我们在解析文件同时一般采用XPath语法进行解析时&#xff0c;一般首先要以反“/”开始。 转载于:https://www.cnblogs.com/hibernate3-example/archive/2010/10/20/2492356.html

JavaScript 立即执行函数的两种写法

(function(str){console.log(str欢迎你~);})(行步至春深);(function(str) {console.log(str欢迎你~);}(行路易知难)); 可以看到&#xff0c;每种写法都比平常多出两个小括号&#xff0c;其中一个可以看作是调用&#xff0c;里面装参数&#xff0c;另一个可以看作防止语法错误。…

【Android动画】之Tween动画 (渐变、缩放、位移、旋转)

Android 平台提供了两类动画。 一类是Tween动画&#xff0c;就是对场景里的对象不断的进行图像变化来产生动画效果&#xff08;旋转、平移、放缩和渐变&#xff09;。 第二类就是 Frame动画&#xff0c;即顺序的播放事先做好的图像&#xff0c;与gif图片原理类似。 下面就讲一下…

Mac下PHP7.1+Nginx安装和配置

https://blog.csdn.net/haiyanggeng/article/details/79186982 PHP&#xff1a;7.1.13Nginx&#xff1a;1.12.2 1. 安装PHP# 添加源brew tap homebrew/dupesbrew tap homebrew/versionsbrew tap homebrew/homebrew-php#更新源brew update#安装brew install php71 --with-imap -…

黑木耳的功效是什么

黑木耳&#xff0c;生长在朽木上&#xff0c;形似人的耳朵&#xff0c;色黑或褐黑&#xff0c;故名黑木耳&#xff0c;又名木菌、树鸡。黑木耳营养极为丰富&#xff0c;据史料记载&#xff0c;它是上古时代帝王独享之佳品&#xff0c;含有大量的碳水化合物、蛋白质、铁、钙、磷…

Javascript 移动的海绵宝宝

效果描述&#xff1a; 做一个简单的动画效果&#xff0c;刚刷新页面时&#xff0c;SpongeBob在页面的左上角位置&#xff0c;随着时间推移&#xff0c;他匀速向右移动&#xff0c;直到右侧抵达页面右侧停下来。 分析&#xff1a; SpongeBob作为一张图片被存放在<img>里…

sqlserver任务导出Excle

--sql语句就用下面的存储过程 /*--数据导出Excel 导出查询中的数据到Excel,包含字段名,文件为真正的Excel文件,如果文件不存在,将自动创建文件,如果表不存在,将自动创建表基于通用性考虑,仅支持导出标准数据类型 使用方法&#xff1a; 直接复制执行创建储存过程-&#xff0d;陈…

Oracle集合操作

Oracle集合操作 UNION&#xff1a;并集&#xff0c;所有的内容都查询&#xff0c;重复的显示一次 UNION ALL&#xff1a;并集&#xff0c;所有的内容都显示&#xff0c;包括重复的 INTERSECT&#xff1a;交集&#xff1a;只显示重复的 MINUS&#xff1a;差集&#xff1a…

Mongodb 4.0+安装

mongodb 4.0&#xff1a;windows 环境选择默认安装路径&#xff1b;存储文件夹自定义&#xff1a; 1.原配置文件删除.mp2.data下新建db文件夹 Mongod -- dbpath D:MongoDB/data3.&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;close windows防火墙&#xff08;…

JavaScript 慢慢移动的海绵宝宝

前情提要&#xff1a;Javascript 移动的海绵宝宝 这个海绵宝宝是匀速运动、突然停下来的&#xff0c;有点不合理。现实中我们跑步都是速度慢慢减小到0。 要实现这个效果&#xff0c;就必须速度逐渐减小&#xff0c;本质上是盒子的步长逐渐减小。 step (targetLocation - nowL…

Linux(CentOS)目录操作命令、文件操作命令、压缩解压缩命令

一、目录操作命令  ls命令    — 功能说明&#xff1a;显示文件和目录列表。    — 命令格式&#xff1a;ls [参数] [<文件或目录> …]    — 常用参数&#xff1a;      -a : 不隐藏任何以“.”字符开始的条目。      -b : 用八进制形式显示非打…

阿里巴巴持续投入,etcd 正式加入 CNCF

2018 年 12 月 11 日&#xff0c;在 KubeCon CloudNativeCon 北美峰会上&#xff0c;etcd 项目正式加入云原生计算基金会&#xff08;CNCF&#xff09;。CNCF 是一个厂商中立的基金会、云原生技术推广和普及的领导者。 etcd 在 2013 年由李响&#xff0c;Brandon Philips, Al…

小机上监控AIX和数据库管理系统的运行情况直到性能优化(SQL语句优化和排除硬件问题)...

AIX下的命令 1)topas 检测操作系统的运行状况 2)nmon(c--cpu,m--memory,d--disk) 检测这3个的情况 ORACLE下的命令 提示&#xff1a;下面这些视图都是实时监控生产机上数据库的情况查询结果每个时刻都随数据库系统当时的情况在变化 &#xff08;1&#xff09; selectopname,…