Ajaxを利用したクロスドメインでのデータ通信をいくつか試したのでそのときのメモ。
そもそも今回やりたかった事は、以下の3点を満たすようなデータ通信なのだけど、
- クロスドメインでのデータ通信
- SSLでの通信
- Basic認証配下のコンテンツにアクセス
Basic認証の部分のみ上手いやり方が思いつかなかった。。
これは引き続き調査しつつ、今回試したクロスドメインでのデータ通信のメモを残してみる。
で、そもそもクロスドメインでのデータ通信なのだが、これを実現するには以下の2つ方法があるらしい。
- JSONPを利用した対応
- CORS (Cross-Origin Resource Sharing)を利用した対応
JSONPを利用した対応は以前にも利用した事があったのだけど、CORSは知らなかった。
今回は以下の方法を試してみた。
- JSONPを利用した対応(<script>タグを利用)
- JSONPを利用した対応(jQuery ajaxを利用)
- CORS (Cross-Origin Resource Sharing)を利用した対応
1. JSONPを利用した対応(<script>タグを利用)
これが一番簡単な対応かもしれない。以下の例だとjavascriptでscriptタグに後からURLを追加しているけど、はじめからscriptタグに追記しても良いと思う。
var callback = function(data){ console.log('[Using <script> tag case] '+data); } var script = document.createElement('script'); script.src = 'http://www.dummy.com/jsonp.php';
2. JSONPを利用した対応(jQuery ajaxを利用)
jQueryでもajax関数を使う事でJSONPを利用する事ができる。その場合はjsonpCallbackオプションに
コールバック関数を指定する。
(function(){ $.ajax({ 'type':'get', 'url':'http://www.dummy.com/jsonp.php', 'jsonpCallback':'callback', 'timeout':5000, 'dataType':'jsonp' }) .done(function(data){ if(data){ console.log('[Using jQuery.ajax function case] '+data); } }) .fail(function(jqXHR,textStatus,errorThrown){ console.log('['+textStatus+'] '+errorThrown); }); }());
3. CORS (Cross-Origin Resource Sharing)を利用した対応
わかりやすい説明は他のブログに任せるとして、とりあえずCORSはHTTPリクエストに付与するOriginリクエストヘッダ(Access-Control-Allow-Originレスポンスヘッダ)を弄る事でクロスドメイン通信に対応する方法らしい。
具体的にはこんな感じ。
<?php // サーバー側(PHPで実装) $jsonArray=array( array( 'title'=>'Test title 1', 'description'=>'Decsciption', 'url'=>'http://www.google.com' ), array( 'title'=>'Test title 2', 'description'=>'Decsciption', 'url'=>'http://www.google.com' ), array( 'title'=>'Test title 3', 'description'=>'Decsciption', 'url'=>'http://www.google.com' ), array( 'title'=>'Test title 4', 'description'=>'Decsciption', 'url'=>'http://www.google.com' ), array( 'title'=>'Test title 5', 'description'=>'Decsciption', 'url'=>'http://www.google.com' ), ); header('Access-Control-Allow-Origin: *'); echosprintf("callback(%s)",json_encode($jsonArray));
これだとクライアント側でXMLHttpRequest2による通信が可能になる。
//クライアント側 varxmlhttp=null; if(typeofXDomainRequest!="undefined"){ // IE8 xmlhttp=newXDomainRequest(); } elseif(typeofXMLHttpRequest!="undefined"){ // firefox, safari, chorme and so on.. xmlhttp=newXMLHttpRequest(); } elseif(window.ActiveXObject){ // previous IE7 xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); } else{ console.log('This blowser disable to crossdomain request. '); } xmlhttp.onReadyStateChange=function(){ console.log(xmlhttp.readyState); if(xmlhttp.readyState==2){ console.log(xmlhttp.responseText); } } xmlhttp.open( "GET", "http://www.dummy.com/json.php", true ); xmlhttp.send();
一応ソースはgithubにもアップしておいたので、他の方法とかBasic認証と絡めた対応とかができたらコミットしておこうと思う。