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”