jQuery AJAX Web service works only locally

Question

Hi,

I have a simple ASP.NET Web Service

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class Service : System.Web.Services.WebService
{
    public Service () {
    }

    [WebMethod]
    public string SetName(string name) {
        return "hello my dear friend " + name;

    }
}

For this Web Service I created Virtual Directory, so I can receive the access by taping http://localhost:89/Service.asmx.

I try to call it via simple html page with jQuery. For this purpose I use function

CallWS() {
         $.ajax({
             type: "POST",
             data: "{'name':'Pumba'}",
             dataType: "json",
             url: "http://localhost:89/Service.asmx/SetName",
             contentType: "application/json; charset=utf-8",
             success: function (msg) {
                 $('#DIVid').html(msg.d);

             },
             error: function (e) {
                 $('#DIVid').html("Error");
             }
         });

The most interesting fact: If I create the html page in the project with my WebService and change url to Service.asmx/SetName everything works excellent. But if I try to call this webservice remotely - success function works but msg is null.

After that I tried to call this service even via SOAP. It is the the same - locally it works excellent, but remotely - not at all.

  var ServiceUrl = 'http://localhost:89/Service.asmx?op=SetName'; 

  function beginSetName(Name) {
      var soapMessage = '<?xml version="1.0" encoding="utf-8"?> <soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"&gt; <soap:Body> <SetName xmlns="http://tempuri.org/"&gt; <name>' + Name + '</name> </SetName> </soap:Body> </soap:Envelope>';
      $.ajax({
          url: ServiceUrl,
          type: "POST",
          dataType: "xml",
          data: soapMessage,
          complete: endSetName,
          contentType: "text/xml; charset=\"utf-8\""
      });

      return false;
  }

function endSetName(xmlHttpRequest, status)
{
    $(xmlHttpRequest.responseXML)
    .find('SetNameResult')
    .each(function () {
        var name = $(this).text();
        alert(name);
    });
 }

In this case status has value "parseerror". Could you please help me to resolve this problem? What should I do to call another WebService remotely by url via jQuery.

Thank you in advance, Greg

Answer 1

Pointy is correct, but to solve this you need to expose an endpoint that is callable from outside the application.

I suggest you take a look at creating JSON web services using WCF.

Answer 2

Due to the Same Origin Policy, you will need to modify your AJAX to use JSONP instead of JSON. Check out the jQuery Cross-Domain Ajax Guide.