Flash与JSP通信 (2)

2、客户端的实现

    客户端主要是Flash的实现。以Flex Builder 3为工具进行AS3.0脚本实现。

 

    在Flash端选择用户类型，提交后获取相应类型的用户信息，并将其显示到swf端。

   

    2.1 操作说明

    效果图：

   

    如上图：

        下拉列表框显示用户类型，可供选择；

        查询按钮点击后会根据选择的用户类型发送请求，从服务器端加载查询的数据；

       下方的数据窗格则显示查询到的结果。

    2.2 代码实现

      下面给出了FlexBuilder工程的一个文件，设置了Flash的布局。

      <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="400"> <mx:Label text="选择用户类型：" width="148" height="35" fontSize="20" fontFamily="Georgia" x="38" y="40"/> <!-- 用户类型 --> <mx:Array id="userTypeArray"> <mx:Object label="普通用户" data="1" /> <mx:Object label="管理员" data="2" /> </mx:Array> <!-- 下拉列表框，选择用户类型 --> <mx:ComboBox id="userTypeCombo" width="160" height="35" editable="false" fontSize="16" horizontalCenter="-25" verticalCenter="-148" dataProvider="{userTypeArray}"/> <!-- 查询按钮 --> <mx:Button id="selUsersBtn" label="查询" fontSize="20" width="103.93939" height="35" x="387.8" y="37.1" click="selUsersBtnOnClick()" /> <!-- 查询结果显示 --> <mx:AdvancedDataGrid id="usersDataGrid" designViewDataType="flat" x="9" y="109" width="582" height="230" selectionMode="singleRow" enabled="true" textAlign="center" dataProvider="{userArrayColl}" > <!-- 表格的各列 --> <mx:columns> <mx:AdvancedDataGridColumn headerText="序号" dataField="idxCol" fontSize="16"/> <mx:AdvancedDataGridColumn headerText="用户名" dataField="nameCol" fontSize="16"/> <mx:AdvancedDataGridColumn headerText="密码" dataField="pwdCol" fontSize="16"/> </mx:columns> </mx:AdvancedDataGrid> <!-- AS脚本，实现后台数据请求，并加载数据 --> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; // [Bindable]标签用来声明属性是可以绑定的 [Bindable] /* * 用户信息集合，与AdvancedDataGrid控件绑定数据 */ private var userArrayColl : ArrayCollection = new ArrayCollection(); /** * 查询按钮点击 OnClick 事件 * 根据下拉列表框选择的用户类型，查询用户信息. 并将其显示出来 */ private function selUsersBtnOnClick() : void { /* * 获取从下拉列表框中选取的项 * selObj : 选取的对象 * selDataStr : 选取对象的 data 元素值 */ var selObj : Object = userTypeCombo.selectedItem; var selDataStr : String = selObj.data; // TODO trace("[selUsersBtnOnClick] 用户类型=" + selDataStr); /* * 清空集合中的数据,绑定新数据 */ userArrayColl.removeAll(); // 1 请求URL地址 var reqUrl : String = "http://localhost:8088/flash/usersInfoAct.do"; var request : URLRequest = new URLRequest(reqUrl); // 2 存放要发送到服务器的数据 var reqUrlVar : URLVariables = new URLVariables(); reqUrlVar.usertype = selDataStr; // 3 设定数据发送方式 request.method = URLRequestMethod.POST; request.data = reqUrlVar; // 4 加载从服务器传回的数据 var loader : URLLoader = new URLLoader(); loader.dataFormat = URLLoaderDataFormat.TEXT; // 5 添加事件监听(数据加载成功、数据加载失败) loader.addEventListener(Event.COMPLETE, completeHandler); loader.addEventListener( IOErrorEvent.IO_ERROR, loaderIoErr); try { loader.load(request); } catch (error : Error) { trace("[selUsersBtnOnClick] 数据加载错误:" + error); } } /** * 加载数据完毕后调用该方法 * 解析加载的数据，并将其显示到Flash界面上 */ private function completeHandler(evt : Event) : void { // 1 数据加载对象 var loader : URLLoader = URLLoader(evt.target); trace("查询结果：" + loader.data); // 2. 将接收到的数据转换成XML对象，并获取子结点的个数 var resultXML : XML = new XML(loader.data); var rsLength : int = resultXML.child("user").length(); trace("resultXML.user.length = " + rsLength); // 3. 遍历各子结点，分别获取各用户名和密码。 var obj : Object; for(var i : int = 0; i < rsLength; i++) { trace("i : " + resultXML.user[i]); obj = new Object(); /* * idxCol : 序号列 * nameCol : 用户名 * pwdCol : 密码 */ obj.idxCol = i + 1; obj.nameCol = resultXML.user[i].username[0].toString(); obj.pwdCol = resultXML.user[i].password[0].toString(); userArrayColl.addItem(obj); } } /** * IO Error */ private function loaderIoErr(evt : IOErrorEvent) : void { Alert.show("服务器数据加载错误", "错误"); } ]]--> </mx:Script></mx:Application>

      说明：

          ① 如果该Flash嵌入到HTML页面中，则请求URL地址(reqUrl )还可以用相对路径表示。

          ② var loader : URLLoader = new URLLoader(); 这一句。

              如果服务器关闭，则创建URLLoader实例会出异常：“Error #2044: 未处理的 ioError:。”

              所以需要添加 " loader.addEventListener(IOErrorEvent.IO_ERROR, loaderIoErr); ”捕获异常。

          ③ 关于加载数据的方式。

              本例直接以XML文本形式加载JSP页面数据，所以用了“ URLLoaderDataFormat.TEXT”