使用するスクリプト

var http = new JKL.ParseXML(【PHPプログラムのパス】);
http.parse();

サンプル

解説

JavaScriptは、セキュリティ上の関係でサーバー外のファイルにはアクセスすることができない設計になっています。そこで、Web APIを公開しているサービスの XML等を解析するためには、別途橋渡しをする役目が必要です。

Perl、Rubyなど、サーバーサイドで動作するスクリプトであれば何でもかまいませんが、ここではPHPを利用して作ってみます。

なお、XMLの解析にはJKL.ParseXMLを利用します。

まずは、先のサイトからライブラリをダウンロードして適当なフォルダに展開します。続いて、XMLファイルを準備しましょう。ここでは「sample.xml」という名前で保存します。

<?xml version="1.0" encoding="UTF-8"?>
<books>
  <book>
    <name>基本からしっかりわかる Adobe Spryプログラミングブック</name>
    <url>http://www.amazon.co.jp/dp/4839926212/h2ospacelim09-22</url>
  </book>
  <book>
    <name>Dreamweaver PHPスターティングガイド—DreamweaverではじめるWebプログラミング</name>
    <url>http://www.amazon.co.jp/dp/4839920869/h2ospacelim09-22</url>
  </book>
  <book>
    <name>ホームページ担当者が知らないと困るHTMLの仕組みとWeb技術の常識</name>
    <url>http://www.amazon.co.jp/dp/4883375005/h2ospacelim09-22</url>
  </book>
  <book>
    <name>はじめに読みたいAjax ~入門から実践まで~</name>
    <url>http://www.amazon.co.jp/dp/489362234X/h2ospacelim09-22</url>
  </book>
  <book>
    <name>ActionScript開発テクニック—Flash MXでWebサイト制御自由自在</name>
    <url>http://www.amazon.co.jp/dp/4789818403/h2ospacelim09-22</url>
  </book>
</books>

続いて、HTMLを準備しましょう。

<div id="display">
</div>

HTMLは、空のdiv要素があれば十分です。id属性は付加しておきましょう。

さらに、PHPのプログラムを作成します。ここでは「readxml.php」というファイル名で作成します。

<?php
$ret = file_get_contents('http://www.h2o-ajax.com/sample/jkl/parsexml_out/sample.xml');

echo $ret;
?>

「file_get_contents」というファンクションは、ファイルを読み込んで内容を変数に保存するというシンプルなファンクションで、これを「echo」で画面出力すればXMLをそのまま表示することができます。

これを、JavaScriptでXMLファイルの代わりに利用すれば、外部のXMLをあたかも内部のXMLのようにして振る舞うことができるというわけです。それでは、JavaScriptの内容を見ていきましょう。

<script type="text/javascript" src="js/jkl-parsexml.js"></script>
<script type="text/javascript">
var http = new JKL.ParseXML('readxml.php');
var data = http.parse();
window.onload = function() {
    var output = '<ul>';
    for (var i=0; i<data.books.book.length; i++) {
        output += '<li><a href="' + data.books.book[i].url + '">' + data.books.book[i].name + '</a></li>';
    }
    output += '</ul>';
    
    document.getElementById('display').innerHTML = output;
}
</script>

JKL.ParseXMLに、XMLのパスを渡してHTTPオブジェクトを作ったあと「parse」メソッドを呼び出すと、JSON形式に変えてくれます。
この時、「parse」メソッドの前に「assync」メソッドにファンクションを渡すと、非同期通信モードとなり処理が終わると、指定されたファンクションが呼び出されるようになります。

あとは、そのファンクションを定義して XMLの解析などを行うと良いでしょう。

JKL.ParseXMLの詳しい使い方などは、関連項目をご覧ください。

関連項目

• XMLを解析するサンプルプログラム(JKL.ParseXML)

Tweet