简单介绍信Flex与Web服务的交互

简单介绍信Flex与Web服务的交互

主要内容:

1.ActionScript与服务端的基本交互方式(REST).

2.ActionScript特有的数据传输格式(AMF)与服务器交互.

3.Flex与WebService.



要实现ActionScript与服务端交互, 首先必须知道以下几个类:

URLRequest类

记录请求服务端的URL信息, 给URLLoader进行发送操作.

URLVariables类

保存向服务端请求所需的参数, 一般用于POST方式传输,GET方式传输不需要使用.

URLRequestMethod类

该类只有两个静态常量值, 一个是POST, 一个是GET, 可以把它当作是一个枚举类型, 用于指定URL请求时使用POST方式或是GET方式.

URLLoader类

真正与服务端打交道的类, 通过load方法把一个Reuqest发送给服务端, 在load之前必须给该对象添加一个Complete事件的监听器,接收服务器返回的信息. 传输过程中有可能产生IO错误, 有必要时可以为该对象添加IOError监听器.



例子:

var request: URLRequest = new URLRequest("http://localhost");

//默认为URLRequestMethod.GET, 若使用GET方式可以不指定

request.method = URLRequestMethod.POST;

//创建一个参数变量对象,用于保存所有向服务发送的参数数据, GET方式可以不使用

var vars: URLVariables = new URLVariables ();

vars["varName"] = varValue; //把参数键,值对放到vars对象中.

vars["var2Name"] = var2Value;

request.data = vars; //把参数对象放进Request对象中作为参数

// 通过request对象创建一个loader,

var loader: URLLoader = new URLLoader(request);

loader.addEventListener( //给loader对象添加完成时的监听器.

Event.COMPLETE,

function(e: Event):void //临时定义一个监听器

{

//服务端返回的数据是保存在loader的data里,通过以下语句可以得到

trace(URLLoader(e.target).data );//在监听器里处理服务端返回的数据

//complete

// process the data;

}

);

loader.addEventListener( //IOError监听器

IOErrorEvent.IO_ERROR,

//临时监听器,IO错误的处理在该函数中处理

function(e: IOErrorEvent): void {/* process the err;*/}

);

loader.load(request);//把request对象发送到服务端.当请求完成,则会自动触发COMPLETE事件



REST实例演示

通过AMF数据格式与服务器交互

什么是AMF?

AMF是Adobe公司制定一套ActionScript与服务端交互的数据格式, Flex本身已经有相关的类可以直接使用,但服务端则需要一个可以解释该格式的包或框架, 幸运的时现在已经存在大部分服务端语言解释AMF格式包与类库, 所以不用担心处理该格式的问题.

通过AMF数据格式与服务器交互

怎样在Flex中使用AMF数据格式进行传输?

在Flex中使用AMF需要通过以下几个类进行:

RemoteObject类, 可以作为Flex中的一个控件使用.

AsyncToken类, 保存一个请求的状态, 给请求添加监听器.

AsyncResponder类, 用于设置请求的两种返回结果, 返回成功或失败

ResultEvent类, 返回成功的事件对象, 返回的数据保存在该对象的result属性里.

FaultEvent类, 返回失败的事件对象, 该对象保存请求失败的所有信息.

通过AMF数据格式与服务器交互

例子(后台采用django + pyAMF):

在Application的MXML文件里创建一个RemoteObject对象

<mx:RemoteObject id="djangoService" destination="myservice"

showBusyCursor="true"/>

Flex编写以下代码：

//djangoService是面上创建一个RemoteObject对象, echo是服务端提供的一个无参数方法, 用于显示信息.

var token:AsyncToken=djangoService.echo();

//调用服务端的方法后返回一个Token对象

// 为Token添加成功与失败的监听器.

token.addResponder(new AsyncResponder(AfterEchoRet,falutHandler));



通过AMF数据格式与服务器交互

//定义成功与失败的监听器.

private function AfterEchoRet(result:ResultEvent):void{

trace(result.result);

//在这里处理返回的数据.数据保存于result属性中.

}

private function falutHandler(error:FaultEvent):void{

trace(error.message);

}



程序代码就只有这么多, 不过还需要一个Services-config.xml配置文件.

还需要在工程属性里添加一个参数, 设置如下:

通过AMF数据格式与服务器交互

services-config.xml内容如下:

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

<services-config>

<services>

<service id="ananasService" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage">

<destination id="myservice">//需要对应pyAMF服务器上设定的destination 值,必须一致

<channels><channel ref="ananasChannel"/></channels> //对应下面定义的Channel

<properties><source>*</source></properties>

</destination>

</service>

</services>

<channels>

<channel-definition id="ananasChannel" class="mx.messaging.channels.AMFChannel">

<endpoint uri="http://192.168.28.97/pysite/hello/gateway/" class="flex.messaging.endpoints.AMFEndpoint"/> //设置服务器终端URL地址

</channel-definition>

</channels>

</services-config>

RemoteObject的介绍：


