web-dev-qa-db-ja.com

RESTサービスへのjQuery ajax呼び出し

Jqueryからrestサービスへのajax呼び出しをしようとしています。使用されている残りのサービスは、mkyongのブログのチュートリアル、この1つからのものです。 http://www.mkyong.com/webservices/jax-rs/integrate-jackson-with-resteasy/

サービスは動作しますが、jQueryから呼び出しを行おうとすると、Firebugに200ステータスコードがありますが、応答セクションには何もありません。

これは、ajax呼び出しを含むhtmlページです。

<html>
<head>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>

<body>  

<button id="ajax">ajax call</button>
<button id="json">json</button>

<script type="text/javascript">
    $('#json').click(function(){ 
        alert('json');
         $.getJSON("http://localhost:8080/restws/json/product/get",
         function(data) {
            alert(data);         
          });   
    });

    $('#ajax').click(function(){ 
        alert('ajax');
         $.ajax({ 
             type: "GET",
             dataType: "json",
             url: "http://localhost:8080/restws/json/product/get",
             success: function(data){        
                alert(data);
             }
         });
    });

</script>



</body>

</html>

私がどこを間違えたのかわかりませんが、私が何を間違っているのか教えてください。

ありがとう！

jqueryrest
47
DaJackal

要求しているホストとは異なるホストからHTMLを実行しています。このため、 同じオリジンポリシー によってブロックされています。

これを回避する1つの方法は、 JSONP を使用することです。これにより、クロスサイトリクエストが可能になります。

JSONでは、以下が返されます。

{a: 5, b: 6}

JSONPでは、JSONは関数呼び出しでラップされるため、オブジェクトではなくスクリプトになります。

callback({a: 5, b: 6})

RESTサービスを編集してcallbackというパラメーターを受け入れ、そのパラメーターの値を関数名として使用する必要があります。 content-typeもapplication/javascriptに変更する必要があります。

例えば：http://localhost:8080/restws/json/product/get?callback=processは以下を出力するはずです：

process({a: 5, b: 6})

JavaScriptでは、jQueryにJSONPを使用するように指示する必要があります。これを行うには、?callback=?をURLに追加する必要があります。

$.getJSON("http://localhost:8080/restws/json/product/get?callback=?",
   function(data) {
     alert(data);         
   });

$.ajaxを使用する場合、jsonpを使用するように指示すると、?callback=?が自動的に追加されます。

$.ajax({ 
   type: "GET",
   dataType: "jsonp",
   url: "http://localhost:8080/restws/json/product/get",
   success: function(data){        
     alert(data);
   }
});
78
Rocket Hazmat

8080の使用から、Tomcatサーブレットコンテナーを使用して残りのAPIを提供していると想定しています。この場合、Webサーバーがサーブレットコンテナーへのリクエストをプロキシすることを検討することもできます。

Apacheでは、通常、mod_jkを使用して（他の代替手段はありますが）、8080ではなくポート80の背後のWebサーバーでAPIを提供し、クロスドメインの問題を解決します。

これは一般的な方法であり、Webサーバーに「静的」コンテンツを、コンテナに動的コンテンツを入れますが、両方とも同じドメインの背後から提供されます。

残りのAPIのURLはhttp://localhost/restws/json/product/getになります

ここでmod_jkを使用してApacheをTomcatに接続する方法の説明： http://Tomcat.Apache.org/connectors-doc/webserver_howto/Apache.html

1
user1526458