Question

Please look at the code below and help me to figure out what am I doing wrong in my web service code. I want to set up an asp.net web service that can be consumed using an JSONP. I am using Jquery at client side to access the site. Even after setting up proper attributes my web service still emits xml due to which the aynch call fails.

Web Service

[WebService(Namespace = 'http://tempuri.org/')] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService {      public WebService () {          //Uncomment the following line if using designed components          //InitializeComponent();      }      [WebMethod]     [ScriptMethod(ResponseFormat= ResponseFormat.Json, XmlSerializeString=false, UseHttpGet=true)]     public string HelloWorld(int id, string __callback) {         return  __callback + '({message: 'Hello World'})';     }  } 

Web Service Response:

<?xml version='1.0' encoding='utf-8'?> <string xmlns='http://tempuri.org/'>test({message: 'Hello World'})</string> 

Web.Config:

<webServices>     <protocols>         <add name='HttpGet'/>         <add name='HttpPost'/>     </protocols> </webServices> <httpHandlers>     <remove verb='*' path='*.asmx'/>     <add verb='*' path='*.asmx' validate='false'          type='System.Web.Script.Services.ScriptHandlerFactory,              System.Web.Extensions, Version=3.5.0.0,              Culture=neutral, PublicKeyToken=31BF3856AD364E35'/>     <add verb='*' path='*_AppService.axd' validate='false'          type='System.Web.Script.Services.ScriptHandlerFactory,              System.Web.Extensions, Version=3.5.0.0,              Culture=neutral, PublicKeyToken=31BF3856AD364E35'/>     <add verb='GET,HEAD' path='ScriptResource.axd'          type='System.Web.Handlers.ScriptResourceHandler,              System.Web.Extensions, Version=3.5.0.0,              Culture=neutral, PublicKeyToken=31BF3856AD364E35'          validate='false'/> </httpHandlers> <httpModules>     <add name='ScriptModule'          type='System.Web.Handlers.ScriptModule, System.Web.Extensions,              Version=3.5.0.0, Culture=neutral,              PublicKeyToken=31BF3856AD364E35'/> </httpModules> 

Javascript

$.ajax({     type: 'GET',     contentType: 'application/json; charset=utf-8',     url: 'http://localhost:54404/jsonp/webservice.asmx/HelloWorld?id=2&__callback=?', //?jsonp=MatchSvcCallback     dataType: 'jsonp',     data: {},     //jsonp : 'MatchSvcCallback',     success: function(msg) {     alert('Inside success callback function'); // not being called      },     error: function(xhr, msg){         var response = JSON.parse(xhr.responseText);      }  }); 

The js code works with an handler, but fails for the webservice due to xml response.

Answer 1

I think the problem here is because jQuery doesn’t set the Content-Type header in the HTTP request for HTTP GET’s when using $.ajax(). It only gets sent if the request type is ‘POST’. This seems to be the case for both dataType: 'jsonp' and dataType: 'json'.

I tried your example and watched the request/response exchange in Fiddler and sure enough I don’t see Content-Type: application/xml; charset=UTF-8 being sent in the headers for HTTP GET requests. The header does get sent if using HTTP POST. I’m guessing the presence of this header is a cue for the ASP.NET web service plumbing to decide whether to return either a JSON or XML formatted response.

It seems you’re not the only one with this problem, see the following article on the on Elegant Code website:

Calling Remote ASP.NET Web Services from JQuery

The solution appears to be one of the following:

• Use a HttpModule to inject the Content-Type: application/xml; charset=UTF-8 header into the request stream as described in the article above.

• Use a HttpHandler for the endpoint as you explained you were doing prior to using an ASP.NET web service.

• Try Rick Strahl’s page based approach in the following article (which is in effect a HttpHandler anyway): JSONP for cross-site Callbacks.