118

Is there a JavaScript library which allow me to perform all the REST operation like (GET, POST, PUT and DELETE over HTTP or HTTPS)?

9 Answers 9

139

You don't really need a specific client, it's fairly simple with most libraries. For example in jQuery you can just call the generic $.ajax function with the type of request you want to make:

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

You can replace PUT with GET/POST/DELETE or whatever.

Sign up to request clarification or add additional context in comments.

11 Comments

jQuery also includes some handy shortcut methods for using GET and POST: api.jquery.com/category/ajax/shorthand-methods
and to expand on what @Avi Flax said, it's very simple to create your own PUT and DELETE methods if you want shortcuts.
How do you retrieve the body of the response? the headers?
@PantelisSopasakis the success callback takes a data argument, that will contain the response.
Technically, this is not a REST client, it's a HttpClient. I'm looking for something that shows how to properly use link relations and media types to drive state. Will keep looking...
|
72

While you may wish to use a library, such as the excellent jQuery, you don't have to: all modern browsers support HTTP very well in their JavaScript implementations via the XMLHttpRequest API, which, despite its name, is not limited to XML representations.

Here's an example of making a synchronous HTTP PUT request in 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 + ".");

This example is synchronous because that makes it a little easier, but it's quite easy to make asynchronous requests using this API as well.

There are thousands of pages and articles on the web about learning XmlHttpRequest — they usually use the term AJAX – unfortunately I can't recommend a specific one. You may find this reference handy though.

Comments

11

You can use this jQuery plugin I just made :) https://github.com/jpillora/jquery.rest/

Supports basic CRUD operations, nested resources, basic auth

  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 !' );
  });

If you find bugs or want new features, post them in the repositories 'Issues' page please

2 Comments

I like how simple you have made it. It does appear to support additional options when you need them but you keep them out of the way.
Wow. You shared so many open sources. Respect.
8

jQuery has JSON-REST plugin with REST style of URI parameter templates. According to its description example of using is the followin: $.Read("/{b}/{a}", { a:'foo', b:'bar', c:3 }) becomes a GET to "/bar/foo?c=3".

Comments

6

For reference I want to add about ExtJS, as explained in Manual: RESTful Web Services. In short, use method to specify GET, POST, PUT, DELETE. Example:

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

If the Accept header is necessary, it can be set as a default for all requests:

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

Comments

3

You can also use mvc frameworks like Backbone.js that will provide a javascript model of the data. Changes to the model will be translated into REST calls.

Comments

3

You can try restful.js, a framework-agnostic RESTful client, using a syntax similar to the popular Restangular.

Comments

1

Dojo does, e.g. via JsonRestStore, see http://www.sitepen.com/blog/2008/06/13/restful-json-dojo-data/ .

Comments

0

You can use http://adodson.com/hello.js/ which has

  1. Rest API support
  2. Built in support for many sites google, facebook, dropbox
  3. It supports oAuth 1 and 2 support.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.