view plaincopy to clipboardprint?

1. <mx:RemoteObject> 标签使您可以访问使用 Action Message Format (AMF) 编码的 Java 对象的方法。
2.
3. MXML 语法显示 MXML 语法
4. 隐藏 MXML 语法
5. The <mx:RemoteObject> tag accepts the following tag attributes:
6.
7. <mx:RemoteObject
8. Properties
9. concurrency="multiple|single|last"
10. destination="No default."
11. id="No default."
12. endpoint="No default."
13. showBusyCursor="false|true"
14. source="No default." (currently, Adobe ColdFusion only)
15. makeObjectsBindable="false|true"
16.
17. Events
18. fault="No default."
19. result="No default."
20. />
21.
22. <mx:RemoteObject> can have multiple <mx:method> tags, which have the following tag attributes:
23.
24. <mx:method
25. Properties
26. concurrency="multiple|single|last"
27. name="No default, required."
28. makeObjectsBindable="false|true"
29.
30. Events
31. fault="No default."
32. result="No default."
33. />
34. It then can have a single <mx:arguments> child tag which is an array of objects that is passed in order.
35.
36. endpoint 属性
37.
38. endpoint:String [读写]
39.
40.
41. 此属性可使开发人员在编译或以编程方式创建 ChannelSet 时快速指定 RemoteObject 目标的端点，而无需引用服务配置文件。如果已经为 RemoteObject 服务设置了 ChannelSet，它也可以覆盖现有的 ChannelSet。
42.
43. 如果端点 url 以“https”开头，将使用 SecureAMFChannel；否则将使用 AMFChannel。可以在端点 url 中使用 {server.name} 和 {server.port} 这两个特殊标记，以指定通道应使用用来加载 SWF 的服务器名称和端口。
44.
45. 注意：当创建 AIR 应用程序时该属性是必需的。
46.
47.
48.
49.
50. 实现
51. public function get endpoint():String
52. public function set endpoint(value:String):void
53.
54. showBusyCursor 属性
55.
56. showBusyCursor:Boolean [读写]
57.
58.
59. 如果为 true，在执行服务时会显示忙碌光标。默认值为 false。
60.
61.
62.
63. 实现
64. public function get showBusyCursor():Boolean
65. public function set showBusyCursor(value:Boolean):void

<mx:RemoteObject> 标签使您可以访问使用 Action Message Format (AMF) 编码的 Java 对象的方法。 MXML 语法显示 MXML 语法隐藏 MXML 语法 The <mx:RemoteObject> tag accepts the following tag attributes: <mx:RemoteObject Properties concurrency="multiple|single|last" destination="No default." id="No default." endpoint="No default." showBusyCursor="false|true" source="No default." (currently, Adobe ColdFusion only) makeObjectsBindable="false|true" Events fault="No default." result="No default." /> <mx:RemoteObject> can have multiple <mx:method> tags, which have the following tag attributes: <mx:method Properties concurrency="multiple|single|last" name="No default, required." makeObjectsBindable="false|true" Events fault="No default." result="No default." /> It then can have a single <mx:arguments> child tag which is an array of objects that is passed in order. endpoint 属性 endpoint:String [读写] 此属性可使开发人员在编译或以编程方式创建 ChannelSet 时快速指定 RemoteObject 目标的端点，而无需引用服务配置文件。如果已经为 RemoteObject 服务设置了 ChannelSet，它也可以覆盖现有的 ChannelSet。 如果端点 url 以“https”开头，将使用 SecureAMFChannel；否则将使用 AMFChannel。可以在端点 url 中使用 {server.name} 和 {server.port} 这两个特殊标记，以指定通道应使用用来加载 SWF 的服务器名称和端口。 注意：当创建 AIR 应用程序时该属性是必需的。 实现 public function get endpoint():String public function set endpoint(value:String):void showBusyCursor 属性 showBusyCursor:Boolean [读写] 如果为 true，在执行服务时会显示忙碌光标。默认值为 false。 实现 public function get showBusyCursor():Boolean public function set showBusyCursor(value:Boolean):void

一个简单的使用：

view plaincopy to clipboardprint?

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" implements="laxino.slot.controller.network.IMessageSenderSlot">
3. <mx:Script>
4. <!--[CDATA[
5. public function setAmsEndPoint(address:String):void
6. {
7. ams_player_transaction.endpoint=address;
8. }
9.
10. public function setClient(gameClient:IGameClient):void
11. {
12. var config:IConfig=...; setAmsEndPoint(config.getEndpointForAMS());
13. Security.loadPolicyFile("http://www.xxxx.com/crossdomain.xml");
14. }
15.
16. public function sendToAmsPlayersTransFundin(data:Object, responder:IResponder = null):void
17. {
18. var info:Object = new Object();
19. info= data;
20. info["action"]="fund_in_for_play_game";
21. info["controller"]= "PlayerTransactionHistories";
22. if (responder == null)
23. {
24. responder = new BaseResponder();
25. }
26. //public class BaseResponder extends AsyncResponder
27.
28. var serviceCallToken:AsyncToken = ams_player_transaction.fund_in_for_play_game(info);
29. serviceCallToken.addResponder(responder);
30. }
31. ]]-->
32. </mx:Script>
33.
34. <mx:RemoteObject id="ams_player_transaction" source="PlayerTransactionHistories" destination="rubyamf">
35. <mx:method name="fund_in_for_play_game"/>
36. <!--tell the ams to fund in-->
37. <mx:method name="show_transaction_state"/>
38. <!--ping the ams server check if fund in success-->
39. </mx:RemoteObject>
40. </mx:Canvas>

