JSON

JSON は “JavaScript Object Notation” の略称で、 今や息をするように当たり前のように使われているデータフォーマットです。

• サイズが少なくて済む
• 書式に馴染みがある（JavaScriptのオブジェクトリテラルほぼそのまま）
• データの型をそのまま活かせる

などの特徴を持ち、Webアプリケーションのデータのやり取りだけでなく、 node.js のパッケージ定義ファイル（package.json）や、 Sublime Text 2 等ソフトウェアの設定ファイル等、様々な場面で目にするようになりました。

生成・パース

JSON文字列の生成・展開は JSON オブジェクトの stringify / parse メソッドを通して行うことが出来ます。

var person = {
    name: "john",
    age: 15,
    active: true,
    tags: ["JavaScript", "CSS", "HTML"]
};

var json = JSON.stringify(person);
// '{"name":"john","age":15,"active":true,"tags":["JavaScript","CSS","HTML"]}'
var parsed = JSON.parse(json);
// { name: "john", ... }

JSON APIは古いブラウザ等では使えない場合もありますが、 その場合は json2.js などを利用する事で、 レガシーな環境でも JSON.parse/stringify を使用出来るようになります。 あるいは、パースするだけならば jQuery に $.parseJSON メソッドが用意されています。

$.parseJSON('{"name":"john","age":15,"active":true,"tags":["JavaScript","CSS","HTML"]}');

型 と toJSON メソッド

型を活かせるとは言っても全てがそうなのではなく、JSONで表現できる型は限られています。 JSONはあくまでJSONであって、JavaScriptではないという事ですね。

表現できる型は以下となります。

• 数値
• 文字列
• 真偽値
• 配列
• オブジェクト（連想配列）
• null

それ以外の型については、Date オブジェクトのように toJSON メソッドを持つ物であればその結果が代入されます。 （Date.toJSON は ISO文字列を返します） ただし、パース時に元のオブジェクトに変換してくれたりはしません。

var data = {
    date: new Date()
};
JSON.stringify(date); // {"date":"2013-11-11T03:46:11.583Z"}

つまり、toJSON メソッドを定義してさえ置けば、そのままJSONに渡せてしまうという事です。 backbone.js の Model や Collection には toJSON メソッドが実装されており、そのままスムーズにデータのやり取りをする事が出来ます。 自前のクラス等をつくる際には toJSON を生やしておくと色々捗りそうです。

JSONPath

全く違う話になりますが、XMLのデータの必要な情報にだけアクセスする XPath という物があります。 XML文書あるいはそのデータから “//chapter[@title=”第1章”]/paragraph” のような文字列表現で条件を指定することで、 条件に適合するデータを抽出するという物なのですが、 JSON にも同じ趣向のライブラリがあります。それが JSONPath です。

http://goessner.net/articles/JsonPath
JSONPath is a lightweight component that allows to find and extract relevant portions out of JSON structures on the client as well as on the server.

JavaScriptの実装は、90行程度に収まっています。 簡単な例で試してみましょう。

var data = {
    length: 3,
    items: [
        {
            name: "JavaScript 第6版",
            price: 4410,
            author: "David Flanagan"
        },
        {
            name: "JavaScript: The Good Parts",
            price: 1890,
            author: "Douglas Crockford"
        },
        {
            name: "JavaScriptパターン",
            price: 2940,
            author: "Stoyan Stefanov"
        }
    ]
};

// price が2000超の本の著者を抽出する
var authors = jsonPath(data, "$.items[?(@.price>2000)].author");
// ["David Flanagan", "Stoyan Stefanov"]

“$” がルートを示し、そこから “.” で下層を辿っていき、”?” を使って属性でフィルタをかけたりする事ができます。 “@” は自身のノードを指します。 詳しい書式については 参考ページ にXPathとの対応表として掲載されています。

慣れないと時間がかかりそうですが、大きなデータからの抽出に役立つかもしれません。

参考資料

• JSON
• douglascrockford/JSON-js
• jQuery.parseJSON() | jQuery API Documentation
• JSONPath – XPath for JSON
• jsonpath – XPath like syntax for JSON – Google Project Hosting

シンプルな例

まずはシンプルな例から。
紙に円を描き、マウスでクリックされた時になんらかの処理を行います。

