一、Flex端HTTPService代码
功能说明
Flex中，很多类都可以通过两种方式进行使用和配置，一种是MXML标签方式，另一种ActionScript编程方式，这两种方式稍后都将进行介绍。
本例只对HTTPService的使用进行简单介绍，程序主要完成从服务器端请求xml数据并加载绑定到Flex端的DataGrid上。
以下是xml文档（category.xml）内容：
<?xml version="1.0" encoding="UTF-8"?> <catalog> <category> <name>Dairy</name> <categoryID>4</categoryID> </category> <category> <name>Deli</name> <categoryID>5</categoryID> </category> <category> <name>Fruit</name> <categoryID>3</categoryID> </category> <category> <name>Meat</name> <categoryID>1</categoryID> </category> <category> <name>Seafood</name> <categoryID>6</categoryID> </category> <category> <name>Vegetables</name> <categoryID>2</categoryID> </category> </catalog>
主要属性
| 名称 | 类型 | 说明 |
|---|---|---|
| url | Property | HTTP请求的地址 |
| fault | Event | 当请求失败时触发 |
| result | Event | 当请求成功是触发 |
| send | Method | 发送请求 |
| headers | Property | 用于自定义HTTP请求头 |
| lastResult | Property | 最后一次请求成功时返回的数据 |
| method | Property | HTTP请求方式(get、post、delete、put) |
| requestTimeout | Property | 请求超时时间 |
| resultFormat | Property |
对服务器响应的数据的解析方式，默认为object，可以设置为object、array、xml、flashvars、text、e4x，详见官方API |
| contentType | Property |
请求发送的数据内容类型，默认为application/x-www-form-urlencoded，可设置为application/xml |
关于Flex的API完全文档可以查阅官方文档①：http://flex.apache.org/asdoc/index.html
Flex客户端代码
①MXML方式
既然是使用MXML方式，肯定会使用标签，这里使用的标签是<mx:HTTPService/>因为是标签，所以除了上面介绍的属性，还必需一个id属性来使AS方便调用：
<mx:HTTPService id="httpService" url="http://localhost:5025" fault="onHttpServiceFault(event)" result="onHttpServiceSuccess(event)"/>
上面代码设置了当请求失败的fault事件和当请求成功的result事件，下面是在请求失败时做的简单处理和在请求成功时，将响应的XML数据绑定到DataGrid上。
protected function onHttpServiceFault(event:FaultEvent):void
{
Alert.show(event.message.toString());
}
protected function onHttpServiceSuccess(event:ResultEvent):void
{
try {
var dataSource:ArrayCollection = event.result.catalog.category as ArrayCollection;
dgData.dataProvider = dataSource;
} catch(e:Error) {
Alert.show(event.result.toString());
dgData.dataProvider = null;
}
}
// 下面是对应的DataGrid的MXML代码
<mx:DataGrid id="dgData" width="300">
<mx:columns>
<mx:DataGridColumn headerText="类型ID" dataField="categoryID"/>
<mx:DataGridColumn headerText="类别名称" dataField="name"/>
</mx:columns>
</mx:DataGrid>
这里采用的是在接收到数据是，使用AS代码将数据源绑定到DataGrid上，同样可以使用MXML的方式进行绑定，只需将dataProvider属性移到<mx:DataGrid/>标签中即可：
<mx:DataGrid id="dgData" width="300" dataProvider="{httpService.lastResult.catalog.category}">
最后就是需要用一个按钮，在点击按钮的时候发送请求，为了演示携带参数的请求，我在Flex客户端添加了一个TextInupt用于填入请求的xml文件名，为了避免恶意输入带路径的字符串，在Flex端做了简单的验证。以下是点击按钮的AS代码和文本框及按钮的MXML代码：
protected function loadData(event:MouseEvent):void
{
var fileName:String = txtDataFile.text;
// 只允许加载URL同目录的文件，避免恶意加载
var namePassed:Boolean = fileName.indexOf('/') === -1 && fileName.indexOf('\') === -1;
if (namePassed) {
httpService.send({ filename : fileName });
} else {
Alert.show("禁止输入包含目录的路径");
}
}
// MXML代码
<mx:TextInput id="txtDataFile" text="category.xml" x="22" y="10" width="150" height="25"/>
<mx:Button id="btnLoadData" label="加载数据" x="192" y="10" width="130" height="25" click="loadData(event)"/>
下面是Flex端MXML方式完整代码：
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:layout="org.osmf.layout.*">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
protected function onHttpServiceFault(event:FaultEvent):void
{
Alert.show(event.message.toString());
}
protected function onHttpServiceSuccess(event:ResultEvent):void
{
try {
var dataSource:ArrayCollection = event.result.catalog.category as ArrayCollection;
dgData.dataProvider = dataSource;
} catch(e:Error) {
Alert.show(event.result.toString());
dgData.dataProvider = null;
}
}
protected function loadData(event:MouseEvent):void
{
var fileName:String = txtDataFile.text;
// 只允许加载URL同目录的文件，避免恶意加载
var namePassed:Boolean = fileName.indexOf('/') === -1 && fileName.indexOf('\') === -1;
if (namePassed) {
httpService.send({ filename : fileName });
} else {
Alert.show("禁止输入包含目录的路径");
}
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<mx:HTTPService id="httpService" url="http://localhost:5025" useProxy="false" fault="onHttpServiceFault(event)" result="onHttpServiceSuccess(event)"/>
</fx:Declarations>
<mx:TextInput id="txtDataFile" text="category.xml" x="22" y="10" width="150" height="25"/>
<mx:Button id="btnLoadData" label="加载数据" x="192" y="10" width="130" height="25" click="loadData(event)"/>
<mx:Panel x="22" y="52" fontSize="12">
<mx:DataGrid id="dgData" width="300">
<mx:columns>
<mx:DataGridColumn headerText="类型ID" dataField="categoryID"/>
<mx:DataGridColumn headerText="类别名称" dataField="name"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</s:Application>
②ActionScript方式
MXML方式和AS方式的区别在于，将<mx:HTTPService/>换成使用AS来new HTTPService对象，替换的操作就是，在AS代码中声明一个HTTPService对象，并且在主Application创建完成时，对HTTPService进行初始化（creationComplete事件，类似HTML中的onload事件）：
// 首先在Application标签中添加creationComplete时间
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="creationComplete(event)">
// 然后在AS代码中声明一个HTTPService对象，并在creationComplete方法中对其进行初始化
internal var httpService:HTTPService;
protected function creationComplete(event:FlexEvent):void
{
httpService = new HTTPService();
httpService.url = "http://localhost:5025";
// 添加事件监听，下面这种方式和最下面被注释的两行代码的方式，功能相同
httpService.addEventListener("fault", onHttpServiceFault);
httpService.addEventListener("result", onHttpServiceSuccess);
// httpService.addEventListener(FaultEvent.FAULT, onHttpServiceFault);
// httpService.addEventListener(ResultEvent.RESULT, onHttpServiceSuccess);
}
下面是Flex端MXML方式完整代码：
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="creationComplete(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.http.HTTPService;
internal var httpService:HTTPService;
protected function creationComplete(event:FlexEvent):void
{
httpService = new HTTPService();
httpService.url = "http://localhost:5025";
httpService.useProxy = false;
httpService.addEventListener("fault", onHttpServiceFault);
httpService.addEventListener("result", onHttpServiceSuccess);
// httpService.addEventListener(FaultEvent.FAULT, onHttpServiceFault);
// httpService.addEventListener(ResultEvent.RESULT, onHttpServiceSuccess);
}
protected function onHttpServiceFault(event:FaultEvent):void
{
Alert.show(event.message.toString());
}
protected function onHttpServiceSuccess(event:ResultEvent):void
{
try {
var dataSource:ArrayCollection = event.result.catalog.category as ArrayCollection;
dgData.dataProvider = dataSource;
} catch(e:Error) {
Alert.show(event.result.toString());
dgData.dataProvider = null;
}
}
protected function loadData(event:MouseEvent):void
{
var fileName:String = txtDataFile.text;
// 只允许加载URL同目录的文件，避免恶意加载
var namePassed:Boolean = fileName.indexOf('/') === -1 && fileName.indexOf('\') === -1;
if (namePassed) {
httpService.send({ filename : fileName });
} else {
Alert.show("禁止输入包含目录的路径");
}
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<mx:TextInput id="txtDataFile" text="category.xml" x="22" y="10" width="150" height="25"/>
<mx:Button id="btnLoadData" label="加载数据" x="192" y="10" width="130" height="25" click="loadData(event)"/>
<mx:Panel x="22" y="52" fontSize="12">
<mx:DataGrid id="dgData" width="300">
<mx:columns>
<mx:DataGridColumn headerText="类型ID" dataField="categoryID"/>
<mx:DataGridColumn headerText="类别名称" dataField="name"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</s:Application>
二、服务器端监听处理
IIS直接部署
直接将XML文件部署到IIS上，这种方式就用不上传过去的filename了，因为IIS在接收到请求后，直接就将xml文件返回了。
.NET自定义监听
原理比较简单：使用Socket -> 监听指定IP的指定端口 -> 解析请求头中filename参数的值 -> 读取指定文件的内 -> 将文件数据作为响应内容进行传输 -> 关闭请求连接
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Sockets;
using System.Text;
using System.Text.RegularExpressions;
using System.Threading;
namespace NetRequestListener
{
class Program
{
private static Socket _serverSocket;
static void Main(string[] args)
{
CreateSocket();
Console.WriteLine("Server port 5025 is start listening..");
ReceiveRequest();
}
/// <summary>
/// 初始化Socket
/// </summary>
private static void CreateSocket()
{
_serverSocket = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);
_serverSocket.Bind(new IPEndPoint(IPAddress.Parse("192.168.1.102"), 5025));
_serverSocket.Listen(52);
}
/// <summary>
/// 循环接收请求并处理
/// </summary>
private static void ReceiveRequest()
{
while (true)
{
Socket client = _serverSocket.Accept();
Console.WriteLine("An client has connecting");
Thread th = new Thread(new ThreadStart(() =>
{
byte[] fileNameBytes = new byte[1024];
int len = client.Receive(fileNameBytes);
byte[] responseData;
try
{
responseData = ReadFileContent(Encoding.UTF8.GetString(fileNameBytes, 0, len));
}
catch (FileNotFoundException)
{
responseData = Encoding.UTF8.GetBytes("File not exist");
}
catch (Exception)
{
responseData = Encoding.UTF8.GetBytes("An error occurred when reading file");
}
client.Send(responseData);
client.Shutdown(SocketShutdown.Both);
client.Close();
}));
th.IsBackground = true;
th.Start();
}
}
/// <summary>
/// 根据请求中的数据读取指定文件
/// </summary>
/// <param name="requestData">HTTP的请求头信息</param>
/// <returns></returns>
private static byte[] ReadFileContent(string requestData)
{
// 使用正则筛选出filename参数的值
Regex rg = new Regex("filename=(\S+)");
string filePath = rg.Match(requestData).Groups[1].Value;
filePath = System.Web.HttpUtility.UrlDecode(filePath);
if (File.Exists(filePath))
{
return File.ReadAllBytes(filePath);
}
else
{
throw new FileNotFoundException();
}
}
}
}
Node.js自定义监听
node的代码相对要简单很多，代码很简单，就不做说明了：
// 引入module
var http = require('http');
var fs = require('fs');
var url = require('url');
http.createServer(function (req, res) {
console.log('An client has connecting');
// 将请求解析为对象，取出参数部分
var param = url.parse(req.url, true).query;
var message;
try {
// 取到参数中的filename，根据filename读取指定文件，这里使用阻塞读取方式
message = fs.readFileSync(param.filename, 'utf-8');
} catch(e) {
if(e.code === 'ENOENT') {
message = 'File is not exist';
} else {
message = 'An error occurred when reading file';
console.log(e.message);
}
}
// 自定义响应头
res.writeHead(200, { 'content-type' : 'text/xml'});
// 使用end将message响应给客户端，end后会关闭连接，另有write方法，这种方式不会关闭连接
res.end(message);
}).listen(5025, '192.168.1.102');
console.log('Server port 5025 is start listening..');
如果不想使用阻塞读取，当让也可以使用异步事件驱动：
// 引入module
var http = require('http');
var fs = require('fs');
var url = require('url');
http.createServer(function (req, res) {
console.log('An client has connecting');
var param = url.parse(req.url, true).query;
var message;
fs.readFile(param.filename, {encoding : 'utf-8'}, function (err, data) {
if (err) {
if (err.code === 'ENOENT') {
message = 'File is not exist';
} else {
message = 'An error occurred when reading file';
console.log(e.message);
}
} else {
message = data;
}
res.writeHead(200, { 'content-type' : 'text/xml'});
res.end(message);
});
}).listen(5025, '192.168.1.102');
console.log('Server port 5025 is start listening..');
①：Adobe在2011年11月份已将Flex框架捐赠给Apache基金会