ajaxを利用して、javascriptとjqueryで外部サイトのhtmlを取得する方法を紹介します。 正直、クロスドメインの問題があったので、かなりいろいろページ見て唸っていました。

  • No Access-Control-Allow-Origin header is present on the requested resource. Origin null is therefore not allowed access. が出る。 - 焼肉リア充
  • 続 クロスドメインで使う XM

でも、以下ページで簡単なやり方が書いてありました。

  • JavaScriptで外部サイトをスクレイピング【Cross-Domain-Ajax】JavaScriptプログラムメモ|プログラムメモ

方法

  • 下のページのjquery.xdomainajax.jsを持ってくる。

jquery.fn/cross-domain-ajax/jquery.xdomainajax.js at master · padolsey/jquery.fn

  • 自分のhtmlにソースとして追加。
<script type="text/javascript" src="jquery.xdomainajax.js"> </script>
  • あとはjavascriptにajaxのコードをかけばOk。 以下はjqueryを使った簡単な関数を作っています。そのままサイトのurlを引数に、サイトのページを表示します。
function readHtml(url) {
  $.ajax({
    type: GET,
    url: url,
    success: function(data) {
      $(#content).append(data.responseText);
    },
    error: function(xhr, status, err) {
      alert(HTML読み出しで問題がありました: + url);
    }
  });
}

data.responseTextがhtmlの中身になっております。

ちなみに、エラー時の処理なんていらないという方は、もっとシンプルな$.get()をお使いください。

基礎 Ajax + JavaScript

基礎 Ajax + JavaScript

  • 作者: 佐藤和人
  • 出版社/メーカー: インプレスジャパン
  • 発売日: 2006/12/01
  • メディア: 単行本
  • 購入: 4人 クリック: 96回
  • この商品を含むブログ (21件) を見る

Ajax&JavaーJavaプログラマのためのAjaxプライマー

Ajax&JavaーJavaプログラマのためのAjaxプライマー

  • 作者: Steven Douglas Olson,安藤慶一
  • 出版社/メーカー: オライリー・ジャパン
  • 発売日: 2007/08/10
  • メディア: 大型本
  • 購入: 1人 クリック: 5回
  • この商品を含むブログ (10件) を見る