Use JSON in Flex
井轶
JSON 是一种和XML相似的数据交换文件，它采用和C，Java等类似的语法，在Javascript，PHP中是十分通用的。使用JSON作为Flex程序中的数据交换文件，可以使用已有的corelib库中的类来实现。
在写JSON文件时，本地路径中的斜杠‘/’应该使用转义字符'//'来表示，否则总是出错。还有在下面的Demo中处理时把JSON数据中的空格也删除了，这是不正确的。在规格化时，即JSON处理类要求给出的数据中不能包含多余的空格，即{}之间不能有多余的空格，否则处理会出错。这一方面要求在写JSON文件时不要添加不必要的空格，但是如果都写到一行，程序读取简单，可是人读起来就麻烦了，所以建议使用回车，tab来添加空格，不要直接添加空格。否则在处理时，很可能在字符串中的空格也被删除，原始数据都被改了，那就得不偿失了。
下面是使用JSON作为数据交换文件的一个Demo，将JSON中的数据显示在DataGrid中。
<?
xml version
=
"
1.0
"
encoding
=
"
utf-8
"
?>
<!-- This demo just presents how to get the data from a json data file and to display them
in a datagird. -->
<!-- Use creationComplete property to set HTTPService to start when the page is created. -->
< mx:Application xmlns:mx = " http://www.adobe.com/2006/mxml " layout = " absolute "
creationComplete = " service.send() " >
< mx:DataGrid id = " grid " left = " 10 " right = " 10 " top = " 10 " bottom = " 10 " >
< mx:columns >
< mx:DataGridColumn headerText = " Title " dataField = " title " />
< mx:DataGridColumn headerText = " Url " dataField = " url " />
< mx:DataGridColumn headerText = " Date " dataField = " date " />
< mx:DataGridColumn headerText = " Service " dataField = " src " />
</ mx:columns >
</ mx:DataGrid >
<!-- In HTTPService the url can be local file or web file:
web:http: // weblogs.macromedia.com/mesh/mashedpotato.json
relative local file:potato.json
absolute local file(windows):C:potato.json -->
< mx:HTTPService id = " service " resultFormat = " text "
url = " potato.json "
result = " onJsonLoad(event) " />
< mx:Script >
<! [CDATA[
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
/*
To Use the JSON Library,you must add the source of the library to the project
by the following way:
1)Right click on the project and select the properties;
2)Then select the Flex Build Path window;
3)Select Source Path label,click add source folder button,Browse to the source
folder of the library which is the src folder in the library zipped file.
(Of course you need to unzip it first.)Then click OK button,that's ok.
I don not know why when I just add the swc file of the library which is the compiled
library file like dll in windows applications,the builder always notify me that "unable
to load SWC corelib.swc:multiple points".So I have to use the above way.
*/
import com.adobe.serialization.json.JSON;
import com.adobe.utils.StringUtil;
/*
This method is called when the HTTPService is finished,that's to say the data has
been got to the client.So in this function,what you should do is to format the data
you get.
*/
private function onJsonLoad(event:ResultEvent): void
{
// get the raw data and convert it to String
// delete the white space in the string.
var rawData:String = String(event.result);
trace(rawData);
var tmpStr:Array = rawData.split( ' ' );
rawData = tmpStr.join();
tmpStr = rawData.split( ' ' );
rawData = tmpStr.join( "" );
trace(rawData);
tmpStr = rawData.split( ' ' );
rawData = tmpStr.join( "" );
trace(rawData);
tmpStr = rawData.split( ' ' );
rawData = tmpStr.join( "" );
trace(rawData);
// Use statci method of JSON,decode,to decode the string format data to Array.
var arr:Array = (JSON.decode(rawData) as Array);
// Create a new ArrayCollection object to pass the de-serialized data.
// As ArrayCollection works better as dataProvider and they can be watched for chagnes.
var dp:ArrayCollection = new ArrayCollection(arr);
// Set the dataProvider of the DataGrid,grid.Then the data will be listed in it.
grid.dataProvider = dp;
}
]] >
</ mx:Script >
</ mx:Application >
<!-- This demo just presents how to get the data from a json data file and to display them
in a datagird. -->
<!-- Use creationComplete property to set HTTPService to start when the page is created. -->
< mx:Application xmlns:mx = " http://www.adobe.com/2006/mxml " layout = " absolute "
creationComplete = " service.send() " >
< mx:DataGrid id = " grid " left = " 10 " right = " 10 " top = " 10 " bottom = " 10 " >
< mx:columns >
< mx:DataGridColumn headerText = " Title " dataField = " title " />
< mx:DataGridColumn headerText = " Url " dataField = " url " />
< mx:DataGridColumn headerText = " Date " dataField = " date " />
< mx:DataGridColumn headerText = " Service " dataField = " src " />
</ mx:columns >
</ mx:DataGrid >
<!-- In HTTPService the url can be local file or web file:
web:http: // weblogs.macromedia.com/mesh/mashedpotato.json
relative local file:potato.json
absolute local file(windows):C:potato.json -->
< mx:HTTPService id = " service " resultFormat = " text "
url = " potato.json "
result = " onJsonLoad(event) " />
< mx:Script >
<! [CDATA[
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
/*
To Use the JSON Library,you must add the source of the library to the project
by the following way:
1)Right click on the project and select the properties;
2)Then select the Flex Build Path window;
3)Select Source Path label,click add source folder button,Browse to the source
folder of the library which is the src folder in the library zipped file.
(Of course you need to unzip it first.)Then click OK button,that's ok.
I don not know why when I just add the swc file of the library which is the compiled
library file like dll in windows applications,the builder always notify me that "unable
to load SWC corelib.swc:multiple points".So I have to use the above way.
*/
import com.adobe.serialization.json.JSON;
import com.adobe.utils.StringUtil;
/*
This method is called when the HTTPService is finished,that's to say the data has
been got to the client.So in this function,what you should do is to format the data
you get.
*/
private function onJsonLoad(event:ResultEvent): void
{
// get the raw data and convert it to String
// delete the white space in the string.
var rawData:String = String(event.result);
trace(rawData);
var tmpStr:Array = rawData.split( ' ' );
rawData = tmpStr.join();
tmpStr = rawData.split( ' ' );
rawData = tmpStr.join( "" );
trace(rawData);
tmpStr = rawData.split( ' ' );
rawData = tmpStr.join( "" );
trace(rawData);
tmpStr = rawData.split( ' ' );
rawData = tmpStr.join( "" );
trace(rawData);
// Use statci method of JSON,decode,to decode the string format data to Array.
var arr:Array = (JSON.decode(rawData) as Array);
// Create a new ArrayCollection object to pass the de-serialized data.
// As ArrayCollection works better as dataProvider and they can be watched for chagnes.
var dp:ArrayCollection = new ArrayCollection(arr);
// Set the dataProvider of the DataGrid,grid.Then the data will be listed in it.
grid.dataProvider = dp;
}
]] >
</ mx:Script >
</ mx:Application >
JSON文件：
[
{ " title " : " MTEnclosures " , " url " : " http://brandon.fuller.name/archives/2004/09/ " , " date " : 1144433100000 , " src " : " delicious " },
{ " title " : " Perfect KeyBoard Pro - The best utility for Flex development " , " url " : " http://www.powersdk.com/ted/2006/04/perfect-keyboard-pro-best-utility-for.php " , " date " : 1144423200000 , " src " : " delicious " },
{ " title " : " View Source Chart (Firefox Extension) " , " url " : " http://jennifermadden.com/scripts/ViewRenderedSource.html " , " date " : 1144423080000 , " src " : " delicious " },
{ " title " : " Adobe Consulting: Transition and tween explorer " , " url " : " http://weblogs.macromedia.com/mc/archives/2006/04/transition_and.cfm " , " date " : 1144389960000 , " src " : " delicious " },
{ " title " : " IconBuffet | Stock Icons for Digital Professionals " , " url " : " http://www.iconbuffet.com/ " , " date " : 1144369980000 , " src " : " delicious " },
{ " title " : " Mood Music For Programmers " , " url " : " http://digg.com/music/Mood_Music_For_Programmers " , " date " : 1144335600000 , " src " : " delicious " },
{ " title " : " The State of Web 2.0 (web2.wsj2.com) " , " url " : " http://web2.wsj2.com/the_state_of_web_20.htm " , " date " : 1144276140000 , " src " : " delicious " },
{ " title " : " Apple - Boot Camp " , " url " : " http://www.apple.com/macosx/bootcamp/ " , " date " : 1144249200000 , " src " : " delicious " },
{ " title " : " LAME Mirrors " , " url " : " http://www-users.york.ac.uk/~raa110/audacity/lame.html " , " date " : 1144217520000 , " src " : " delicious " },
{ " title " : " Podcast: Designing the Next Generation of Web Apps, by Jeffrey Veen " , " url " : " http://www.veen.com/jeff/archives/000871.html " , " date " : 1144162860000 , " src " : " delicious " }
]
{ " title " : " MTEnclosures " , " url " : " http://brandon.fuller.name/archives/2004/09/ " , " date " : 1144433100000 , " src " : " delicious " },
{ " title " : " Perfect KeyBoard Pro - The best utility for Flex development " , " url " : " http://www.powersdk.com/ted/2006/04/perfect-keyboard-pro-best-utility-for.php " , " date " : 1144423200000 , " src " : " delicious " },
{ " title " : " View Source Chart (Firefox Extension) " , " url " : " http://jennifermadden.com/scripts/ViewRenderedSource.html " , " date " : 1144423080000 , " src " : " delicious " },
{ " title " : " Adobe Consulting: Transition and tween explorer " , " url " : " http://weblogs.macromedia.com/mc/archives/2006/04/transition_and.cfm " , " date " : 1144389960000 , " src " : " delicious " },
{ " title " : " IconBuffet | Stock Icons for Digital Professionals " , " url " : " http://www.iconbuffet.com/ " , " date " : 1144369980000 , " src " : " delicious " },
{ " title " : " Mood Music For Programmers " , " url " : " http://digg.com/music/Mood_Music_For_Programmers " , " date " : 1144335600000 , " src " : " delicious " },
{ " title " : " The State of Web 2.0 (web2.wsj2.com) " , " url " : " http://web2.wsj2.com/the_state_of_web_20.htm " , " date " : 1144276140000 , " src " : " delicious " },
{ " title " : " Apple - Boot Camp " , " url " : " http://www.apple.com/macosx/bootcamp/ " , " date " : 1144249200000 , " src " : " delicious " },
{ " title " : " LAME Mirrors " , " url " : " http://www-users.york.ac.uk/~raa110/audacity/lame.html " , " date " : 1144217520000 , " src " : " delicious " },
{ " title " : " Podcast: Designing the Next Generation of Web Apps, by Jeffrey Veen " , " url " : " http://www.veen.com/jeff/archives/000871.html " , " date " : 1144162860000 , " src " : " delicious " }
]
类似资料：