jQueryでクロスドメインAjaxを実現する方法(jquery.xdomainajax.js)

photo credit: shooting brooklyn via photopin cc

はじめに

jQueryでクロスドメインAjax（別のサーバにあるデータを読む）を実現するには、jquery.xdomainajax.jsというプラグインを使うと簡単に実装できます。

Java開発者のための Ajax実践開発入門

posted with amazlet at 13.08.31

河村嘉之川尻剛福沢知海
技術評論社
売り上げランキング: 81,127

Amazon.co.jpで詳細を見る

jquery.xdomainajax.jsの入手

jquery.xdomainajax.jsは、以下のサイトからダウンロードすることができます。

jQuery-Plugins/cross-domain-ajax at master · padolsey/jQuery-Plugins · GitHub

jquery.xdomainajax.jsの使い方

以下のようにjQueryをインクルードした後に、jquery.xdomainajax.jsをインクルードします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.xdomainajax.js" type="text/javascript"></script>

サンプルプログラム

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jquery.xdomainajax.jsのテスト</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.xdomainajax.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>jquery.xdomainajax.jsのテスト</h1>
    <script>
      
      // ロード完了イベント
      $(document).ready(function(){
        $.ajax({
          url: 'https://www.google.co.jp',
          type: 'GET',
          cache: false, // キャッシュOFF

          // データのロード完了時の処理
          success: function(res) {
            content = $(res.responseText).text();
　　　　　　// 取得した内容をコンソールに出力
　　　　　　console.log(content);
          }
        });
      });

    </script>
  </body>
</html>