(function(){
    var paper, myCircle, onClick ;

    /**
     * 紙に円を描きます。
     * myCircleには、Elementオブジェクトが格納されます。
     */
    paper = new Raphael( "paper", 640, 480 );
    myCircle = paper.circle( 100, 100, 32 )
        .attr( { fill : "#345", stroke : "none" } );

    /**
     * Element.click() で
     * マウスクリックイベントのハンドラを設定できます。
     * ハンドラ内のthisはElementオブジェクトです。
     */
    myCircle.click( function(){
        console.log( this.type ); // => "circle"
        alert( "さわんな！" );
    });

})();

Element.click() メソッドの引数に関数を渡すだけなので、とても簡単。

円に限らず、ほとんどのシェイプ描画メソッドはElementオブジェクトを返します。
イベントやアニメーションをいじりたい場合は、
この例での変数「myCircle」のように返り値を格納しておくと良いですね。
勿論、メソッドチェーンで一気に書いてしまう事もできます。

paper.circle( 100, 100, 32 )
    .attr( { fill : "#345", stroke : "none" } )
    .click( function(){
        alert( "さわんな！" );
    });

イベントハンドラの登録解除

設定したイベントハンドラを解除するのは、
そのメソッドに接頭辞「un」をつけたメソッドを使います。
例えばclick() で登録したハンドラの登録解除は、unclick() を使用します。

/**
 * click() で登録
 */
var onClick = function(){ alert("さわんな！"); };
myCircle.click( onClick );

/**
 * unclick() で登録解除
 */
myCircle.unclick( onClick ); // もうさわっても怒られません。

イベントの色々

clickの他にも様々なマウスイベント用のメソッドが用意されています。

おなじみのイベント

まず、これらのおなじみの方々。
恐らく名前を見るだけで、どんな役割なのかすぐに分かることでしょう。

• click （クリック）
• dblclick （ダブルクリック）
• mousedown （マウスダウン）
• mousemove （マウスムーブ）
• mosueout （マウスアウト）
• mouseover （マウスオーバー）
• mouseup （マウスアップ）

タッチ関係のイベント

スマートフォン向けの、タッチイベントも実装されています。

• touchcancel （タッチキャンセル）
• touchend （タッチエンド）
• touchmove （タッチムーブ）
• touchstart （タッチスタート）

jQueryのような、hover()

jQuery.hover() は、マウスが入ってきた時と離れていく時のハンドラを
同時に設定する事が出来る便利なメソッドですが、
それとほぼ同じ役割をし、名前も同じ hover() メソッドが用意されています。

Element.hover( f_in, f_out );

f_in (Function) マウスが入ってきた時の処理
f_out (Function) マウスが離れていく時の処理

/**
 * マウスオーバーで塗り色を変えるサンプル。
 */
myCircle.hover(
    function(){
        console.log( "くんな！" );
        this.attr( "fill", "#c00" );
    },
    function(){
        console.log( "にげんな！" );
        this.attr( "fill", "#345" );
    }
);

drag() で要素のドラッグを実装する

Element.drag() を使う事で、要素のドラッグに必要な
マウスダウン時、マウスムーブ時、マウスアップ時のイベントをまとめて設定できます。
ただし、ActionScriptのstartDrag()のように要素の移動まで面倒みてくれるわけではないので、
各イベントハンドラにそれらを実装してあげる必要があります。

Element.drag()

Element.drag( onmove, onstart, onend );

onmove (Function) マウスムーブ時の処理
onstart (Function) ドラッグ開始時の処理（マウスダウン）
onend (Function) ドラッグ終了時の処理（マウスアップ）

これらのコールバックは全て渡される引数が違うので注意が必要です。
特におさえておくべきは、第一引数のonmoveです。

onmove

onmove : function( dx, dy, x, y, event )

dx : ドラッグ開始位置からの相対的座標（x）
dy : ドラッグ開始位置からの相対的座標（y）
x : 現在のx座標
y : 現在のy座標
event : イベントオブジェクト

わざわざ相対的座標を渡しているのは、
マウス座標をそのまま要素のx,y座標に代入してしまうと
予想と違う位置に要素が移動してしまう為。
どの部分をクリックしてドラッグしても、
要素はマウスの右下にぶらさがる形になってしまいますね。

