JSON not loading with jQuery.ajax()

Question

Hello everyone,

I am using a web service that returns JSON data.

test.com/incident.do?JSON&sysparm_action=getRecords

Loading this URL in a browser prompts me to open incident.do, which opened in Notepad displays the valid JSON data.

Then, in a web page in the same domain, I use this:

$.ajax({
  beforeSend: function(xhr) {
 xhr.setRequestHeader('Authorization', authinfo);        
},
   url: "https://test.com/incident.do?JSON&sysparm_action=getRecords",
   dataType: 'json',
   type: 'GET',
   success: function(a,b,c) {
     alert(a);
   }
 });

However, with this code I am not receiving any JSON, I get only this response

HTTP/1.1 200 OK
Date: Tue, 13 Jul 2010 22:28:09 GMT
Server: Apache-Coyote/1.1
Allow: GET, HEAD, POST, TRACE, OPTIONS
Content-Length: 0
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/plain

What am I doing wrong here?

EDIT: If it helps anyone, I have a link to the sandbox on the provider's website that provides the same functionality...The username/password is admin/admin

https://demo.service-now.com/incident.do?JSON&sysparm_action=getRecords

Answer 1

Try to set the contentType

$.ajax({
  beforeSend: function(xhr) {
 xhr.setRequestHeader('Authorization', authinfo);        
},
   url: "https://test.com/incident.do?JSON&sysparm_action=getRecords",

   contentType: "application/json",

   dataType: 'json',
   type: 'GET',
   success: function(a,b,c) {
     alert(a);
   }
 });

UPDATE

This is the correct way to call. But if you are making a request to a page out of your domain it will not work. For that you would need a proxy. Here is a simple PHP proxy:

<?php
    /* Set the headers for application/json , xml, or whatever */
    echo @file_get_contents(urldecode($_GET['url']));
?>

Then your request would have to be to this page, like this:

$.ajax({
  beforeSend: function(xhr) {
 xhr.setRequestHeader('Authorization', authinfo);        
},
   url: "myproxy.php?url=" + escape("https://test.com/incident.do?JSON&sysparm_action=getRecords"),

   contentType: "application/json",

   dataType: 'json',
   type: 'GET',
   success: function(a,b,c) {
     alert(a);
   }
 });

Answer 2

Try removing "type": "GET". jQuery Ajax requests are GET by default.

Perhaps you hitting browser XSS limitations. Is the web page served over HTTPS as well? If the page containing the ajax call is HTTP and the AJAX endpoint is HTTPS it would violate same origin policy. More discussion here.

From jQuery doco:

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

According to wikipedia, http://test.com and https://test.com are different origins and hence violate same origin policy. Try making your page HTTPS as well.

$.ajax({
  beforeSend: function(xhr) {
 xhr.setRequestHeader('Authorization', authinfo);        
},
   url: "https://test.com/incident.do?JSON&sysparm_action=getRecords",
   dataType: 'json',
   success: function(a,b,c) {
     alert(a);
   }
 });