web-dev-qa-db-fra.com

Appel ajax jQuery à REST service

J'essaie de faire un appel ajax de jQuery à un service de repos. Le service de repos utilisé provient d'un tutoriel du blog de mkyong, celui-ci: http://www.mkyong.com/webservices/jax-rs/integrate-jackson-with-resteasy/

Le service fonctionne, mais lorsque j’essaie de passer un appel depuis jQuery, Firebug contient un code de statut 200, mais rien dans la section Réponse.

Voici la page html avec l'appel ajax:

<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>

Je ne peux pas comprendre où je me suis trompé, pourriez-vous me dire ce que je fais mal?

Merci!

jqueryrest
47
DaJackal

Vous utilisez votre code HTML à partir d'un hôte différent de celui que vous demandez. Pour cette raison, vous êtes bloqué par le même règle d'origine .

Une solution consiste à utiliser JSONP . Cela permet des requêtes entre sites.

En JSON, vous êtes renvoyé:

{a: 5, b: 6}

Dans JSONP, le JSON est encapsulé dans un appel de fonction. Il devient donc un script et non un objet.

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

Vous devez modifier votre service REST pour accepter un paramètre appelé callback, puis utiliser la valeur de ce paramètre comme nom de fonction. Vous devez également modifier le paramètre content-type à application/javascript.

Par exemple: http://localhost:8080/restws/json/product/get?callback=process devrait produire:

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

Dans votre JavaScript, vous devrez indiquer à jQuery d'utiliser JSONP. Pour ce faire, vous devez ajouter ?callback=? à l'URL.

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

Si tu utilises $.ajax, il ajoutera automatiquement le ?callback=? si vous lui dites d’utiliser jsonp.

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

D'après l'utilisation de 8080, je suppose que vous utilisez un conteneur de servlets Tomcat pour servir votre api de repos. Si tel est le cas, vous pouvez également envisager que votre serveur Web fournisse les requêtes au conteneur de servlets.

Avec Apache, vous utiliseriez généralement mod_jk (bien qu’il existe d’autres alternatives) pour servir l’API via le serveur Web situé derrière le port 80 au lieu de 8080, ce qui résoudrait le problème des domaines multiples.

Il est courant d’avoir le contenu "statique" dans le serveur Web et le contenu dynamique dans le conteneur, mais les deux servent derrière le même domaine.

L'URL pour le reste api serait http://localhost/restws/json/product/get

Voici une description sur la façon d'utiliser mod_jk pour connecter Apache à Tomcat: http://Tomcat.Apache.org/connectors-doc/webserver_howto/Apache.html

1
user1526458