1. まとめトップ

JavaScriptで外部サイトのファイルを取得するためのTips

JavaScriptで別ドメインの外部サイトのファイルを取得するためのTips。jquery.xdomainajax.jsを使わないと、クロスドメイン制約でエラーになります。

更新日: 2012年06月05日

17 お気に入り 58170 view
お気に入り追加

この記事は私がまとめました

mam3さん

0.Ajaxで追加した要素への操作【重要】

ajaxでDOMにappendした要素に対して、イベントを定義するなどの操作を行う場合は、ajaxでの読み込みが完了したときのコールバック:complete の中で行う。
他のところに書いても、読込み前に評価されてしまって、イベントが定義されない。

<script type=text/javascript>
$url = 'http://example.com';
$(function() {
$.ajax({
url: $url,
type: 'GET',
success: function(data) {
make_item_list(data);
},
complete: function() { // ここにイベントを定義する。これ超重要!
$('.sumb img').hover(
function() {
$('#img').attr('src', $(this).attr('src'));
$('#cap').html($(this).parent().attr('title'));
},
function() {
}
);
},
error: function(xhr, status, err) {
}
});
});
</script>

1.簡単なサンプル

<script type=text/javascript src=https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js></script>
<script type=text/javascript src=https://github.com/jamespadolsey/jQuery-Plugins/raw/master/cross-domain-ajax/jquery.xdomainajax.js></script>
<script type=text/javascript>
uri = 'http://www.yahoo.co.jp/';
$.get(uri, function(data){
alert(data.responseText);
});
</script>

2.実用例

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title>ご近所さんの今週の空間放射線量</title>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js type=text/javascript></script>
<script src=http://jsajax.com/jQuery/crossDomainAjax/jquery.xdomainajax.js type=text/javascript></script>
<script type=text/javascript>
$(function() {
$.ajax({
url: 'http://www.scenicbyway.jp/sv/jp/?graph',
type: 'GET',
success: function(data) {
$('#container').html(data.responseText);
$table = $('table', $('#container'));
$('#header').html($table.parent().prev().html());
$('#stock').html($table.parent().html());
}
});
});
</script>
</head>
<body>
<div id=header></div>
<div id=stock></div>
<div id=container style=display:none;>container</div>
</body>
</html>

3.jQuery.ajax リファレンス

$.ajax({
url: http://gdata.youtube.com/feeds/api/videos, // リクエストURL
data: { // 送信データ
vq: テスト, // 検索文字列
max-results: 5, // 最大取得件数
alt: json-in-script // jsonp
},
dataType: jsonp, // jsonp
cache: true, // キャッシュする
success: function(data, status, xhr) { // 通信成功時にデータを表示
$(#test_result).append(----- Youtube検索結果 -----);
$.each(data.feed.entry, function(i, item){
var group = item.media$group;

$(<div/>)
.append($(<img/>).attr(src, group.media$thumbnail[0].url))
.append(<br/>)
.append(item.title.$t)
.click(function(){window.open(group.media$player[0].url, null)})
.appendTo(#test_result);
});
}
});

4.Ajax/API/jQuery リファレンス

5.知っておいた方がいい jQuery Tips

$(function() {
$('div').
css('background-color', 'Yellow'). // 背景色を設定
filter('.match, #result'). // セレクタ式で絞り込み
css('border', 'solid 1px Blue'); // 枠線を設定
});

1