In this post we see how to consume the RESTful service described in the post Design a RESTful service with .NET framework 4.0 using the Ajax functionality provided by jQuery.
jQuery includes some utilities to simplify the Ajax call. In our example we will use the jQuery.ajax() function to do them. jQuery.ajax() accepts just a single argument: an options object whose properties specify many details about how to perform the Ajax request.

jQuery.ajax({
    type: "GET|POST|DELETE|PUT",
    url: url,
    data: data,
    dataType:"text|html|json|jsonp|script|xml"
    success: success_callback,
    error: error_callback
});

Common Options


The most commonly used jQuery.ajax() options are the following, for a complete list see thejQuery API reference:

type

Specify the request method. It can be one of the "GET", "POST", "DELETE", "PUT" values.

url

Url of the resource on the web.

data

Data to be sent in the body of the request.

dataType

Specifies the type of data expected in the response and how that data should be processed by jQuery. Legal values are "text", "html", "script", "json", "jsonp", and "xml".

success

Callback function to be invoked when the request is completed. 

function(data, textStatus, jqXHR)

This function accepts three arguments: the first is the data sent by the server, the sencond is the jQuery status code (normally the string"success") and the third is the XMLHttpRequest object that was used to make the request.

error

Callback function to be invoked if the request fails:  

function(jqXHR, textStatus, errorThrown). 

This function accepts three arguments: the first is the XMLHttpRequest object that was used to make the request, the second is the jQuery status code (possible values are "timeout", "error", "abort", and "parsererror") and a third is an optional exception object.

Consuming the service


The following code snippets shows some example of service invocation. 
The examples assumes to invoke the service described in the post "Design a RESTful service with .NET framework 4.0". 

The object data exchanged with the service is the Contact object defined as follow:

Data object


// contact
function Contact(fName, lName, eMail, id) {
    this.fName = fName;
    this.lName = lName;
    this.eMail = eMail;
    this.ContactId = id;
    this.toJsonString = function () { return JSON.stringify(this); };

};

ADD


function addContact (contact) {

     jQuery.ajax({
         type: "ADD",
         url: "http://localhost:49193/Contacts.svc/Add",
         data: contact.toJsonString(),
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function (data, status, jqXHR) {
              // do something
         },
     
         error: function (jqXHR, status) {            
              // error handler
         }

     });
}

PUT


function updateContact (contact) {

     jQuery.ajax({
         type: "PUT",
         url: "http://localhost:49193/Contacts.svc/Update",
         contentType: "application/json; charset=utf-8",
         data: contact.toJsonString(),
         dataType: "json",
         success: function (data, status, jqXHR) {
             // do something
         },
     
         error: function (jqXHR, status) {
             // error handler
     
         }     
     });     
}

DELETE


function deleteContact (contactId) {

     jQuery.ajax({
         type: "DELETE",
         url: "http://localhost:49193/Contacts.svc/Delete",
         contentType: "application/json; charset=utf-8",
         data: JSON.stringify(contactId),
         dataType: "json",
         success: function (data, status, jqXHR) {
             // do something
         },
     
         error: function (jqXHR, status) {
             // error handler
         }
     });
}

GET


function getContacts () {

     jQuery.ajax({
         type: "GET",
         url: "http://localhost:49193/Contacts.svc/GetAll",
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function (data, status, jqXHR) {
             // do something
         },

         error: function (jqXHR, status) {
             // error handler
         }
});