RESTful service using jQuery

In this post we see how to consume the RESTful service described in the post Design a RESTful service
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
});

 

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.

 

Data object

 

</pre>
// 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); };

};
<pre>

 

ADD

 

</pre>
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
}

});
}</div>
&nbsp;
<pre>

PUT

 

</pre>
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

}
});
}</div>
&nbsp;
<pre>

DELETE

 

</pre>
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
}
});
}</div>
&nbsp;
<pre>

GET

 

</pre>
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
}
});</div>
<pre>