jQueryを使ってXMLを解析操作する(サンプルソースコード含める)

jQuery は、JavaScript™ と Ajax (Asynchronous JavaScript + XML) のプログラミングを単純化する 、2006年の初めに John Resig によって作成されました。JavaScript コードを扱うすべての人にとって素晴らしいライブラリーです。jQuery は、他の類似の JavaScript ライブラリーとは異なるユニークな考え方を持っており、一般的で複雑なコードを簡潔に表現することができます。この記事では、jQuery の考え方を学び、その特徴と機能を知り、いくつかの一般的な Ajax タスクを実行し、またプラグインを使って jQuery を拡張する方法を学びます。

jQuery は、コードを単純で簡潔なものにしておくために役立ちます。jQuery を利用することで、大量の繰り返しループや DOM Scripting ライブラリー・コールを作成する必要がなくなります。jQuery によって、本質的なことに集中することができ、また必要なことを最小限の文字数で表現することができます。

では、実際のソースからjQueryでXMLの解析を勉強しましょう。

1)、下記のような「jquery_xml.xml」というXMLファイルを作成する





Silverlight and the Netflix API

Tutorials
Silverlight 2.0
Silverlight
C#
XAML

1/13/2009


Cake PHP 4 – Saving and Validating Data

Tutorials
CakePHP
PHP

1/12/2009


Silverlight 2 – Using initParams

Tutorials
Silverlight 2.0
Silverlight
C#
HTML

1/6/2009


Silverlight 2 – Using initParams

Tutorials
Silverlight 2.0
Silverlight
C#
HTML

12/12/2008


2)、AJAXでXMLファイルを読み取る

それはjQueryに対して簡単です。

$(document).ready(function()
{
$.ajax({
type: “GET”,
url: “jquery_xml.xml”,
dataType: “xml”,
success: function(xml) { parseXml(xml); }
});
});

3)、parseXmlの関数を実装する

function parseXml(xml)
{
//find every Tutorial and print the author
$(xml).find(”Tutorial”).each(function()
{
$(”#output”).append($(this).attr(”author”) + “
”);
});
// Output:
// The Reddest
// The Harriest
// The Tallest
// The Fattest
}

jQueryにXMLを解析すること、selector systemですると一番簡単だと思います。次は[Date]と[Title]を出力するサンプルソースです。


//print the date followed by the title of each tutorial
$(xml).find(”Tutorial”).each(function()
{
$(”#output”).append($(this).find(”Date”).text());
$(”#output”).append(”: ” + $(this).find(”Title”).text() + “
”);
});
// Output:
// 1/13/2009: Silverlight and the Netflix API
// 1/12/2009: Cake PHP 4 – Saving and Validating Data
// 1/6/2009: Silverlight 2 – Using initParams
// 12/12/2008: Silverlight 2 – Using initParams

4)、[Category]以外の情報を解析するソース

//print each tutorial title followed by their categories
$(xml).find(”Tutorial”).each(function()
{
$(”#output”).append($(this).find(”Title”).text() + “
”);
$(this).find(”Category”).each(function()
{
$(”#output”).append($(this).text() + “
”);
});
$(”#output”).append(”
”);
});
// Output:
// Silverlight and the Netflix API
// Tutorials
// Silverlight 2.0
// Silverlight
// C#
// XAML
// Cake PHP 4 – Saving and Validating Data
// Tutorials
// CakePHP
// PHP
// Silverlight 2 – Using initParams
// Tutorials
// Silverlight 2.0
// Silverlight
// C#
// HTML
// Silverlight 2 – Using initParams
// Tutorials
// Silverlight 2.0
// Silverlight
// C#
// HTML

※1、XML概念の説明は「Javaでiniファイルを読み書きクラスソース」に参照できます。

※2、英語版チュートリアルは下記のURLで参照できます。

http://www.switchonthecode.com/tutorials/xml-parsing-with-jquery

Leave a Reply

Your email address will not be published. Required fields are marked *