4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

jQueryでAjaxを利用する(1)

Last updated at Posted at 2015-06-10

参考
http://ascii.jp/elem/000/000/458/458236/

###XMLファイルを取得しHTMLとしてブラウザーに表示
テキストファイルやHTMLは、そのまま表示すればよいのですが、XMLは取得した内容を加工しないとHTMLとしてブラウザーが表示できません。

XMLの取得/操作には、ajax()という命令を使う。
参考
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

ajax()は以下のような書き方で使う。

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

 ajax()にはセレクターの指定は無く$.で始まり、括弧内の{...}に設定(オプション)を記述します。設定は左側に項目名を、右側には項目に対応する値を記述し、左右は:(コロン)で区切ります。複数の設定は,(カンマ)区切りでつなげていきます。

 urlには取得したいXMLファイル名を、dataTypeにはデータの種類として「xml」を設定します。successはデータの取得に成功した時に実行する処理を設定し、処理の内容はfunction(data){...}の内容にまとめて記述します。
 
###RSSを取得して表示する
 ajax()を使ったサンプルとして、代表的なXML形式のファイルであるRSSを取得し、HTMLに見やすく加工して表示してみましょう。
 
sample3.xml

ASCII.jp - Web Professional(ウェブ・プロフェッショナル) http://ascii.jp/cate/161/ Sun, 23 Aug 2009 10:08:43 +0900 ママチャリ屋が高級店に Web展開でトップギア Fri, 21 Aug 2009 11:00:00 +0900 http://ascii.jp/elem/000/000/451/451782/summary.html 入門Ext JS:グリッドパネルの使い方をマスター Thu, 20 Aug 2009 14:00:00 +0900 http://ascii.jp/elem/000/000/450/450711/summary.html サーバー不要!Yahoo! PipesでXML→JSONPに変換 Wed, 22 Jul 2009 23:07:25 +0900 http://ascii.jp/elem/000/000/438/438132/summary.html >```

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

title
  タイトル
pubDate
  公開日
link
  記事のURL
description
  記事の概要
  
<title>...</title>の内容をdt要素に入れ、<link>...</link>に記述されているURLにa要素でリンクを張ります。<description>...</description>の内容はdd要素に入れます。

sample3.html<body>の中

ママチャリ屋が高級店に Web展開でトップギア
今から12年前、(中略)その舞台裏を追った。
入門Ext JS:グリッドパネルの使い方をマスター
JavaScript(中略)を紹介する。
サーバー不要!Yahoo! PipesでXML→JSONPに変換
XMLをJSONPに(中略)作れる。
>```

 
実行結果

スクリーンショット 2015-05-27 11.48.06.png

 
sample3(スクリプト部分)

 
ajax()でサーバー上にあるRSSファイル「msample3.xml」の内容をXMLデータとして取得します。

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

 
XMLの取得に成功すると、取得した内容は function(data){...} の「data」に入ります。このdataを対象にして加工処理をします。

$("item",data).each(function(){
//に対する処理
})

 
$("item",data) はXMLのitem要素の内容を取得するセレクターです。jQueryセレクターでは"(ダブルクオーテーション)で包まれたセレクターの後ろに,(カンマ)区切りでセレクターの範囲を指定できます。この場合、itemを取得する範囲は「data」、つまり取得したXMLの内容ということになります。

each(function(){...})は、セレクターに含まれる複数の要素に対して、1回ずつ同じ処理を繰り返し実行する命令です
このサンプルの場合、セレクターでitem要素が指定されており、XMLには3つのitem要素が存在しますので、それぞれのitem要素に対して処理が1回ずつ、計3回実行されます。

 

$("dl").append("

"+$("title",this).text()+"
"+$("description",this).text()+"
");

append()は、指定した要素内部の最後にHTMLを挿入する命令でした。今回はdl要素の内側に、dt要素とdd要素を挿入しています。

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?