Bibliothèque cliente JavaScript REST [fermée]


117

Y at - il une bibliothèque JavaScript qui me permettent d'effectuer toutes les opérations REST comme ( GET, POST, PUTet DELETEplus HTTPou HTTPS)?

Réponses:


139

Vous n'avez pas vraiment besoin d'un client spécifique, c'est assez simple avec la plupart des bibliothèques. Par exemple, dans jQuery, vous pouvez simplement appeler la $.ajaxfonction générique avec le type de requête que vous souhaitez effectuer:

$.ajax({
    url: 'http://example.com/',
    type: 'PUT',
    data: 'ID=1&Name=John&Age=10', // or $('#myform').serializeArray()
    success: function() { alert('PUT completed'); }
});

Vous pouvez remplacer PUTpar GET/ POST/ DELETEou autre.


10
jQuery comprend également des méthodes de raccourci pratiques pour utiliser GET et POST: api.jquery.com/category/ajax/shorthand-methods
Avi Flax

et pour développer ce que @Avi Flax a dit, il est très simple de créer vos propres méthodes PUTet DELETEméthodes si vous voulez des raccourcis.
zzzzBov

2
Comment récupérez-vous le corps de la réponse? les en-têtes?
Pantelis Sopasakis

@PantelisSopasakis le successrappel prend un dataargument, qui contiendra la réponse.
soulseekah

6
Techniquement, ce n'est pas un client REST, c'est un HttpClient. Je recherche quelque chose qui montre comment utiliser correctement les relations de lien et les types de médias pour piloter l'état. Je vais continuer à chercher ...
Peter McEvoy

71

Bien que vous souhaitiez peut-être utiliser une bibliothèque, telle que l'excellent jQuery , ce n'est pas nécessaire: tous les navigateurs modernes supportent très bien HTTP dans leurs implémentations JavaScript via l' API XMLHttpRequest , qui, malgré son nom, ne se limite pas aux représentations XML .

Voici un exemple de création d'une requête HTTP PUT synchrone en JavaScript:

var url = "http://host/path/to/resource";
var representationOfDesiredState = "The cheese is old and moldy, where is the bathroom?";

var client = new XMLHttpRequest();

client.open("PUT", url, false);

client.setRequestHeader("Content-Type", "text/plain");

client.send(representationOfDesiredState);

if (client.status == 200)
    alert("The request succeeded!\n\nThe response representation was:\n\n" + client.responseText)
else
    alert("The request did not succeed!\n\nThe response status was: " + client.status + " " + client.statusText + ".");

Cet exemple est synchrone car cela facilite un peu les choses, mais il est également assez facile de faire des requêtes asynchrones à l'aide de cette API.

Il existe des milliers de pages et d'articles sur le Web sur l'apprentissage de XmlHttpRequest - ils utilisent généralement le terme AJAX - malheureusement, je ne peux pas en recommander un en particulier. Vous pouvez cependant trouver cette référence pratique.


11

Vous pouvez utiliser ce plugin jQuery que je viens de créer :) https://github.com/jpillora/jquery.rest/

Prend en charge les opérations CRUD de base, les ressources imbriquées, l'authentification de base

  var client = new $.RestClient('/api/rest/');

  client.add('foo');
  client.foo.add('baz');
  client.add('bar');

  client.foo.create({a:21,b:42});
  // POST /api/rest/foo/ (with data a=21 and b=42)
  client.foo.read();
  // GET /api/rest/foo/
  client.foo.read("42");
  // GET /api/rest/foo/42/
  client.foo.update("42");
  // PUT /api/rest/foo/42/
  client.foo.delete("42");
  // DELETE /api/rest/foo/42/

  //RESULTS USE '$.Deferred'
  client.foo.read().success(function(foos) {
    alert('Hooray ! I have ' + foos.length + 'foos !' );
  });

Si vous trouvez des bogues ou souhaitez de nouvelles fonctionnalités, postez-les dans la page «Problèmes» des référentiels s'il vous plaît


2
J'aime la simplicité que vous avez faite. Il semble prendre en charge des options supplémentaires lorsque vous en avez besoin, mais vous les gardez à l'écart.
Stradas

Sensationnel. Vous avez partagé tant de sources ouvertes. Le respect.
wonsuc

8

jQuery a le plugin JSON-REST avec le style REST des modèles de paramètres URI. Selon sa description, l'exemple d'utilisation est le suivant: $.Read("/{b}/{a}", { a:'foo', b:'bar', c:3 })devient un GET vers "/ bar / foo? C = 3".


6

Pour référence, je veux ajouter sur ExtJS, comme expliqué dans Manuel: Services Web RESTful . En bref, utilisez la méthode pour spécifier GET, POST, PUT, DELETE. Exemple:

Ext.Ajax.request({
    url: '/articles/restful-web-services',
    method: 'PUT',
    params: {
        author: 'Patrick Donelan',
        subject: 'RESTful Web Services are easy with Ext!'
    }
});

Si l'en-tête Accept est nécessaire, il peut être défini par défaut pour toutes les demandes:

Ext.Ajax.defaultHeaders = {
    'Accept': 'application/json'
};

3

Vous pouvez également utiliser des frameworks mvc comme Backbone.js qui fourniront un modèle javascript des données. Les modifications apportées au modèle seront traduites en appels REST.




En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.