Getting 401 Unauthorized error consistently with jquery call to webmethod

ASP.NET with JQuery provides a flexible method of making ajax calls via a webservice. Making an ajax call using JQuery API would be as simple as

 $.ajax({
            url: "TestService.asmx/Test",
            data: "{'JSONData':'" + JSON.stringify(id) + "'}", // For empty input data use "{}",
            dataType: "json",
            type: "POST",
            contentType: "application/json",
            complete: function (jsondata, stat) {
                if (stat == "success") {
                    var response = JSON.parse(jsondata.responseText).d;
                    $("#divItem").html(response);
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {

            }
        });

Now the webservice method definition should look like:-

[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string Test(string JSONData)
{
   return JSONData + " Test Data";
}

Now that we have the code ready, lets try to run this. Oh No!! ASP.NET bounced back with following error.

"401 Unauthorized"

This internally means JQuery Ajax call had responded as System.InvalidOperationException and hence that would be thrown as 401 Unauthorized exception.

The simple solution is to include the following line before the class definition of the webservice

[System.Web.Script.Services.ScriptService]

“Real knowledge is to know the extent of one’s ignorance.”
– Confucius