つまり、こんなかんじになるでしょう。

1. onstartでドラッグ前の要素の座標を記録しておく
2. onmoveで、1.で記録した座標と相対的座標をあわせて計算

(function(){
    var paper, myRect;

    paper = new Raphael( "paper", 640, 480 );
    myRect = paper.rect( 100, 100, 32, 32 )
        .attr( { fill : "#345", stroke : "none" } );

    myRect.drag(
        /**
         * マウスムーブ時の処理
         */
        function( dx, dy, x, y, e ){
            /**
             * Element.data() で初期の座標を取り出して
             * dx, dyを加算して移動
             */
            this.attr({
                x : this.data("x") + dx,
                y : this.data("y") + dy
            });
        },
        /**
         * ドラッグ開始時の処理
         */
        function( x, y, e ){
            /**
             * 要素の座標をElement.data()で記録
             */
            this.data( "x", this.attr("x") );
            this.data( "y", this.attr("y") );
            this.attr( "fill", "#c00" );
        },
        /**
         * ドラッグ終了時の処理
         */
        function( e ){
            this.attr( "fill", "#345" );
        }
    );
})();

jQueryのようなdata()が便利

RaphaelのElementオブジェクトには
jQuery.data() と似たような機能が同名のメソッドで実装されていて、
上記のコールバック内で使われているように
情報を保持しておくのに便利です。

// 値の設定
myElement.data( "foo", "bar" );
// 値の取得
console.log( my.Element.data( "foo" ) ); // => bar

デモ

デモをこちらにまとめました。

» はじめてのRaphael(2) : イベント編 via jsFiddle

まとめ

Raphaelは、意外とjQueryのメソッドと共通点があり、
導入にあまり苦労しなさそうで助かります。
描画とイベントが操れれば、簡単なRUIを実現できてしまいますね。

Raphaelとは

RaphaelはSVGで図を描画するためのフレームワークです。
正しくは「Raphaël」と書きますが、
毎度めんどくさいのでRaphaelでいきます。

なにをしてくれるのか

• SVGが動かないクラシックなIE環境の為に、VMLでも出力してくれます。
• イベントやアニメーションまわりも簡単に実装できるようになっています。

特に助かるのがVML対応。
旧ブラウザをサポートしなければならないケースには、
ぜひとも導入したいライブラリですね。

極めてシンプルな例

Rraphaelで図を描画する手順は、ざっくりとこんな感じ。

1. まず紙（paper）を用意する
2. その紙に図を描く。
   
   矩形（rect）や円形（circle）等、基本となるシンプルな図形はステンシルが用意されています。
   
   そうでない物は、フリーハンド（path）で描く事ができます。
3. 描かれた図に、色や線種等のスタイルを設定します。

HTML

<div id="my-paper-0"></div>

JavaScript

(function(){
    /**
    * [1] Raphael()でキャンバス（paper）をつくる
    */
    var paper = Raphael( "my-paper-0", 64, 64 );
    /**
    * [2] circle()で円を描画し、
    * [3] attr()で属性を設定する
    */
    paper.circle( 32, 32, 24 )
       .attr( { fill : "#345", stroke : "none" } );
})();

Raphael() は、Paperというオブジェクトを返します。
図の描画は、そのPaperオブジェクトが持つメソッドを通して行う事になります。

基本図形を描いてみる

矩形（rect）、円形（circle）、楕円形（ellipse）等の基本図形は、
Paperのメソッドを使って簡単に描画する事ができます。

円形

/**
 * Paper.circle( x, y, radius );
 */
paper.circle( 32, 32, 24 );

矩形

/**
 * Paper.rect( x, y, width, height, radius );
 */
paper.rect( 8, 8, 48, 48 ); // 普通の矩形
paper.rect( 8, 8, 48, 48, 8 ); // 半径8の角丸矩形

楕円形

/**
 * Paper.ellipse( x, y, horizontalRadius, virticalRadius );
 */
paper.ellipse( 32, 32, 16, 24 );

Pathで自由に描いてみる

イラレ等の「ペンツール」のような感じで自由に図を描く事ができるのが、
Paper.path()メソッドです。 まずはシンプルな三角形で例を示してみましょう。

/**
 * Paper.path( pathString );
 */
paper.path( "M32,8L56,56H8L32,8Z" );

