RIA技术入门之Macromedia Flex & JSP（四）

6.5.2 在flex_testing目录下建立如下VerifyUser.as文件；

VerifyUser.as

/*
Verify User
*/

import mx.controls.Alert;
import mx.core.Application;

class VerifyUser
{
// 与此脚本关联的页面对象
public var verifyUserView:Object;

// 用户名，密码
public var userId:String="";
public var password:String="";

// 构造函数
public function VerifyUser()
{}

//成员函数
function verify(modal)
{
if(userId == "admin")
{
if(password == "123")
{
//关闭与此脚本关联的页面
verifyUserView.destroyAllChildren();
//打开新的窗口
//var popup = mx.managers.PopUpManager.createPopUp(_root, HTTPServiceDemo, modal, {deferred: true});
}
}
}
}

 

6.6 First Flex - 5：请求/响应（AS）
本例说明在as文件中如何向服务器端的jsp程序提交请求，如何得到响应。本例子在服务器端验证提交的用户名密码并返回验证结果（默认用户名admin，密码123）；

6.6.1 在flex_testing目录下建立如下LogonWindow.mxml文件；

LogonWindow.mxml

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

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" " target="_blank">http://www.macromedia.com/2003/m ... ;/A>" xmlns="*" width="1024">

<!-- VerifyUser controller -->
<VerifyUser id="verifyUser"
verifyUserView="{this}"
userId = "{userId.text}"
password = "{password.text}"/>

<mx:TitleWindow id ="loginWindow" closeButton="true" xmlns:mx="http://www.macromedia.com/2003/mxml"" target="_blank">http://www.macromedia.com/2003/m ... xml" title="Logon">

<mx:Form>

<mx:FormItem label="UserId" required="true">
<mx:TextInput id="userId" text="{verifyUser.userId}" width="150"/>
</mx:FormItem>

<mx:FormItem label="Password" required="true">
<mx:TextInput id="password" width="150"/>
</mx:FormItem>

<mx:FormItem>
<mx:HBox horizontalGap="30">
<mx:Button label="Logon" click="verifyUser.verify(false)" />
<mx:Button label="Cancel" click="this.deletePopUp()"/>
</mx:HBox>
</mx:FormItem>

</mx:Form>
</mx:TitleWindow>

</mx:Application>

6.6.2 在flex_testing目录下建立如下VerifyUser.as文件。在verify函数中，首先建立请求/响应对象（LoadVars类型），然后注册响应的处理函数（通过响应对象的onData属性），最后，绑定参数，调用sendAndLoad方法发送请求。

VerifyUser.as

/*
Sending request
*/

import mx.controls.Alert;
import mx.core.Application;

class VerifyUser
{
// 与此脚本关联的页面对象
public var verifyUserView:Object;

// 用户名，密码
public var userId:String="";
public var password:String="";

// 构造函数
public function VerifyUser()
{}

//成员函数
function verify(modal)
{

var send_lv:LoadVars = new LoadVars();
var receive_lv:LoadVars = new LoadVars();

receive_lv.onData = function(src:String)
{
if (src == undefined) {
Alert.show("Error loading content.", "Alert Box", Alert.OK);
return;
}
Alert.show(src, "Alert Box", Alert.OK);

verifyUserView.destroyAllChildren();
//var popup = mx.managers.PopUpManager.createPopUp(_root, HTTPServiceDemo, modal, {deferred: true});

};

send_lv.userId = userId;
send_lv.password = password;
send_lv.sendAndLoad("VerifyUser.jsp", receive_lv, "POST");
}
}

请求/响应对象为LoadVars类型；
onData属性指定得到响应之后的处理方法；
Alert.show(src, "Alert Box", Alert.OK)显示服务器端返回的字符串，类似javascript中的alert；
sendAndLoad方法为发送GET/POST请求的方法，由LoadVars对象调用；
sendAndLoad之前的语句为请求提交的参数；

6.6.3 在flex_testing目录下建立如下VerifyUser.jsp文件；

VerifyUser.jsp

 

<%@ page contentType="text/html; charset=GBK" %>
<%
String userId=request.getParameter("userId");
String password=request.getParameter("password");

if (userId.equals("admin"))
{
if (password.equals("123"))
{
out.println("Login Success!");
}
}
else
{
out.println("Login Error!");
}

%>

服务器端根据提交的用户名、密码验证；

6.7 The First Flex － Finished!
取消VerifyUser.as文件verify函数如下语句的注释：

var popup = mx.managers.PopUpManager.createPopUp(_root, HTTPServiceDemo, modal, {deferred: true});

此语句为弹出窗口。
则1 - 5步骤的执行全过程为：
" 登陆LogonWindow页面 －> 输入用户"admin"，密码"123"；
" 服务器端验证用户名密码 ―> 弹出提示，打开HTTPServiceDemo页面；
" 与服务器交互实现简单查询；

（未完待续）