Calling JSON-enabled WCF service with jQuery returns null

Question

I have the following script in my web page to call out to a JSON-enabled WCF service that I have created and am hosting on my web server. However, the alert displays "null". When I point to the url in a browser it returns very simple JSON: {"city":"Ann Arbor"}. Also, when I run the page containing the code below with Fiddler running, I can see the service is hit and the JSON returns. But still the success function below returns null. Anyone know what I'm doing wrong? Thanks. -Ned

<script type="text/javascript">
    $.ajax({
        type: "GET",
        url: "http://192.168.192.17:8080/Service.svc/class/",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            alert(data);
        }
    });
</script>

Answer 1

I suspect the problem comes from the fact that you are trying to call a web service using AJAX which is not hosted on the same domain as the calling script and thus you are violating the same origin policy. If you want to be able to call http://192.168.192.17:8080/Service.svc using AJAX, the calling script needs to be hosted also on http://192.168.192.17:8080.

As a possible workaround you could use a server side script acting as bridge hosted on the same domain as the client script or use JSONP if you have control over the web service.

Answer 2

You could define an error function to see what the problem is:

$.ajax({
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown)
  },
  //.......
})

Answer 3

Take a look at this