jQuery Ajaxでクロスドメイン通信

前へ 次へ
このQ&Aのポイント
  • Ajaxを使用して、クロスドメイン通信を行いたい場合、dataTypeオプションを指定する必要があります。
  • データをPOSTで送信する場合、dataTypeオプションは受け取るレスポンスのデータタイプを指定します。
  • クロスドメイン通信を行うには、dataTypeオプションをjsonpにする必要があります。ただし、この場合、URLにパラメータが付与されるため、POSTリクエストで大量のデータを送信することはできません。
回答を見る
  • ベストアンサー

jQuery Ajaxでクロスドメイン通信

jQuery Ajaxでクロスドメイン通信をやりたいのです以下の質問について教えて下さい。 AjaxからPHP（別ドメイン）にデータをPOSTで投げたいです。 PHPファイルがあるディレクトリはBasic認証してあります。 質問1. AjaxのdataTypeオプションは、PHPからjQueryが受け取るレスポンスのデータタイプのことですか？ それともjQueryからPHPからにデータを投げる場合にもこのタイプ指定で何か変わるのでしょうか？ 質問2. クロスドメイン通信をdataTypeがjsonpじゃないとクロスドメイン通信はできないのでしょうか？ 質問3. dataTypeがjsonpのとき、jQueryから投げるURLの末尾に?data=hogehogeのようにパラメータが付きます。 typeオプションをPOSTにしているのにGETのようにパラメータが付くのはなぜでしょうか？ これのせいで、数千文字のパラメータをPOSTできずGETの文字数制限でエラーになってしまいます。 どれは一つでもおわかりでしたらお教え下さい。 よろしくお願い致します。

  • suffre
  • お礼率76% (2013/2633)

質問者が選んだベストアンサー

  • ベストアンサー
  • Picosoft
  • ベストアンサー率70% (274/391)
回答No.1

(1) > AjaxのdataTypeオプションは、PHPからjQueryが受け取るレスポンスのデータタイプのことですか？ はい。レスポンスのデータタイプです。 (2) > dataTypeがjsonpじゃないとクロスドメイン通信はできないのでしょうか？ セキュリティ上の理由（同一生成元ポリシー）から、 クロスドメインでAjaxリクエストを出すことはブラウザによって禁止されています。 そのため、iframeやプロキシ、JSONP、Flash（サーバ側で設定が必要）を使った回避策が考えられています。 XMLHttpRequest Level2を使えばクロスドメイン通信が可能ですが、 サーバ側で設定が必要になります。 (3) > dataTypeがjsonpのとき、……typeオプションをPOSTにしているのにGETのようにパラメータが付くのはなぜでしょうか？ JSONPではJavaScriptがリクエストを投げるのではなく、 HTMLの末尾に以下のようなscriptタグがこっそり追加されます。 　<script type="text/javascript" src="(送信先)?data=..."></script> 外部ファイルを読み込むようになっているためGETが使用されますし、 GETにボディはありませんからURLにパラメータがつきます。

suffre
質問者

お礼

