Calling .NET Web Service from jQuery

Question

I am calling a .NET web service from a jQuery file which is not part of the project. Whenever I call the service it says OPTIONS /HOCWebService.asmx/HelloWorld and does not return anything. What is going on? In the web.config I have specified that the web service is allowed httpGet and httpPost.

UPDATE 1:

$.ajax(

    {
        type: "POST",
        url: "http://127.0.0.1:8080/HOCWebService.asmx/HelloWorld",
        data: "{}",
        dataType: "json",
        contentType: "application/json",
        success: function (response) {

            alert(response.d); 

            var categories = $.evalJSON(response.d);


            for (i = 0; i < categories.length; i++) {

                var span = $(document.createElement("span"));
                $(span).addClass("ui-li-count");
                $(span).html(categories[i].Count);
                var li = $(document.createElement("li"));
                var anchor = $(document.createElement("a"));
                $(anchor).attr("href", "/Home/detail/"+categories[i].Id);
                $(anchor).html(categories[i].Title);

                $(li).append(anchor);
                $(li).append(span);

                //     $("#categoriesListView").append('<li><a href="/Home/detail/' + categories[i].Id + '">' + categories[i].Title + '</a></li>');

                $("#categoriesListView").append(li);

                //  $(span).text(categories[i].Count);

            }

            $("#categoriesListView").listview('refresh');

        }
    }

    );

Answer 1

The default implementation of ASMX files in .NET framework means that you are dealing with SOAP web services and thus will be sending and receiving XML wrapped in a SOAP envelope (and not JSON).

Try:

$.ajax({
          // 1. Loose the 'HelloWorld' from the URL
          url: "http://127.0.0.1:8080/HOCWebService.asmx", 
          type: 'POST',
          async: false,
          dataType: 'xml',
          // 2. But add it as a HTTP Header called 'SOAPAction'
          headers: {
             SOAPAction: "http://www.tempuri.org/HelloWorld"
          },
          contentType: 'text/xml; charset="utf-8"',
          // 3. The data sent to the server must be a SOAP XML Envelope
          data: '<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">' +
                   '<soap:Body>' +
                       '<HelloWorld xmlns="http://www.tempuri.org/" />' +
                    '</soap:Body>' +
                '</soap:Envelope>',
          sucess: function(response) {
               alert(response.responseText);
               // Completion logic goes here
          }
    });

Please note that as part of the implementation above you need a HTTP POST header called 'SOAPAction' matching the method you are calling, otherwise it wont work:

 headers: {
    SOAPAction: "http://www.tempuri.org/HelloWorld"
 },

Means the POST request will include the lastline below:

POST /HOCWebService.asmx HTTP/1.1
Host: 127.0.0.1:8080
Content-Type: application/soap+xml; charset=utf-8
Content-Length: 453
SOAPAction: "http://www.tempuri.org/HelloWorld"

http://www.tempuri.org/ is the default namespace used by Microsoft when you create a new ASMX service, feel free to update it to the actual namespace you are using in your implementation.

SUGGESTION:

If you need to send JSON backwards and forwards from your application, can I suggest you use a Generic Handler (ASHX file) using something similar to this approach.