path() の引数には、SVGで定義されているPath要素のコマンドを渡します。
文法は非常にシンプルで、アルファベット一文字で表されるコマンド毎に切り分けられます。
上記コードのコマンドを分解してみると…

1. “M32,8” : 32,8に移動する（MoveTo）
2. “L56,56” : 現在地から56,56まで線を描画する（LineTo）
3. “H8” : x座標8まで水平線を描画する（HorizontalLineTo）
4. “L32,8” : 32,8まで線を描画する（LineTo）
5. “Z” : パスを閉じる

これらを一気に書いて表した感じですね。

コマンド（抜粋）

M (MoveTo)

座標（x,y）に移動します

L (LineTo)

座標（x,y）まで線を描画します

H (HorizontalLineTo)

座標（x）まで水平線を描画します

V（VirticalLineTo)

座標（y）まで垂直線を描画します

C (CurveTo)

複数の座標をコントロールポイントとして引数に受け取り、ベジェ曲線を描画します。

コマンドを大文字で表記すると、座標を絶対位置として扱い、
小文字で表記すると現在地からの相対位置とします。

それぞれのコマンドについては公式ドキュメントか、SVGの仕様書を参考にしましょう。

• Paths – SVG 1.1 (Second Edition)
• Raphaël Reference

もう少し複雑な例

三角形よりももうすこし複雑な例として、
Pathを使って矢印を描画してみます。

paper.path( "M32,8L56,32L48,40L40,32V56H24V32L16,40L8,32L32,8Z" )
    .attr( { fill : "#345", stroke : "none" } );

デモ

デモをこちらにまとめました。
ご参考までに。

• はじめてのRaphael (1) : お絵かき編 via jsFiddle

まとめ

図形を描くのに色々メソッドやコマンドを覚えたりしなければいけませんが、
恐らくSVGを直に書く際にも役に立つ知識なので、無駄にはならないと思います。

さらに複雑なものを描かなければならない時は、
他の楽な方法がありますが、それはまた別の記事で。

XPathでやってみた

「フィードをオートディスカバリーする XPath – IT戦記」を参考に
DOMXpathで処理してみました。

$doc = DOMDocument::loadHTMLFile( $url );
$xpath = new DOMXpath( $doc );

DOMXPathはDOMDocumentをコンストラクタの引数に食べさせて使います。

$q = '/html/head/link[contains(@rel, "alternate")]'
    . '[@type="application/x.atom+xml" or @type="application/atom+xml" or '
    . '@type="application/xml" or @type="text/xml" or '
    . '@type="application/rss+xml" or @type="application/rdf+xml"]';
$eles = $xpath->query( $q );

基本的には先述の記事と同じ処理。
「rel属性に”alternate”を含み、尚且つtype属性がそれっぽいlink要素をください」
というクエリです。

DOMXPath::queryにクエリを渡せば実行結果をDOMNodeListで返してくれますので、
こんな感じに、条件にあったlink要素の1個目のhref属性を取得。

$eles->item(0)->getAttribute("href");

ファイナルコード

関数にまとめたもの

WebページからフィードのURLを抽出する。（XPath版）- GitHub

DOMDocumentでもやってみる

同じ処理を、試しにDOMDocumentでも書いてみる事に。

$doc = DOMDocument::loadHTMLFile( $url );

$types = array(
    "application/x.atom+xml",
    "application/atom+xml",
    "application/xml",
    "text/xml",
    "application/rss+xml",
    "application/rdf+xml"
);

下準備。DOMDocumentを生成しつつ、属性値のリストを作っておく。

$feedUrl = null;
$links = $doc->getElementsByTagName("link");
for( $i = 0; $i < $links->length; $i ++ ){
    $link = $links->item( $i );
    if( !stristr( $link->getAttribute("rel"), "alternate" ) ||
        !in_array( $link->getAttribute("type"), $types ) ){ continue; }
    $feedUrl = $link->getAttribute("href");
    if( !empty($feedUrl) ){ break; }
}

link要素のリストを取得してループでぐるりとまわします。
何をしているのかわかりやすいですが、XPathの方がスマートな印象。

ファイナルコード

関数にまとめたもの。

WebページからフィードのURLを抽出する。（DOMDocument版）- GitHub

まとめ

