1. How to consume a RESTful service using jQuery

2. Introduction  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.RESTfulDesign a RESTful service with.NET framework 4.0jQuery  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.

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

4. Common Options The most commonly used jQuery.ajax() options are the following, for a complete list see thejQuery API reference:jQuery 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".

5. Common Options 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.

6. 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:Design a RESTful service with.NET framework 4.0 // 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); }; };

7. 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 } }); }

8. 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 } }); }

9. 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 } }); }

10. 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 } });

11. Example Now let’s see how to create jQuery Ajax Client to consume web service XML response. Before proceeding I recommend you to go through my previous post about XML response. So taking previous example as a Web service lets write Ajax client to consume it. Create a HTML page and use html select to select specific car name, jQuery selector will get the value and create a URL, that URL then pass to Ajax call to web service and get response in XML format. Following jQuery shows that Ajax Call…

12. Example $(document).ready(function(){ $('select').change(function(){ $.ajax( { url: 'rest/xml/car/'+this.value, complete: function ( jsXHR, textStatus ) { var xmlResponse = $.parseXML(jsXHR.responseText), $xml = $(xmlResponse), $make = $xml.find('make'), $price = $xml.find('price'), $carName = $xml.find('car-name'); $('h3#carMake').html("Manufacture: "+$make.text()); $('h3#carPrice').html("Price: "+$price.text()); $('h3#carName').html("Car Name: "+$carName.text()); } ); }); })

13. Exemple Call to web service return response in XML format. You can see that response in FireBug.

14. Exemple Output will look similar to following screenshot in your browser.