flex和后端的数据交互(一)－－XML和HTTPService

最近学习flex，参考了不少网上的资料，特别是 中国flex开发者（http://www.flexer.cn/）。flex数据交互是一个关键，做个学习总结，请flex老鸟指正！

flex和后端的数据交互有很多方式，flex可以使用ActionScript读写文件（xml、txt）的形式存储显示数据，
在Flex 3.0中新增了对本地数据库（.db格式）操作的类，可用于读取本地的数据库数据。新增了对PDF数据
操作的类，可用于读取PDF数据。

[size=medium]xml文件方式[/size]

XML优点是简单小巧、存储方便、检索快速。所以，XML常用于数据存储和数据交换。Flex 3.使用URLLoader类可方便地传输XML数据。
使用XML方式传输数据的步骤如下所示。
新建名为"tree.xml"文件，用以存储XML数据:

xml文件的读写我们可以用FileStream类来实现：
读取xml文件：

   var testXML:XML;
   var file:File = File.documentsDirectory.resolvePath("tree.xml");
   var fileStream:FileStream = new FileStream();
   fileStream.open(file, FileMode.READ);
   testXML = XML(fileStream.readUTFBytes(fileStream.bytesAvailable));
   fileStream.close();

写回xml文件

   var testXML:XML=content......;
   var file:File = File.documentsDirectory.resolvePath("tree.xml");
   var fileStream:FileStream = new FileStream();
   fileStream.open(file, FileMode.WRITE);
   var outputString:String = '\n';
   outputString += testXML.toXMLString();
   fileStream.writeUTFBytes(outputString);
   fileStream.close();

需要说明一下的是文件打开方式：FileMode
READ －－设置文件打开方式为只读
WRITE－－设置文件打开方式为写数据。文件不存在，则创建；文件存在，则覆盖原有数据。
APPEND－－设置文件打开方式为追加。文件不存在，则创建；文件存在，则新数据从文件末尾开始增加。
UPDATE－－设置文件打开方式为读写。文件不存在，则创建。设置该模式通常用于随机读写访问文件。可以从文件的任意位置读取，写入数据时，只有写入位置的存在字节被覆盖，其他所有字节不受影响。

这里我们使用URLRequest类来加载xml数据，编写应用程序初始化处理函数loadXML。
变量，用以指明XML文件路径。
public function loadXML():void//应用程序初始化处理函数
{
//定义URLRequest实例，指定文件地址。
var request:URLRequest=new URLRequest("tree.xml");
loader.load(request);//加载XML文件
loader.addEventListener(Event.COMPLETE,completeHandle); //添加加载完成时的监听
}

loader.addEventListener(Event.COMPLETE,completeHandle)语句表示添加对XML加载完成事件的监听。一旦加载完成执行
completeHandle函数。完成剩余MXML代码。剩余代码包括completeHandle函数，组件设计等。
以下代码是完整的MXML代码。

	fontSize="12" layout="absolute" width="242" height="442" creationComplete="loadXML()">
    
                      import mx.collections.ArrayCollection; 
            import mx.rpc.events.ResultEvent;       
            public var loader:URLLoader=new URLLoader();
            public var menus:XML=new XML();         
            public function loadXML():void          
            {
                var request:URLRequest=new URLRequest("tree.xml");
                loader.load(request); 
                loader.addEventListener(Event.COMPLETE,completeHandle);
            }
            public function completeHandle(e:Event):void
            {
                menus=XML(loader.data);            
                var results:XMLList=menus.node;    
                tree.dataProvider=results; 
            }
          ]]>
    

    
    
 

这是运行结果截图：
[img]http://daoger.iteye.com/upload/picture/pic/16203/d463c17d-8e54-32c0-99d4-f1bcee7a8a6a.jpg[/img]


[size=medium]组件方式[/size]


组件可与所有的后端程序交互。例如，ASP、ASP.Net、JSP、PHP等。
以下是一个组件语法示例：

id唯一标识该组件，url是数据提交的地址，可以在地址后面添加参数，提交到后端进行处理，处理后
再返回Flex可识别的数据类型，如数组型、XML型、Object型等。

组件返回的数据存储于ResultEvent类中。使用组件的result事件可处理HTTP程序返回的数据。
eg.

返回的数据存储于ResultEvent类的result属性下。各种数据的具体位置与HTTP程序的处理结果有关。
数据返回后的处理方法示例：

import mx.rpc.events.ResultEvent;                       
import mx.controls.Alert;                              

private function showResult(e:ResultEvent):void
{
    Alert.show(e.result as String);                    
}

来一个简单的例子会让你更加明白的！

这是客户端mxml的源代码：

	  
              import mx.rpc.events.ResultEvent;              
		import mx.controls.Alert;                   

		private var arr:Array=new Array();             
		private function addHandle():void           
		{
		    myHttp.url="http://localhost:8080/myflex/sum";                                                     
		    if(arr.length>0)                           
		        myHttp.url+="?";
		    for(var i:int=0;i		    {
		        if(i!=arr.length-1)
		            myHttp.url+="num="+arr[i].para.toString()+"&";
		        else
		            myHttp.url+="num="+arr[i].para.toString();
		    }
		    Alert.show(myHttp.url);
		    myHttp.send();                       
		}

		private function addData():void         
		{
		    var obj:Object=new Object();           
		    obj.para=txtPara.text;                
		    arr.push(obj);                        
		    dg.dataProvider=arr;                   
		    txtPara.text="";                     
		    dg.validateNow();                      
		}

		private function delData():void         
		{
		    arr=new Array();                             
		    dg.dataProvider=arr;                 
		    dg.validateNow();                      
		}

		private function httpHandle(e:ResultEvent):void
		{
			lblResult.text=e.result.sumTag;
		}
        ]]>  
  	  
	
	
	    
	     
	    
	        
	            
	        
	    
	      
	      
	    
	      
	       
	

"http://localhost:8080/myflex/sum"是一个servlet的映射地址，actionscript方法addHandle将每一个数字参数添加到url映射地
址后面并且向服务器发送请求，addData方法把输入的数字显示到下方列表，delData方法删除整个列表，httpHandle方法处理服务器
的返回值。其中e.result.sumTag表示取得xml返回数据中sumTag标签中的内容。
以下是servlet中对接收参数的处理：

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException
	{
		String[] para = request.getParameterValues("num");
		int sum = 0;
		if (para != null)
		{
			for (int i = 0; i < para.length; i++)
			{
				if (para[i] != null && !"".equals(para[i]))
				{
					sum = sum + Integer.parseInt(para[i]);
				}
			}
		}
		response.getWriter().print(
				"" + sum
						+ "");
	}

下面是例子运行的截图：
[img]http://daoger.iteye.com/upload/picture/pic/16215/9e383c97-9695-3820-a249-f099e94baf1f.jpg[/img]

下一次学习总结一下组件和RemoteObject及其他的交互方式！