Webページを取得してごにょごにょしたい場合はXPathが便利そう！

実験の対象として、はてなブックマークのホットエントリのRSSを使ってみます。

$url = "http://b.hatena.ne.jp/hotentry.rss";
$str = file_get_contents( $url );

SimpleXMLを使う方法

普通にSimpleXMLで読み込むと、やなど、名前空間プレフィックスつきのタグを読み込むことが出来ません。

$simplexml = simplexml_load_string( $str );
var_dump( $simplexml );

SimpleXMLで名前空間つきタグを扱うには、childrenメソッドを使います。例えば、の値を取得する場合、 次のように掘っていく必要があります。

$simplexml->item[$i]->children("hatena", true)->bookmarkcount;

ループでitem要素全てまとめて処理してみます。 それぞれのitem要素にhatena->bookmarkcountが追加されます。

$simplexml = simplexml_load_string( $str );
$i = count( $simplexml->item );
while( $i-- ){
    $simplexml->item[$i]->hatena->bookmarkcount = $simplexml->item[$i]->children("hatena", true)->bookmarkcount;
}
var_dump( $simplexml );

DOMDocumentクラスを使う

DOM文書を読み込むためのDOMDocumentクラスを使ってみます。 JavaScriptでも使うような、getElementsByTagNameなんていうお馴染みのメソッドを使って文書構造を掘っていきます。

$dom = DOMDocument::loadXML( $str );
foreach( $dom->getElementsByTagName("item") as $item ){
    foreach( $item->childeNodes as $node ){
        if( $node->nodeType === 1 ){
            echo "{$node->nodeName} : {$node->nodeValue}";
        }
    }
}

nodeTypeには、ノードの種類が整数で渡されています。上で言う「1」はエレメントノードですね。 勿論、プレフィックスつきのタグも問題なく読み込めます。

cf) PHP: 定義済み定数 – Manual

出力時に楽なように、エントリーをまとめて一つの配列に突っ込んでみます。

$dom = DOMDocument::loadXML( $str );
$entries = array();
foreach( $dom->getElementsByTagName( "item" ) as $item ){
    $entry = array();
    foreach( $item->childNodes as $node ){
        if( $node->nodeType !== 1 ) continue;
        if( $item->getElementsByTagName( $node->nodeName )->length > 1 ){
            if( !isset( $entry[ $node->nodeName ] ) ){
                $entry[ $node->nodeName ] = array();
            }
            array_push( $entry[ $node->nodeName ], $node->nodeValue );
        } else {
            $entry[ $node->nodeName ] = $node->nodeValue;
        }
    }
    array_push( $entries, $entry );
}
var_dump( $entries );

複数あるタグは配列で対応。書いてみたものの…DOMDocumentのまま使った方が使いやすい気もしたり。
むしろこういう使い方するならSimpleXML使った方がよいですね。

XMLReaderクラスを使う

SimpleXMLやDOMDocumentが、XMLの情報をドッカンと丸ごとメモリに置いておくのに大して、
XMLReaderはfopenのようにポインタの位置だけを保持しておく為、メモリに優しく高速。らしい。
ですが、ポインタの位置だけだと正直使い辛いのも事実。

$xml = XMLReader::load( $url, null, LIBXML_NOBLANKS );
while( $xml->read() ){
    echo "{$xml->nodeType} : {$xml->name} = {$xml->value} @ {$xml->depth} <br />";
}

$xml->read()でノードを一つずつ読み進んでいく感じ。
多階層なXMLを読んでいくのは骨が折れそう。
これは重た～いXMLを読まなきゃいけない時用の代物ですね。

まとめ

名前に違わず相当楽ですね、SimpleXML。
名前空間つきのタグも処理したい場合等は、DOMDocumentの方がシンプルに処理出来そう。
XMLReaderはパフォーマンスを意識したい場合に。

上手に使い分けたいですね！

2010/12/18

マニュアルのリンクを修正

XMLファイルへのパスをスタティックに指定してしまうと、
こういう事態に対処出来なくなり、メンテナンス性を欠くのでは？
という事でflashvarsでXMLファイルへのパスを渡す方式にして解決しました。

こんな感じでflashvarsは渡してあげます。

<param name="flashvars" value="xmlpath=/the/path/to/" />

AS3で受け取ります。

