javascript - saltarse - no soy un robot captcha

Comunicación JSONP en una extensión de Google Chrome

Question

Estoy escribiendo una extensión de Google Chrome. Quiero usar la comunicación jsonp entre dominios con jQuery. Aquí está el código ajax:

$.ajax({
    type : ''POST'',
    url : $(this).attr(''action''),
    data : $(this).serialize(),
    contentType: ''application/json; charset=utf-8'',
    dataType : ''jsonp'',
    success : function() {
        alert(''A'');
    }
});

Esto llama a esta URL:

http://sgsync.dev.kreatura.hu/api/signup/?callback=jQuery1710883696963544935_1327347078860&nick=&pass=&_=1327347087371

El servidor responde 200 OK con esta información:

jQuery1710883696963544935_1327347078860({"messages":["Minden mez/u0151 kit/u00f6lt/u00e9se k/u00f6telez/u0151!"],"errorCount":1})

Después de eso, recibí este mensaje de error:

Can''t find variable: jQuery1710883696963544935_1327347078860

Intenté todo y no puedo entender el problema. ¡Por favor, ayúdame!

Tenga en cuenta que programé el código del lado del servidor, por lo que podría haber un problema con eso también.

¡Gracias por adelantado!

Answer 1

Conceptos básicos de JSON-P:

Inserta una etiqueta de script que carga un archivo javascript externo.
Ese archivo no hace más que ejecutar una función predefinida , con los datos del servidor.

Cómo hacer que funcione:

Primero crea una función, vinculada al objeto global (ventana) :

window.processMyData = function processMyData(data) {
  console.log(data);
}

Luego inserte una etiqueta de script en la página: script = document.createElement ("script");

$(''<script></script>'')
  .prop({''type'': ''text/javascript'', ''src'': ''http://your.url?with=possible&data=in_it''})
  .appendTo(''body'');

¿Lo ves? No es necesario el contenedor $ .ajax, JSON-P funciona de manera diferente.

¡Buena suerte!

Editar: como respuesta a Duskwuff me gustaría agregar que no quiero decir que $.ajax sea ​​malo o no sea útil. No estoy aquí para darte un fragmento de código de jQuery. Estoy intentando que comprendas tu problema con la ayuda de javascript / html un poco más básico. JSON-P no es solo JSON con una P agregada, es completamente diferente de una solicitud normal.

Answer 2

Eche un vistazo a esta pregunta y mi respuesta ya que creo que podría darle una solución ...
Cargue automáticamente el marcador cuando esté en la página web como una extensión de Google Chrome

Answer 3

Parte de la razón por la que esto es tan confuso es porque la API jQuery confunde el problema de las llamadas Ajax con las llamadas JSONP. Cuando se usa $.ajax con dataType: ''jsonp'' esto no hace una llamada Ajax (no se usa la comunicación XHR) en su lugar usa la inyección dinámica de scripts con una devolución de llamada. Esto significa que el type: ''POST'' no tendrá significado (ya que la inyección dinámica de scripts solo funciona como un GET funcionaría) y que todos los data se codificarán en la URL de la solicitud en lugar de enviarse como una publicación cuerpo. Si esto está verdaderamente destinado a datos "POST", entonces no se debe usar JSONP (ya que los datos confidenciales se enviarán en texto claro).

Como se mencionó en uno de los comentarios, este tema se abordó en esta respuesta con respecto a las solicitudes JSONP de las secuencias de comandos de contenido de Chrome y el uso de XHR a partir de una secuencia de comandos de contenido.

Solicitud de JSONP en la extensión de Chrome, la función de devolución de llamada no existe?

Con respecto a las extensiones de Chrome, te obligan a entrar en un sandbox cuando utilizas las "secuencias de comandos conten" en una extensión de Chrome. Puede eliminar el tipo de datos dataType: ''jsonp'' la solicitud en el script de contenido de extensión de Chrome y esta llamada debería funcionar. Si eso no funciona, puede intentar hacer la llamada directamente usando XHRHttpRequest:

var xhr = new XMLHttpRequest();
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xhr.open("POST", $(this).attr(''action''), true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
       alert("A");
  }
}
xhr.send($(this).serialize());

Con respecto a otros navegadores, no estoy seguro de cómo cada uno de sus entornos específicos de plugins manejan realizar llamadas XHR de dominio cruzado (o si incluso lo permiten en primer lugar). Esto es algo que NO está permitido desde los navegadores normales (a menos que se use algo como easyXDM ).