<script> $.ajax({・・・を別ファイルに書き出す方法は？

Question

某サイトにあるfeedを書き出すスクリプトをシンプルにしようと、

スクリプトだけ別ファイルに書き出してみたのですが、

思うように動いてくれません。

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
$.ajax({
	url: 'http://example.com/feed',
	type: 'get',
	dataType: 'xml',
	timeout: 5000,
	success: function(xml, status) {
		if (status === 'success') {
			var row = 0;
			var data = [];
			var nodeName;
			$(xml).find('item').each(function() {
				data[row] = {};
				$(this).children().each(function() { // 子要素を取得
				    nodeName = $(this)[0].nodeName; // 要素名
				    data[row][nodeName] = {}; // 初期化
				    attributes = $(this)[0].attributes; // 属性を取得
				    for (var i in attributes) {
						data[row][nodeName][attributes[i].name] = attributes[i].value; // 属性名 = 値
				    }
					data[row][nodeName]['text'] = $(this).text();
				});
				row++;
			});
			$('#rss').wrapInner('<ul></ul>');
			for (i in data) {
			    $('#rss').find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a></li>');
			}
		}
	}  
});

上記は直接HTMLに記述すると問題なく表示されますが、

下記のように別ファイルに書き出すと動かなくなります。

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="components/rss.js"></script>

「components/rss.js」の記述はこうです。

$.ajax({
	url: 'http://example.com/feed',
	type: 'get',
	dataType: 'xml',
	timeout: 5000,
	success: function(xml, status) {
		if (status === 'success') {
			var row = 0;
			var data = [];
			var nodeName;
			$(xml).find('item').each(function() {
				data[row] = {};
				$(this).children().each(function() { // 子要素を取得
				    nodeName = $(this)[0].nodeName; // 要素名
				    data[row][nodeName] = {}; // 初期化
				    attributes = $(this)[0].attributes; // 属性を取得
				    for (var i in attributes) {
						data[row][nodeName][attributes[i].name] = attributes[i].value; // 属性名 = 値
				    }
					data[row][nodeName]['text'] = $(this).text();
				});
				row++;
			});
			$('#rss').wrapInner('<ul></ul>');
			for (i in data) {
			    $('#rss').find('ul').append('<li><a href="' + data[i].link.text + '">' + data[i].title.text + '</a></li>');
			}
		}
	}  
});

不具合の対処法を教えてください。

あとですね、

上記方法ではfeedのtextは書き出してくれますが、

ブログ記事内の画像を抽出することは可能でしょうか？

可能であれば記述法を教えてください。

Answer 1

外部ファイル最後の</script>はいらないのでは？

Comments

[hizirida]

質問の記述を間違えていました。
実際には</script>は書いていません。
修正します。

[yambejp]

とりあえず、エラーがでてないか開発ツールでチェックしてみてください

[hizirida]

開発ツールでチェックしましたが、エラーはないようです。

[yambejp]

success: function内にconsole.logでデバッグ用の文字をかくとか
（console.log("ok!")）

error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log( textStatus);
}
でajaxでの受取失敗状況を確認したほうがいいですね

ご提示いただいた内容ではjqueryの読み込みが複数しているようには
見えませんが、もしそれで納得したならそれはそれで構いません

[hizirida]

この件以外に、１ページ内に下記のものも利用しています。
<script src="js/sidr/jquery.js"></script>
<script src="js/sidr/jquery.sidr.min.js"></script>
<script src="js/wrap.js"></script>
<script defer src="js/FlexSlider2/jquery.flexslider-min.js"></script>

どこかにバッティングしていませんかんね。

[masaya_ohashi]

1行目でjquery.jsって読み込んでるじゃないですか。おそらくsidrというパッケージにデフォルトでついてくるjqueryだと思います。googleapisから読み込んでいるjquery.min.jsもjQueryなので2回jQueryを読み込んでいることになります。これなら一番上にgoogleapisのjquery.min.jsを持ってきて、sidr/jquery.jsを消すべきです。

Answer 2

色々と検証しましたが、その他のjqueryと、

下記とがバッティングしているように思えます。

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

よって、この件は諦めることにします。

ご回答ありがとうございました。

Answer 3

コードの先頭にconsole.log("test")などを記述して、本当にその外部ファイルが読み込まれているか確認してみてください。コンソールにエラーが出ていなくても、通信ログのほうにエラーが出ていないですか？

Comments

[hizirida]

ご回答ありがとうございます。

Answer 4

とりあえずフルパスにしてみるとか。

<script src="http://example.com/components/rss.js"></script>

あとはドキュメントの用意を待ってみるとか。

$( function() {
    $.ajax({ /* 略 */ });
} );

---

ひとまずデベロッパーツールでエラーを確認してそれを質問文に追記してください。

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Chrome デベロッパーツールの使い方概要 | Web Tips】
http://weback.net/utility/1410/

【Web関係者は知っておくべきGoogleChromeデベロッパーツールの使い方 | Ocadweb】
http://ocadweb.com/web/googlechromedevelopertools

Comments

[hizirida]

提案していただいたところを検証しましたが、やはり動いてくれません。