<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" implements="laxino.slot.controller.network.IMessageSenderSlot"> <mx:Script> <!--[CDATA[ public function setAmsEndPoint(address:String):void { ams_player_transaction.endpoint=address; } public function setClient(gameClient:IGameClient):void { var config:IConfig=...; setAmsEndPoint(config.getEndpointForAMS()); Security.loadPolicyFile("http://www.xxxx.com/crossdomain.xml"); } public function sendToAmsPlayersTransFundin(data:Object, responder:IResponder = null):void { var info:Object = new Object(); info= data; info["action"]="fund_in_for_play_game"; info["controller"]= "PlayerTransactionHistories"; if (responder == null) { responder = new BaseResponder(); } //public class BaseResponder extends AsyncResponder var serviceCallToken:AsyncToken = ams_player_transaction.fund_in_for_play_game(info); serviceCallToken.addResponder(responder); } ]]--> </mx:Script> <mx:RemoteObject id="ams_player_transaction" source="PlayerTransactionHistories" destination="rubyamf"> <mx:method name="fund_in_for_play_game"/> <!--tell the ams to fund in--> <mx:method name="show_transaction_state"/> <!--ping the ams server check if fund in success--> </mx:RemoteObject> </mx:Canvas>

Flex与WebService

u WSDL（Web Service Description Language）Web服务器描述语言是用XML文档来描述Web服务的标准，是Web服务的接口定义语言，通过WSDL，可描述Web服务的三个基本属性：

·服务做些什么——服务所提供的操作（方法）

·如何访问服务——和服务交互的数据格式以及必要协议

·服务位于何处——协议相关的地址，如URL

u Flex本身就拥有支持WebService的类, 常用的是: WebService类,该类已经可以实现对服务端提供的WebService的WSDL数据进行相应的操作.

Flex与WebService

Flex framework 包含mx.rpc.soap.WebService，该类可调用web services方法，首先创建WebService

对象，如下：

var webService:WebService = new WebService( );

每个web service都有一个Web服务描述语言(WSDL)，通过WebService对象的wsdl属性进行定位：

webService.wsdl = "http://www.rightactionscript.com/webservices/FlashSurvey.php?wsdl";



在调用方法之前，必须先用loadWSDL( ) 方法读取wsdl数据：

webService.loadWSDL( );

loadWSDL( ) 方法是异步调用的，因此需要监听是否WSDL数据已经读取完毕，当数据读取完成

时WebService 对象会发出mx.rpc.soap.LoadEvent 事件，如：

webService.addEventListener(LoadEvent.LOAD, onWSDL);

当WSDL数据读取后，就可以调用WebService对象方法了，WSDL URL 指向真实的web service ，其有个方法叫getAverages( ) ：

webService.getAverages( );

Flex与WebService

处理返回结果

Web services 方法的类型实际上是mx.rpc.soap.Operation，当web services 方法返回值时，方法对象会发出mx.rpc.events.ResultEvent 事件，要想处理这个事件可注册监听器，例如，webService有个方法叫getAverages( )，可这样注册监听器：

webService.getAverages.addEventListener(ResultEvent.RESULT, onGetAverages);

调用写法和其他方法一样：

webService.getAverages( );

当进入处理函数时，会传进来一个ResultEvent 参数，ResultEvent 类定义了一个叫result 的属性，它包含返回值，因为getAverages( ) 方法返回一个关联数组，包含两个属性：flash 和actionscript：

private function onGetAverages(event:ResultEvent):void {

textArea.text = "The averages for Flash and ActionScript are " +

event.result.flash + " and " + event.result.actionscript;

}



处理异常

当web services 引发异常时，方法会发出fault事件，类型为mx.rpc.events.FaultEvent，下面的代码注册了fault 事件处理函数：

webService.addEventListener(FaultEvent.FAULT, onWebServiceFault);

FaultEvent 类定义了一个fault属性，类型为mx.rpc.Fault. Fault 对象返回有关异常的信息，包含如faultCode, faultDetail, faultString, 和rootCause 属性，下面的例子用Alert 显示异常信息：

private onWebServiceFault(event:FaultEvent):void {

var fault:Fault = FaultEvent.fault;

var message:String = "An error occurred. The details are as follows\ncode: " + fault.faultCode;

message += "\ndetail: " + faul.faultDetail;

Alert.show("Web Service Error", message);

}