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

Mitul
  • 3,543
  • 2
  • 18
  • 34
Amir Arad
  • 6,436
  • 8
  • 40
  • 47

9 Answers9

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.

Doug Paul
  • 1,073
  • 10
  • 15
aleemb
  • 28,346
  • 17
  • 92
  • 111
  • 10
    jQuery also includes some handy shortcut methods for using GET and POST: http://api.jquery.com/category/ajax/shorthand-methods/ – Avi Flax Jul 18 '10 at 13:49
  • and to expand on what @Avi Flax said, it's very simple to create your own `PUT` and `DELETE` methods if you want shortcuts. – zzzzBov Aug 08 '11 at 14:45
  • 2
    How do you retrieve the body of the response? the headers? – Pantelis Sopasakis Mar 26 '12 at 12:02
  • @PantelisSopasakis the `success` callback takes a `data` argument, that will contain the response. – soulseekah Mar 29 '12 at 21:59
  • @Soulseekah: Hmm... I didn't exactly get it. A simple example maybe? You mean success should become like success(data): function() {//do things with data} ? – Pantelis Sopasakis Mar 30 '12 at 01:16
  • `success: function(data) { console.log(data); }` http://api.jquery.com/jQuery.ajax/ – soulseekah Mar 30 '12 at 10:03
  • 6
    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... – Peter McEvoy Nov 30 '12 at 09:27
  • Hey @aleemb, I have a similar request. I need to initiate a GET call but using Javascript only as our engine can only understand that. Is there a way I can rewrite this code to Javascript. I am not a jQuery guy..its kind of problem for me understanding this.. – Sid Dec 11 '13 at 07:33
  • @PeterMcEvoy Hi Peter, if this is not what you were looking for, please try to not mark it as the answer. Thanks – TechnicalTophat Jul 01 '16 at 13:38
  • @RhysO - err, this was not my question nor answer, I only commented... – Peter McEvoy Jul 02 '16 at 09:26
  • @PeterMcEvoy oops sorry got the tone of your comment wrong... Apologies. You are right though. – TechnicalTophat Jul 03 '16 at 14:55
71

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.

Avi Flax
  • 46,847
  • 9
  • 42
  • 61
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

jpillora
  • 4,885
  • 2
  • 41
  • 55
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".

Volodymyr Frolov
  • 1,174
  • 4
  • 14
  • 24
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'
};
stivlo
  • 77,013
  • 31
  • 135
  • 193
3

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

François Zaninotto
  • 4,968
  • 31
  • 47
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.

Stig Husby
  • 1,464
  • 11
  • 14
1

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

Alex Martelli
  • 762,786
  • 156
  • 1,160
  • 1,345
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.
Alireza Fattahi
  • 33,509
  • 12
  • 96
  • 140