JSON and jQuery.ajax

Question

im trying to use the jQuery UI autocomplete to communitate with a webservice with responseformate JSON, but i am unable to do so.

My webservice is not even executed, the path should be correct since the error message does not complain about this.

What strikes me is the headers, response is soap but request is json, is it supposed to be like this?

Response Headersvisa källkod
Content-Type application/soap+xml; charset=utf-8


Request Headersvisa källkod
Accept application/json, text/javascript, */*
Content-Type application/json; charset=utf-8

The error message i get is as follows (sorry for the huge message, but it might be of importance):

soap:ReceiverSystem.Web.Services.Protocols.SoapException: Server was unable to process request. ---> System.Xml.XmlException: Data at the root level is invalid. Line 1, position 1. at System.Xml.XmlTextReaderImpl.Throw(Exception e) at System.Xml.XmlTextReaderImpl.Throw(String res, String arg) at System.Xml.XmlTextReaderImpl.ParseRootLevelWhitespace() at System.Xml.XmlTextReaderImpl.ParseDocumentContent() at System.Xml.XmlTextReaderImpl.Read() at System.Xml.XmlTextReader.Read() at System.Web.Services.Protocols.SoapServerProtocol.SoapEnvelopeReader.Read() at System.Xml.XmlReader.MoveToContent() at System.Web.Services.Protocols.SoapServerProtocol.SoapEnvelopeReader.MoveToContent() at System.Web.Services.Protocols.SoapServerProtocolHelper.GetRequestElement() at System.Web.Services.Protocols.Soap12ServerProtocolHelper.RouteRequest() at System.Web.Services.Protocols.SoapServerProtocol.RouteRequest(SoapServerMessage message) at System.Web.Services.Protocols.SoapServerProtocol.Initialize() at System.Web.Services.Protocols.ServerProtocolFactory.Create(Type type, HttpContext context, HttpRequest request, HttpResponse response, Boolean& abortProcessing) --- End of inner exception stack trace ---

This is my code:

$('selector').autocomplete({   
   source: function(request, response) {
                $.ajax({
                    url: "../WebService/Member.asmx",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    data: JSON.stringify({prefixText: request.term}),

                    success: function(data) {
                        alert('success');
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown){
                        alert('error');
                    }
                })
                }, 
   minLength: 1,
   select: function(event, ui) {

   }
  });

And my webservice looks like this:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[ScriptService]
public class Member : WebService
{

    [WebMethod(EnableSession = true)]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
    public string[] GetMembers(string prefixText)
    {
       code code code
    }

}

What am i doing wrong? Thanks in advance :)

Answer 1

I believe you need to include the name of the method to your URL:

/WebService/Member.asmx/GetMembers

When using a webservice I always like to set the path to the root (/ no ../), it can be helpful if you are doing any kind of URL rewrites or using routing.

Here is a good blog post to read in regards to calling a webservice from JQuery. http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/