ご回答頂きましてありがとうございます。 質問2.ですが、実はdataTypeをhtmlにしてもクロスドメイン通信はできました。 ただ、通信先のPHPがBasic認証しているディレクトリ以下にあり、Basic認証をしているとクロスドメイン通信はできず、Basic認証を外すとクロスドメイン通信ができるという、不可解な状況になりました。 そのためdataTypeをjsonpにしてクロスドメイン通信をしたらBasic認証をしていても通信ができました。しかし質問内容にもありますようにGETの文字数制限で引っかかってしまいました。 やりたいことは ・Basic認証をしているディレクトリ以下のPHPファイルにデータを投げたい ・PHPはjQueryを実行するドメインとは別のドメインです ・データの文字数は数千文字あるのでPOSTで投げたい ・PHPからjQueryが受け取るのはhtmlでもtextでもjsonでも何でもいいです。要はjQueryからPHPに大きめのデータが渡せればいいです これらを実現するために何かおわかりでしたらよろしくお願い致します。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JQueryでAjax通信をキャンセルした時につて

    JQueryでAjax通信時に、abort()でキャンセルを行うと通信はキャンセルになっているようですが、 サーバー側（Ajaxで呼ばれた処理）は、最後まで処理されてしまいます。 abort()を実行させた時に、サーバー側の処理まで中断させる方法はありますでしょうか？ 実行と中止は以下のような感じで書いています。 Ajax実行 arrXhr = $.ajax({ dataType: "json", type: "POST", url: "xxxxxxx.php", async: true, cache: false, data: sendData, success: function ( data ) { }, error: function ( XMLHttpRequest, textStatus, errorThrown ) { } }); 中止 xhr.abort();

  • Ajax・jQueryでGETとPOSTする方法

    画像をクリックしたときにjQuery,Ajaxを利用してGET/POSTをしたいです。 POSTとGETは良く使うので今回両方の流れを知りたいと思います。 PHPではPOST、GETは使うことができます。javascript,jQueryはちょっと触ったことのある程度です。 フォームに値を入力してjQueryとAjaxでPOSTでデータを送るのは下記ホームページを参考にしてみたら成功しました。 http://webcake.no003.info/webdesign/jquery-ajax-php-post-sample.html 今回は下記のような複数のパラメータを送信したいと思います。 画像Aをクリックした時にkeyword=aaaa,cate=1 画像Bをクリックした時にkeyword=bbbb,cate=2 画像Cをクリックした時にkeyword=cccc,cate=3 今までPHPでGETを使っていた時のHTML部分です↓ <a href="index.php?keyword=aaaa&cate=1"><img src="images/a.jpg"></a> <a href="index.php?keyword=bbbb&cate=2"><img src="images/b.jpg"></a> <a href="index.php?keyword=cccc&cate=3"><img src="images/c.jpg"></a> 「send.phpファイル」 <?php //POSTでデータが送られた場合 echo $_POST['keyword'].'<br>'; echo $_POST['cate'].'<br>'; //GETでデータが送られた場合 echo $_GET['keyword'].'<br>'; echo $_GET['cate'].'<br>'; ?> ==GET================================================================ （HTML部分） <a href="index.php?keyword=aaaa&cate=1"><img src="images/a.jpg"></a> の記載方法だと、クリックしたときにアドレスバーにアドレスが入力されるのでページが切り替わってしまいAjaxにならないので違う形にする必要があると思いますがどのようにkeyword,cateのパラメータを持たせればよいのでしょうか？ または、この形のままで良く、リンクした時にページが飛ばないような処理方法があるのでしょうか？（またはAjaxではあまりGETは使わないのでしょうか？） 上記に記載した、POSTの参考例のソースを記載します。 GETの場合にどのように変えたらよいのでしょうか。 $(document).ready(function() { var data = {request : $('#request').val()};//GETで複数値対応に書き換えが必要。 $.ajax({ type: "GET", url: "send.php", data: data, success: function(data, dataType) { $( '#test' ) . html( data ); },error: function(XMLHttpRequest, textStatus, errorThrown) { this; alert('Error : ' + errorThrown); } }); }); ==POST================================================================ （HTML部分） formを使う形になると思いますが、どのような書き方が良いのか教えて下さい。 画像を使うと下記のようになるとは思いますが、A,B,Cそれぞれにkeyword,cateの情報をどのように持たせておいたらよいのかがわかりません。 <form> <button type="submit" name="" value="*****"><img src="sample.gif"></button> </form> （jQuery部分） $(document).ready(function() { var data = {request : $('#request').val()};//POSTで複数値対応に書き換えが必要。 $.ajax({ type: "POST", url: "send.php", data: data, success: function(data, dataType) { $( '#test' ) . html( data ); },error: function(XMLHttpRequest, textStatus, errorThrown) { this; alert('Error : ' + errorThrown); } }); }); 以上、よろしくお願い致します。

    • ベストアンサー
    • AJAX
  • jqueryのAJAXで通信が完了した時のアラートをLightbox風

    jqueryのAJAXで通信が完了した時のアラートをLightbox風に表示したい。 コード <script type="text/javascript"> //<![CDATA[ $(function(){ $('#exebtn').click(function() { $.ajax({ type: "post", url : "sendmail.php", data : { message: $('#message').val(), exebtn:$('#exebtn').val()}, datatype:'text', //ここの部分をどう変えれば出来るのでしょうか？ success: function(data) { if(data != ''){ alert(data); }}, }); }); }); //]]> </script> ご教授、宜しくお願い致します。

    • ベストアンサー
    • AJAX
  • jquery,ajaxによるphp通信でnull

    初めまして。 現在jqueryを勉強中の学生です。 いろいろなサイトを参考にしつつ、試しににjquery・ajaxを使ったphpとの通信を試みているのですが、文字列のやりとりがうまくいきません。 数字ではうまくいくのですが、文字になるとalertの部分でnullと返されてしまいます。 アドバイス等頂ければと思います。 よろしくお願いいたします。 以下部分的ではありますがコードを示します。 (jqueryはjquery-1.11.1.min.jsを使用） [js] $.ajax({ type: "POST", url: "step1.php", data: send_data, success: function(receive_data) { var parseAr = JSON.parse(receive_data); alert(parseAr[0]['name']); }, error: function(XMLHttpRequest, textStatus, errorThrown) {alert('Error: ' + errorThrown); } }); return false; [php側] <?php if(isset($_POST['name'])) { $result = array(); $result[] = array('name'=>'織田', 'age'=>'33'); $result[] = array('name'=>'織田', 'age'=>'33'); echo json_encode($result); } else { echo json_encode('The parameter of "name" is not found.'); } exit; ?>

  • Jquery.ajaxでHTML読み込み

    現在、Jquery.ajaxを使って外部HTMLの読み込み処理を行い、処理完了後にフェードで表示させるということをしているのですが、読み込んだHTMLに貼り付けてある画像が読み込まれる前にHTMLが表示されてしまい、困っています。 Jquery.ajaxでは内包されている画像の監視まではできないのでしょうか？ 下記が今作っているコードです。 $contest.css({ "opacity": 0 }); $.ajax({ type: "GET", url: "hoge.html" dataType: "html", success: function(data) { $contest.html($(data).find("#hoge")); }, complete: function() { $contest.stop().animate({ "opacity": 1 }, 1000, "easeOutCubic"); } }); おわかりになる方、ご教授お願いします。

  • AJAXの書き方について

    <script type="text/javascript"> $( function() { $( '#ajax-button' ) .click( function() { $.ajax({ url: 'http://localhost:8080/app/family', type:'GET', data: {test1 : 'aaa', test2 : 'bbb' }, dataType: 'jsonp', success: function(data) { alert("ok"); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("ng"); } }); }); } ); </script> この部分は何を意味しているのでしょうか？ $( '#ajax-button' ) .click( またここの部分をIDにして二つ別々のIDを書いてblur(fn()にしたい場合はどうすればいいのでしょうか？ $("[id$=NO]").blur(function(){ $("[id$=NM]").blur(function(){ function() { $.ajax({ url: 'http://localhost:8080/app/family', type:'GET', data: {test1 : 'aaa', test2 : 'bbb' }, dataType: 'jsonp', success: function(data) { alert("ok"); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("ng"); } }); }); }); }); このようにしても動きません。 正しい書き方を教えていただきたいです。

  • Ajax.Updaterをクロスドメインで使用する方法

    Ajax.Updaterをクロスドメインで使用する方法 携帯から失礼します。 Ajax.Updaterをクロスドメインで使用する事は可能でしょうか？ JSONPを使用すれば可能とのページはいくつかあったのですが、具体的にはどのようにすればよいのか分かりません。 動的にscriptタグを作成し、srcに表示したいurlを書いて取得する所まではできました。 この後の処理方法についてご教受願います。

  • jQuery.ajaxのdata部分を共通化したい

    以下のコードについてアドバイスいただきたくご質問しました。 jQuery.ajax({ type: "POST", url: "/hoge.php", data: { 'aaaaa':'あああああああああああ', 'bbbbb':'いいいいいいいいいいいいいいいい', 'ccccc':'うううううううううううううううううううう', 'ddddd':'えええええええええええええええええ' } }); jQuery.ajax({ type: "POST", url: "/test.php", data: { 'aaaaa':'あああああああああああ', 'bbbbb':'いいいいいいいいいいいいいいいい', 'ccccc':'うううううううううううううううううううう', 'ddddd':'えええええええええええええええええ' } }); ↑この形のコードが復数あります。 data{～～}の内部は、同じなので共通化？したいのですが、 この場合はどのように記述すれば良いのでしょうか。 よく行う共通処理をfunctionなどでまとめておくような外部化みたいな事は可能でしょうか。 拙い説明ですが、よろしくお願いいたします。

  • jquery PHP 値　ajax

    失礼します。現在jqueryで作成した２次元配列をPHP側に渡したいのですが上手くいきません。 jquery側のコンソールで確認した際にはsuccessの処理が行われ配列の中身がjson形式で表示されるのですが、その内容をPHP側で確認しようとするとNULLが返ってきてしまいます。 何卒ご教授よろしくお願いいたします。 html側 $(function(){ // 送るデータ形式はJSONでなければ、PHP側でエラーが出る.のでJSON.stringify()でJSON形式に変換 send_data= JSON.stringify(data); // 送信処理 $.ajax({ url: "ajax.php", // 送信先のPHP type: "POST", // POSTで送る contentType: "Content-Type: application/json; charset=UTF-8", //必須ではなさそうだが、サーバ側との整合のために明示しておいた方がよい。 // dataType: 'json', //受信形式 必須ではなさそうだがサーバ側との整合のために明示しておいた方がよい。 data:send_data //JSON形式の送信データ }).success(function(data, status, xhr) { // 通信成功時の処理 console.log("success"); console.log("data ="+data); console.log("status ="+status); console.log("xhr ="+xhr); }).error(function(xhr, status, error) { // 通信失敗時の処理 console.log("error"); }).complete(function(xhr, status) { // 通信完了時の処理 console.log("fin"); }); }) }) PHP側 二通り試してみました。 <?php //php://inputはPOSTの生データを取得できる $json = file_get_contents("php://input"); //JSON形式データをPHPの配列型に変換 $data = json_decode($json); var_dump($data) ; //POSTできたデータを格納 $hoge = $_POST['data']; var_dump($hoge);

    • ベストアンサー
    • AJAX
  • jQueryでajax

    ajax（jQuery使用）を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート（This is success!）が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目１</option> <option value="2">項目２</option> </select> <p>結果：</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>

    • ベストアンサー
    • AJAX

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する