Sunday, June 5, 2011

Javascript REST client

Note: I still work on text, code example should be fine.



REST is the one of the most popular interfaces on the web today. One part to its success it owes to its simplicity.

How number of sites that support REST grows we will need some fast and good solution to use those services on client side. Even if its possible to do it all, since REST is based on http, with old AJAX calls, it would be nice to have some little more...

This is one approach that i choose. I create in javascript new object that has six methods five for REST methods, four for POST, PUT, GET and REMOVE plus one more to GET all resources, and one more to get html template to display your data.

This code is based on jquery and json js libs.

function RestServiceJs(newurl) {
  this.myurl = newurl;

  this.add = function(model, callback) {
    $.ajax({
      type: 'POST',
      url: this.myurl,
      data: JSON.stringify(model), // '{"name":"' + model.name + '"}',
      dataType: 'text',
      processData: false,
      contentType: 'application/json',
      success: callback,
      error: function(req, status, ex) {},
      timeout:60000
    });
  };

  this.update = function(model, callback) {
    $.ajax({
      type: 'PUT',
      url: this.myurl,
      data: JSON.stringify(model), // '{"name":"' + model.name + '"}',
      dataType: 'text',
      processData: false,
      contentType: 'application/json',
      success: callback,
      error: function(req, status, ex) {},
      timeout:60000
    });
  };

  this.find = function(id, callback) {
    $.ajax({
      type: 'GET',
      url: this.myurl + '/' + id,
      contentType: 'application/json',
      success: callback,
      error: function(req, status, ex) {},
      timeout:60000
    });
  };

  this.findAll = function(callback) {
    $.ajax({
      type: 'GET',
      url: this.myurl,
      contentType: 'application/json',
      success: callback,
      error: function(req, status, ex) {},
      timeout:60000
    });
  };

  this.remove = function(id, callback) {
    $.ajax({
      type: 'DELETE',
      url: this.myurl + '/' + id,
      contentType: 'application/json',
      success: callback,
      error: function(req, status, ex) {},
      timeout:60000
    });
  };

  this.loadTmpl = function(turl, callback) {
    $.ajax({
      url: turl,
      success: callback,
      error: function(req, status, ex) {},
      timeout:60000
    });
  }
}


Later you will just need to extend your rest service with your url and use it.
After that you can use in your code like this:

var carRestServiceJs = new RestServiceJs('/rest/car');

// add update event
$("a.update_link").click(function() {

  carRestServiceJs.find(this.id, function(data) {
  
    loadAddModel(data);
    $("#modelName").val(data.name);
  });
});


Please tell me what do you think about it, and,,,,

2 comments:

Anonymous said...

Thanks for your article, it's very useful !
However I think you've inverted two ajax parameters : contentType and dataType.
- contentType : "When sending data to the server, use this content-type."
- dataType : "The type of data that you're expecting back from the server".

So when you're making a GET/DELETE request, you should specify dataType : 'json' or 'html' and not contenType : 'application/json' as you're not sending data to the server.

Anonymous said...

https://github.com/jpillora/jquery.rest :)