jQuery getJSON funciona localmente, pero no de forma cruzada

He buscado FOREVER y no puedo encontrar una respuesta definitiva a mi problema. Asi que aqui esta. Tengo un archivo JSON (fui a jsonlint para validar y dice que está bien) que se ve así (se modificó alguna información):

[{ "position":"1", "category":"A", "title":"Title to first story", "description":"The first story." }, { "position":"2", "category":"B", "title":"Title to second story", "description":"The second story" }, { "position":"3", "category":"B", "title":"Title to third story", "description":"The third story" } ] 

Usé jQuery para analizar y poner en una página html usando esta función:

 $.getJSON('page.json', function(data) { var items = []; $.each(data.reponse, function(item, i) { items.push('
  • ' + i.title + ' - ' + i.description + '
  • '); }); $('
      ', { 'class': 'my-new-list', html: items.join('') }).appendTo('body'); });

    ¡Funciona perfectamente! Ahora viene mi problema: el archivo JSON no se alojará localmente y, de hecho, se alojará en un dominio diferente. Así que modifiqué mi código de la siguiente manera (después de leerlo) con la esperanza de que funcione:

     $.getJSON('http://www.otherdomain.com/page.json?format=json&callback=?', function(data) { var items = []; $.each(data.reponse, function(item, i) { items.push('
  • ' + i.title + ' - ' + i.description + '
  • '); }); $('
      ', { 'class': 'my-new-list', html: items.join('') }).appendTo('body'); });

    Al agregar la línea de ‘callback’ dejé de obtener el error “Error al cargar el recurso”. Sin embargo, nada está sucediendo. Es como si la función que agregué ni siquiera está allí. Traté de sacarlo todo y agregar una simple ‘alerta (datos)’, pero eso ni siquiera se disparó. ¿Qué estoy haciendo mal? Un gran problema es que estoy 100% limitado a solo HTML y JavaScript para trabajar (no es mi elección). ¡Gracias por cualquier ayuda!

    EDITAR Ok, no tengo la capacidad para que el otro servidor agregue dinámicamente nada al archivo json. Así que modifiqué mediante hardcoding una función alrededor de json (muestra más pequeña):

     storyData( [{ "position":"1", "category":"A", "title":"Title to first story", "description":"The first story." } ]) 

    ¡Todo ahora funciona! ¡Gracias por toda la ayuda!

    Necesitas mirar hacia JSONP .

    Básicamente, cuando intenta cargar JSON desde otro dominio, falla porque hay un límite de dominio que no puede cruzar. Para evitar esto, tiene que PAD (P en JSONP). El relleno es esencialmente envolviéndolo en una llamada a función (donde el nombre de función reside en su cliente). Por ejemplo, una respuesta JSON “normal” (digamos, por ejemplo, getjson.php):

     {foo:'bar'} 

    JSON con una callback de parseJSON convierte en (Diga, por ejemplo, getjson.php? Callback = parseJSON):

     parseJSON({foo:'bar'}) 

    Observe cómo el valor que se suministró en la devolución de llamada se convierte en el nombre de la función en la que ahora está envuelta su respuesta JSON.

    Entonces su cliente querrá pasarlo a parseJSON , una función que existe en su cliente (que usted ha definido). jQuery (y otras bibliotecas) intentan ocuparse de esto generando alguna función “aleatoria” y luego enviando la respuesta a través de su callback original (todo esto se hace debajo del capó).

    Si tiene control sobre la página del servidor que genera el JSON, implemente un método de callback para que pueda proporcionarle información sobre cómo debe envolverse el JSON para que pueda trabajar con él en su extremo. (Esto solo es necesario cuando se trata de datos de un dominio que no sea la página en la que el cliente se encuentra actualmente).


    ACTUALIZAR

    Para resolver básicamente el problema que está teniendo, necesita encontrar una forma de obtener su información JSON en una llamada JSONP. Sin saber en qué idioma está su “página.json”, esta es la lógica del pseudo-código que debe contener:

     if GET_VARIABLE("callback") is supplied print GET_VARIABLE("callback") and an open parenthesis print normal JSON data print closing parenthesis else print normal JSON data end if 

    Si decide codificar el nombre de la función en lugar de permitir que se suministre en la url como “callback”, entonces debe recordarla. Para el próximo ejemplo, imaginemos que lo llamamos MyJSONPCallback

    Ahora, en su código de cliente, puede ir antes de su uso:

     $.ajax({ url: 'http://anotherdomain.com/page.json?format=json', dataType: 'json', jsonpCallback: 'MyJSONPCallback', // specify the callback name if you're hard-coding it success: function(data){ // we make a successful JSONP call! } }); 

    Para aquellos que usan MVC ActionResult para generar JSONP, ASP.NET MVC no se envía con soporte JSONP de fábrica, pero es fácil de agregar con:

    http://nikcodes.com/2012/02/29/an-asp-net-mvc-jsonp-actionresult

    Los navegadores no permiten que esto funcione como una medida de seguridad. Puede ver JSONP como una forma de evitar esto, aunque es un GRAN riesgo de seguridad ya que se basa en ejecutar javascript proporcionado por el dominio del cual obtiene el texto JSON.

    No he examinado este tema a fondo, pero creo que su problema se relaciona con la misma política de dominio … pero tal vez quiera investigar esto: http://james.padolsey.com/javascript/cross-domain- requests-with-jquery /

    Vea este artículo: debe proporcionar un objeto JavaScript válido envuelto en una función.

    http://en.wikipedia.org/wiki/JSONP

    Te gustaría devolver algo como:

    parseResponse({"Name": "Cheeso", "Id" : 1823, "Rank": 7})

    Pero su método del lado del servidor necesitaría saber para devolver eso, en lugar de solo el JSON adentro. Todo lo que hace jQuery es generar automáticamente un nombre de función (el ? En el parámetro de callback ) y luego evaluar la “función” que se devuelve desde el servidor. El servidor crea la llamada de función con el JSON contenido en el interior.

    La respuesta de Brad Christie me ayudó a hacer que mi código funcionara rápidamente. Estoy creando una nueva entrada aquí, ya que es un poco más simple que las otras soluciones.

    A continuación se muestra el código que ejecuto desde http: // localhost: 5000 –

     (function() { var api = "http://www.localhost:3000/auget_from_server?format=json"; var request = $.getJSON( api, { secret : 'secret', appId : 'app', emailId : 'abc@gmail.com', async: false, dataType : 'json', }, function(data, result){ $("div.some_div").append(JSON.stringify(data)); }); request.complete(function(d, status){ console.log('Complete the request and got the data - ' + JSON.stringify(d) + '/' + status, filename); }); request.error(function(err){ console.log('Error happened - ', filename); console.log(err); }); request.success(function( data, status, jqXHR ) { $("div.some_div").append(data); }); })(); 

    Desde la ubicación en http: // localhost: 3000 / auget_from_server , devuelvo el siguiente JSON en respuesta (esta parte es específica del meteoro, pero también funcionará para servidores que no sean meteoros) –

     this.response.writeHead('200', {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'}); this.response.end(JSON.stringify([{'works_or_not' : 'works', 'name' : 'akaushik', 'application' : 'Qoll', 'message' : 'hello from server', 'currentTime' : dt+''}])); 

    Esto imprime lo siguiente en los registros:

     Complete the request and got the data - {"readyState":4,"responseText":"[{\"works_or_not\":\"works\",\"name\":\"akaushik\",\"application\":\"Qoll\",\"message\":\"hello from server\",\"currentTime\":\"Tue Dec 15 2015 23:59:14 GMT-0500 (EST)\"}]","responseJSON":[{"works_or_not":"works","name":"akaushik","application":"Qoll","message":"hello from server","currentTime":"Tue Dec 15 2015 23:59:14 GMT-0500 (EST)"}],"status":200,"statusText":"OK"}/success