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

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

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

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

Download: jquery_xml.xml
  1. <?xml version=”1.0″ encoding=”utf-8″ ?>
  2. <RecentTutorials>
  3. <Tutorial author=”The Reddest”>
  4. <Title>Silverlight and the Netflix API</Title>
  5. <Categories>
  6. <Category>Tutorials</Category>
  7. <Category>Silverlight 2.0</Category>
  8. <Category>Silverlight</Category>
  9. <Category>C#</Category>
  10. <Category>XAML</Category>
  11. </Categories>
  12. <Date>1/13/2009</Date>
  13. </Tutorial>
  14. <Tutorial author=”The Harriest”>
  15. <Title>Cake PHP 4 - Saving and Validating Data</Title>
  16. <Categories>
  17. <Category>Tutorials</Category>
  18. <Category>CakePHP</Category>
  19. <Category>PHP</Category>
  20. </Categories>
  21. <Date>1/12/2009</Date>
  22. </Tutorial>
  23. <Tutorial author=”The Tallest”>
  24. <Title>Silverlight 2 - Using initParams</Title>
  25. <Categories>
  26. <Category>Tutorials</Category>
  27. <Category>Silverlight 2.0</Category>
  28. <Category>Silverlight</Category>
  29. <Category>C#</Category>
  30. <Category>HTML</Category>
  31. </Categories>
  32. <Date>1/6/2009</Date>
  33. </Tutorial>
  34. <Tutorial author=”The Fattest”>
  35. <Title>Silverlight 2 - Using initParams</Title>
  36. <Categories>
  37. <Category>Tutorials</Category>
  38. <Category>Silverlight 2.0</Category>
  39. <Category>Silverlight</Category>
  40. <Category>C#</Category>
  41. <Category>HTML</Category>
  42. </Categories>
  43. <Date>12/12/2008</Date>
  44. </Tutorial>
  45. </RecentTutorials>

２）、AJAXでXMLファイルを読み取る

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

  1. $(document).ready(function()
  2. {
  3.   $.ajax({
  4.     type: “GET”,
  5.     url: “jquery_xml.xml”,
  6.     dataType: “xml”,
  7.     success: function(xml) { parseXml(xml); }
  8. });
  9. });

３）、parseXmlの関数を実装する

  1. function parseXml(xml)
  2. {
  3. //find every Tutorial and print the author
  4.   $(xml).find(”Tutorial”).each(function()
  5. {
  6.     $(”#output”).append($(this).attr(”author”) + “<br />”);
  7. });
  8. // Output:
  9. // The Reddest
  10. // The Harriest
  11. // The Tallest
  12. // The Fattest
  13. }

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

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

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

  1. //print each tutorial title followed by their categories
  2. $(xml).find(”Tutorial”).each(function()
  3. {
  4.   $(”#output”).append($(this).find(”Title”).text() + “<br />”);
  5.   $(this).find(”Category”).each(function()
  6. {
  7.     $(”#output”).append($(this).text() + “<br />”);
  8. });
  9.   $(”#output”).append(”<br />”);
  10. });
  11. // Output:
  12. // Silverlight and the Netflix API
  13. // Tutorials
  14. // Silverlight 2.0
  15. // Silverlight
  16. // C#
  17. // XAML
  18. // Cake PHP 4 - Saving and Validating Data
  19. // Tutorials
  20. // CakePHP
  21. // PHP
  22. // Silverlight 2 - Using initParams
  23. // Tutorials
  24. // Silverlight 2.0
  25. // Silverlight
  26. // C#
  27. // HTML
  28. // Silverlight 2 - Using initParams
  29. // Tutorials
  30. // Silverlight 2.0
  31. // Silverlight
  32. // C#
  33. // HTML

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

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

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

メインコンテンツEND ■
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)
Loading ... Loading ...

Posted on Thursday, 15th January 2009 by admin

Tags: , , ,
Posted in Ajax/JavaScript | Comments (0) | 26,591 views

Leave a Reply