ASP.NET Web Services and jQuery/AJAX

As far as web developer's go, I'll freely admit that my Javascript is not one of my strong points.  I don't have a real good reason for this, it's just that over the past few years I haven't had much call/need to polish and hone my Javascript skills.  Recently I discovered jQuery, and I must say that I wish I had know about this library earlier.  The more I use jQuery, the more I like it.  The simple things are simple, and the hard things are possible.  Take calling a simple webservice when the user clicks a button on a form.

Client side, the user would click on a button in their browser, in order to "check out" or "check in" - pretty simple stuff.  Click a button, update a record in the database.  I wanted this done via AJAX, as the page itself is pretty heavy with data, and I didn't want to go through the whole page lifecycle.  I spent some time Googling how to do this on the web, but I didn't find anything that seemed to be suitable for something as simple as this.

So, enough boring stuff, on with the issue.  In my current application the ASP.NET web service that the client should call looks something like:

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class CampaignProductCheckoutService : WebService, ICampaignProductCheckoutService
{
  [WebMethod]
  public void CheckIn(int campaignProductId, int loginId)
  {
    // Do something...
  }
  [WebMethod]
  public void CheckOut(int campaignProductId, int loginId)
  {
    // Do something...
  }
}

Pretty simple webservice, nothing fancy.  Here is the corresponding Javascript on the browser:

$.ajax({
  type: "POST",
  url: "CampaignProductCheckoutService.asmx/CheckOut",  
  data: "campaignProductId=3&loginId=4",
  beforeSend: function(xhr) { 
    xhr.setRequestHeader("Content-Length", "campaignProductId=3&loginId=4".length);
    $("#progressBarContainer").show();
  },
  dataType: "xml",
  complete: function (xhr, msg) {
    $("#progressBarContainer").hide();
    if (xhr.status == 200) {
      alert("Happy Times!");
    }
    else {
      alert("Wailing and gnashing of teeth!");
    }
  }
});

This looks busy, but in reality, it isn't. Now, for a detailed explanation of what is going on here, I'd suggest reading the book jQuery in Action.  It is a most helpful book for learning jQuery.

Anyway, here is a quick rundown of what is going on:  the $.ajax is a jQuery method that will perform the AJAX call, using the parameters that we provide it.  jQuery will perform an HTTP post to web service specified in url.  As part of the POST request, you can see that we're passing in the parameters for the webservice call.  So far, pretty straightforward.

The next line, beforeSend, is a javascript method that jQuery will call before it does the POST.  In this case, we make sure that the request header has the length of the data being sent, and we show a progress bar to the user.  The funny syntax you see there is how we select the DIV element holding our animated gif and display it to the user.

Your standard ASP.NET web service will return XML to the client, and we inform jQuery of that with the dataType parameter.

By default, jQuery will perform the AJAX call asynchronously, so in the final line we provide another Javascript callback.  jQuery will call this function once the request is finished.  In this case, we hide the DIV element holding the progress bar, and we check the XMLHttpRequest object that is returned from jQuery. If the status is 200, then all okay and we display a happy message.  Otherwise we assume the request failed, and display a sad message to the user.

There you have it, a quick and dirty explanation of using jQuery to call an ASP.NET Web Service.