public class Main extends MovieClip{
    public function Main() {
        var xmlpath = loaderInfo.parameters["xmlpath"];
        var ul:URLLoader = new URLLoader;
        ul.addEventListener(Event.COMPLETE, onXmlLoaded);
        ul.load( new URLRequest( xmlpath + "config.xml" ) );
    }
    private function onXmlLoaded(e:Event):void{
        // do something
    }
}

モノによってはそうすべきではないケースもあるかもしれませんが、
お客さんが直接手作業で更新するようなローテーションバナー等は
こういう仕様にしてあげたほうが安心ですね。

今日はXML読み込みからBulkLoaderによる一括ロードまでを
軽く備忘録しておきます。

bulk-loader – Project Hosting on Google Code

BulkLoaderは、複雑なローディング処理をより簡単に行う為に書かれたAS3ライブラリです。

早速、手順を追って書いてみるとします。

1. ライブラリをインポートするなど

import br.com.stimuli.loading.*;

保存場所に注意。

private var imagelist:XMLList;

URLのリストを格納しておく用の変数を準備しておきます。

2. XMLをロードする

XMLのロードはBulkLoaderを使わずにシンプルに書きます。

var ul:URLLoader = new URLLoader;
ul.addEventListener(Event.COMPLETE, onXmlLoaded);
ul.load( new URLRequest("list.xml") );

読み込むXMLはこんなのにしておきます。
実際はもうちょっと複雑な物になると思われますが…

<?xml version="1.0" charset="utf-8" ?>
<data>
    <items>
        <item id="1">images/a.png</item>
        <item id="2">images/b.png</item>
        <item id="3">images/c.png</item>
    </items>
</data>

3. 読み込んだXMLを処理する

private function onXmlLoaded(e:Event):void {
    var data:XML = new XML(e.target.data);
    imagelist = new XMLList( data.items.item );
    var bloader = new BulkLoader("imageloader");
    var item:*;
    for each( item in imagelist) {
        bloader.add( item.toString() );
    }
    bloader.addEventListener(BulkProgressEvent.COMPLETE, onImagesLoaded);
    bloader.addEventListener(BulkProgressEvent.PROGRESS, onImageProgress);
    bloader.addEventListener(BulkLoader.ERROR, onImageError);
    bloader.start();
}

BulkLoaderのコンストラクタには、ユニークな名前をつけてあげます。
（ここではimageloader）

var bloader = new BulkLoader("imageloader");

itemにはURL文字列が格納されたXMLオブジェクトが入っているので、
toString() でStringに変えてあげましょう。
URLをBulkLoader.addにつっこむと、BulkLoaderの読み込みリストに追加されます。

bloader.add( item.toString() );

イベントは、completeとprogressが登録できます。
APIドキュメントのイベントには記述されていませんが、errorイベントも受け取る事もできます。

BulkLoader.startで読み込み処理が開始されます。
URLLoader.loadみたいなもの。

4. イベントハンドラ

progressイベント

private function onImageProgress(e:Event):void {
    trace( Math.floor((e.target.percentLoaded * 100)) + "%" );
}

BulkLoader.parcentLoaded で全体の読み込み率を取得できます。
BulkLoader.bytesTotal, bytesLoadedもあるのでこちらも活用できますね。

errorイベント

private function onImageError(e:Event):void {
    trace(e.target.getFailedItems());
}

読み込みエラーが発生した時に呼ばれます。
BulkLoader.getFailedItemsでエラーの出たアイテムの情報が取得できます。

5. 完了時の処理

private function onImagesLoaded(e:Event):void {
    var item:*;
    var bmp:DisplayObject;
    var margin:int = 10;
    var point:Point = new Point( margin, margin );
    for each( item in imagelist ) {
        bmp = addChild( e.target.getBitmap(item.toString() ) );
        bmp.x = point.x;
        bmp.y = point.y;
        point.x += bmp.width + margin;
    }
}

10ピクセルの余白ごとにぺたぺたと横に画像を連ねるだけの簡単な処理をしています。
ポイントは、BulkLoader.getBitmap()。

bmp = addChild( e.target.getBitmap(item.toString() ) );

このメソッドに登録時につっこんだURLを入れると、
そのURLの画像をBitmapオブジェクトで引っ張ってきてくれます。なんて便利な。

