More than 5 years have passed since last update.

jQueryとAjaxの使い方 2

Posted at 2015-05-26

#XMLの中身をWebページ上に表示させる
Ajaxを使ってXMLで取得した内容を加工し表示させる。
加工しなければHTML上に表示できない。

使用するAjaxコード

$.ajax({
    url: '取得するXMLファイル',
    dataType: 'xml',
    success : function(data){
        //取得したファイルに対する処理
    }
})

#使用するファイル

##Sample.html
AjaxとjQueryの操作によりXMLのデータを取得しweb上に表示させる。

##Sample.xml
中身のデータをHTMLに表示できるようにに加工する。

#コード解説

Sample.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>sample2</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(function(){
           $.ajax({
           url: 'Sample.xml',
           dataType: 'xml',
           success : function(data){
              $("item",data).each(function(){
                $("dl").append("<dt><a    href='"+$("link",this).text()+"'>"+$("title",this).text ()+"</a></dt><dd>"+$("description",this).text()+"                     </dd>");
               })
             }
          })
       })
       </script>
    </head>
    <body>
        <dl></dl>
    </body>
</html>

Ajaxで取得したXML内のデータをbodyの中にある＜dl＞内に表示させます。

Sample.xml


<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
    <channel>
        <title>ASCII.jp － Web Professional（ウェブ・プロフェッショナル）</title>
        <link>http://ascii.jp/cate/161/</link>
        <pubDate>Sun, 23 Aug 2009 10:08:43 +0900</pubDate>
        <item>
            <title>ママチャリ屋が高級店に　Web展開でトップギア </title>
            <pubDate>Fri, 21 Aug 2009 11:00:00 +0900</pubDate>
            <link>http://ascii.jp/elem/000/000/451/451782/summary.html</link>
            <description><![CDATA[今から12年前、(中略)その舞台裏を追った。]]></description>
        </item>
        <item>
            <title>入門Ext JS：グリッドパネルの使い方をマスター </title>
            <pubDate>Thu, 20 Aug 2009 14:00:00 +0900</pubDate>
            <link>http://ascii.jp/elem/000/000/450/450711/summary.html</link>
            <description><![CDATA[JavaScript(中略)を紹介する。]]></description>
        </item>
        <item>
            <title>サーバー不要！Yahoo! PipesでXML→JSONPに変換 </title>
            <pubDate>Wed, 22 Jul 2009 23:07:25 +0900</pubDate>
            <link>http://ascii.jp/elem/000/000/438/438132/summary.html</link>
            <description><![CDATA[XMLをJSONPに(中略)作れる。]]></description>
        </item>
    </channel>
</rss>

XMLのitem要素内にそれぞれ個別の記事の更新情報が記述されており、その子要素には以下のようなデータが記述されています。

title
   タイトル

pubDate
   公開日

link
   記事のURL

description
   記事の概要

#コード実行結果

取得したXMLデータの加工によりURLやタイトルに
＜title＞や＜a＞などを指定させ表示させています。

#参考にしたサイト
http://ascii.jp/elem/000/000/458/458236/index-3.html

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up