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

news/2024/7/8 0:13:58

开发环境: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


http://lihuaxi.xjx100.cn/news/281396.html

相关文章

zoom:1是什么意思

当一个容器内元素都浮动后&#xff0c;它将高度将不会随着内部元素高度的增加而增加&#xff0c;所以造成内容元素的显示超出了容器。 overflow:auto;是让高度自适应&#xff0c; zoom:1;是为了兼容IE6&#xff0c;也可以用height:1%;的方式来解决1、浮动 浮动是CSS中用到的最多…

JavaScript初学者编程题(13)

JavaScript初学者编程题(13) 题目&#xff1a;输入一行字符&#xff0c;分别统计出其中英文字母、空格、数字和其它字符的个数。 HTMl部分 <input type"text" id"str"><button onclick"getTheNum()">get</button>JavaScript…

SpringBoot第九篇: springboot整合Redis

这篇文章主要介绍springboot整合redis&#xff0c;至于没有接触过redis的同学可以看下这篇文章&#xff1a;5分钟带你入门Redis。引入依赖&#xff1a;在pom文件中添加redis依赖&#xff1a;<dependency><groupId>org.springframework.boot</groupId><art…

Google 确认 Chrome 存在严重漏洞,向 20 亿用户发出警告:你们需立即更新浏览器...

作者&#xff1a;okay来源&#xff1a;扩展迷EXTFANS近日&#xff0c;Google面向二十亿Chrome浏览器用户推出至关重要的补丁程序&#xff0c;并再次强调大家需要立即更新其浏览器。如果你在Mac&#xff0c;Windows 10或Linux计算机上使用的是Google Chrome浏览器&#xff0c;则…

一文让你明白 Git 分支是如何工作的

分支是 Git 版本跟踪的核心功能&#xff0c;并且经常被使用相同软件代码库的团队使用。我们将深入研究它们如何在幕后工作&#xff0c;以及如何使用它们来改进 Git 工作流程。什么是分支&#xff1f; 分支用于拆分 Git 历史记录。您可以将 Git 提交想象成一系列可以追溯到过去…

CRF学习笔记

HMM&#xff0c;CRF等真的是很难很难啊 本科看不懂 研究生还是看不懂 然而为了找工作&#xff0c;拼了↖(^ω^)↗ https://www.zhihu.com/question/35866596 知乎上简单易懂的(&#xff89;*&#xff65;ω&#xff65;)&#xff89;推导&#xff0c;但是还是没有看懂 &#…

JavaScript初学者编程题(14)

JavaScript初学者编程题(14) 题目&#xff1a;求saaaaaaaaaaaa…a的值&#xff0c;其中a是一个数字。例如222222222222222(此时共有5个数相加)&#xff0c;几个数相加有键盘控制。 HTMl部分 <input type"text" id"what" placeholder"哪个数"…

知识体系、算法题、教程、面经,这是一份超赞的AI资源列表

整理 | 夕颜出品 | AI科技大本营&#xff08;ID:rgznai100&#xff09;导读&#xff1a;近日&#xff0c;有人在 GitHub 上开源了一个名为“Awesome Interview”的技术面试集锦&#xff0c;前端、后端、算法、客户端、语言、简历制作、面试经验等各种技术人面试需要的资料一应俱…