他の形式で受け取りたい場合は、色々と用意されています。
getMovieClip, getSound, getSprite, getText,
getXML, getBitmapData, getContent, getBinary
などなどなど。
汎用的なgetなんていうメソッドもあります。
読み込んだファイルに応じて最適なものを使えば良いですね。

より詳しくは公式のドキュメントをご覧ください。
Wiki Pages – bulk-loader – Project Hosting on Google Code

本当は自分で似たようなのを書いてたんですが、
あまりにもこっちが便利なので愛用することに。
書く前に検索すればよいのですが、勉強になるので結果オーライです。

メインに使われるのはURLLoaderクラス。
flash.net.URLLoader (ActionScript 3.0)

URLLoader クラスは、指定した URL からテキスト、バイナリデータ、または URL エンコード形式の変数をダウンロードする際に使用します。動的なデータ駆動アプリケーションで使用するテキストファイル、XML、その他の情報をダウンロードする場合に便利です。

XMLやテキストファイルはもちろん、画像などのバイナリデータのロードにも活用します。
画像等の場合はLoaderを使ったりもできますが、Loaderはロード完了時にイベント等を拾えないので
ローディングインジケータなんかを付けたい場合はやはりURLLoaderを使うことになります。

基本はこうですね。

var ul:URLLoader = new URLLoader;
ul.addEventListener(Event.COMPLETE, xmlOnComplete);
var req:URLRequest = new URLRequest("content.xml");
ul.load(req);

loadメソッドの引数にはURLObjectを使用します。
※私はよく勢いでURLをそのままぶち込んでしまってエラー吐かせます（!!）
xmlOnLoadedにはロード完了時のイベントハンドラを登録します。
イベントハンドラの引数にはEventオブジェクトが渡されるので、きちんと受け取りましょう。

public function xmlOnComplete(e:Event):void{
    trace("---XML successfully loaded---");
    var xml:XML = new XML(e.target.data);
    // do something
}

e.targetにはイベント配布元のURLLoaderさんが格納されているので、
e.target.dataからXMLの内容を受け取る事ができます。
XML関数でXMLオブジェクトにしたら、あとは煮るなり焼くなり好きにしてください。
XMLオブジェクトの美味しい煮方焼き方は下記を参考にしてください。

• XML – ActionScript 3.0 コンポーネントリファレンスガイド
• 第18回　ActionScript3.0でXMLデータを扱うための基礎 – Flash CS3入門　基本からActionScriptまで：ITpro

URLLoaderオブジェクトは、完了時のcompleteの他にも様々なイベントを配信します。
エラー処理等をする場合にはこれらを活用しましょう。

httpStatus

URLLoader.load() を呼び出して HTTP 経由でデータへのアクセスを試みたときに Flash Player がその要求のステータスコードを検出して返すことが可能な環境にある場合に送出されます。（flash.events.HTTPStatusEvent）

ioError

URLLoader.load() の呼び出し時に致命的なエラーが発生してダウンロードが終了した場合に送出されます。（flash.events.IOErrorEvent）

open

URLLoader.load() メソッドの呼び出しによりダウンロード処理が開始されると送出されます。

progress

ダウンロード処理を実行中にデータを受信したときに送出されます。（flash.events.ProgressEvent）

スクリプトをまとめるとこんな感じです。

ActionScript

package{
    import flash.events.<em>;
    import flash.display.</em>;
    import flash.net.*;
    public class main extends Sprite{
        public function main():void{
            var ul:URLLoader = new URLLoader;
            ul.addEventListener(Event.COMPLETE, xmlOnComplete);
            var req:URLRequest = new URLRequest("content.xml");
            ul.load(req);
        }
        public function xmlOnComplete(e:Event):void{
            trace("--load complete--");
            var xml:XML = new XML(e.target.data);
            trace("appls's price : " + xml.items.item.(name=="apple").price);
        }
    }
}

XML

<?xml version="1.0" charset="utf-8" ?>
<data>
    <items>
        <item id="1">
        <name>apple</name>
        <price>1000</price>
    </item>
    <item id="2">
        <name>orange</name>
        <price>1500</price>
    </item>
    <item id="3">
        <name>grape</name>
        <price>2000</price>
    </item>
    </items>
</data>