php - ejemplo - jsonp post

JavaScript: ¿Cómo creo JSONP?

Question

Tengo dos dominios, example1.com y example2.com

Desde example1.com, me gustaría llamar a una API JSON que tengo en example2.com. Sabiendo que esto no está permitido, se me ocurrió: esta es exactamente la razón por la cual se creó JSON P.

La pregunta es, ¿cómo modifico mi API JSON para que sea compatible con JSONP?

Básicamente, ¿cómo creo la API de devolución de llamada?

ACTUALIZAR

Mi idioma del lado del servidor es PHP

Answer 1

¡Puedes usar el Simple JSON para PHP para forjarlo! ¡Simplifica todo!

<?php

  include(''../includes/json.php'');

  $json = new json(''callback'', ''myCallback'');

  $object = new stdClass();
  $object->FirstName = ''John'';
  $object->LastName = ''Doe'';
  $array = array(1,''2'', ''Pieter'', true);
  $jsonOnly = ''{"Hello" : "darling"}'';
  // Add objects to send
  $json->add(''status'', ''200'');
  $json->add("worked");
  $json->add("things", false);
  $json->add(''friend'', $object);
  $json->add("arrays", $array);
  $json->add("json", $jsonOnly, false);

  /*
  Expected result : 
  myCallback({
    "status": "200",
    "worked": true,
    "things": false,
    "friend": {
        "FirstName": "John",
        "LastName": "Doe"
    },
    "arrays": [
        1,
        "2",
        "Pieter",
        true
    ],
    "json": {
        "Hello": "darling"
    }
  });

  */
  $json->send();
?>

Answer 2

Fácil con jQuery, ese es el lado del cliente:

  $.ajax({
        dataType: ''jsonp'',
        data: "somedata="+somevalue,
        //this is very important since it''s the callback we will and that allow cross domain
        jsonp: ''jsonp_callback'',
        url: ''http://example2.com'',
        //function we trigger on success
        success: ParseJson
         //error handling not working with jsonP
         //error: handleError
        });

function ParseJson(data)
{
for (var key in data) {
  if (data.hasOwnProperty(key)) {
    alert(key + " -> " + data[key]);
  }
}
}

Y asegúrese de obtener JSON adecuada del lado del servidor;
y no te olvides de devolver el jsonp_callback param, de lo contrario no funcionará!
y eso es todo realmente

Answer 3

Mauris ya te dio un ejemplo de trabajo. Solo agregaría que debe verificar si un parámetro de callback está presente y no está vacío, y si no, devuelva los datos json tal como están sin los paréntesis. Así que, básicamente, su API será JSON con la provisión de ser JSON-P cuando se callback una callback .

Para consumir el servicio web JSON-P, a menos que use un marco como YUI o jQuery, puede simplemente crear un nodo de script dinámicamente y establecer su atributo src para que apunte al servicio web. Recuerde eliminar el nodo del dominio antes de repetirlo nuevamente, ya que este nodo de script dinámico es de uso único.

Answer 4

Necesita un lenguaje del lado del servidor, el parámetro de devolución de llamada es simplemente un parámetro GET, lee el parámetro, y ajusta la respuesta JSON en una llamada de función y la imprime como esta callback(jsonResponse); .

Les dejo un ejemplo realmente minimalista usando Python ya que no mencionan ningún lenguaje del lado del servidor:

import os
import cgi

form = cgi.FieldStorage()
callback = form.getvalue(''callback'','''')

address = cgi.escape(os.environ["REMOTE_ADDR"])

json = ''{"ip": "''+address+''", "address":"''+address+''"}''

#Allow cross domain XHR
print ''Access-Control-Allow-Origin: *''
print ''Access-Control-Allow-Methods: GET''

if callback != '''':
  print ''Content-Type: application/javascript''
  result = callback+''(''+json+'');''
else:
  print ''Content-Type: application/json''
  result = json

print ''''
print result

Ese es el código de un pequeño servicio JSONP utilizado para recuperar la dirección IP del cliente hecha por Zach y está alojado en Google App Engine .

Answer 5

Sé que llego tarde a la fiesta, y hubo un comentario sobre la seguridad del código en una de las respuestas. Aquí hay un buen artículo sobre esto:

http://www.geekality.net/2010/06/27/php-how-to-easily-provide-json-and-jsonp/

Y aquí está el código que debería ejecutar:

<?php header(''content-type: application/json; charset=utf-8'');

function is_valid_callback($subject)
{
    $identifier_syntax
      = ''/^[$_/p{L}][$_/p{L}/p{Mn}/p{Mc}/p{Nd}/p{Pc}/x{200C}/x{200D}]*+$/u'';

    $reserved_words = array(''break'', ''do'', ''instanceof'', ''typeof'', ''case'',
      ''else'', ''new'', ''var'', ''catch'', ''finally'', ''return'', ''void'', ''continue'', 
      ''for'', ''switch'', ''while'', ''debugger'', ''function'', ''this'', ''with'', 
      ''default'', ''if'', ''throw'', ''delete'', ''in'', ''try'', ''class'', ''enum'', 
      ''extends'', ''super'', ''const'', ''export'', ''import'', ''implements'', ''let'', 
      ''private'', ''public'', ''yield'', ''interface'', ''package'', ''protected'', 
      ''static'', ''null'', ''true'', ''false'');

    return preg_match($identifier_syntax, $subject)
        && ! in_array(mb_strtolower($subject, ''UTF-8''), $reserved_words);
}

$data = array(1, 2, 3, 4, 5, 6, 7, 8, 9);
$json = json_encode($data);

# JSON if no callback
if( ! isset($_GET[''callback'']))
    exit($json);

# JSONP if valid callback
if(is_valid_callback($_GET[''callback'']))
    exit("{$_GET[''callback'']}($json)");

# Otherwise, bad request
header(''status: 400 Bad Request'', true, 400);

Answer 6

ejemplo aquí http://www.insideria.com/2009/03/what-in-the-heck-is-jsonp-and.html básicamente

<script src=".../example2...?output=json;callback=loadit"></script>
<script>
alert( "I got this from example2 " + loadit);
</script>

Answer 7

Es simple. Simplemente acepte un parámetro llamado callback de callback en GET.

Luego ajuste la función de JavaScript de devolución de llamada alrededor de sus datos.

Ejemplo en PHP:

<?php

$data = ''{}''; // json string

if(array_key_exists(''callback'', $_GET)){

    header(''Content-Type: text/javascript; charset=utf8'');
    header(''Access-Control-Allow-Origin: http://www.example.com/'');
    header(''Access-Control-Max-Age: 3628800'');
    header(''Access-Control-Allow-Methods: GET, POST, PUT, DELETE'');

    $callback = $_GET[''callback''];
    echo $callback.''(''.$data.'');'';

}else{
    // normal JSON string
    header(''Content-Type: application/json; charset=utf8'');

    echo $data;
}

La idea es simplemente devolver un archivo JavaScript que llame a la función de devolución de llamada con el objeto JSON como el primer parámetro de la función de devolución de llamada de JavaScript.

Puede usar la función incorporada json_encode() para crear cadenas JSON (que contiene $data en nuestro ejemplo anterior) de matrices y objetos en PHP.

Para usar el servicio JSONP, puede usar la etiqueta <script> :

<script>
    function receiver(data){
        console.log(data);
    }
</script>
<script src="data-service.php?callback=receiver"></script>

Answer 8

// Adds script tag to head of the page
function addScriptToHead(source, code, type) {
    var script = document.createElement(''script'');
    if (type === ''js'') {
        script.setAttribute(''type'', ''text/javascript'');
    }
    if (source !== '''') {
        script.setAttribute(''src'', source);
    }
    if (code !== '''') {
        if (document.all && !window.opera)  {
            script.text = code;
        } else {
            script.innerHTML = code;
        }
    }
    document.getElementsByTagName(''head'')[0].appendChild(script);
}


// Callback function
function addScriptToHead(any_param) {

// do whatever needs to be done

}

//call example

addScriptToHead(''http://url_to_receiver_script/index.php&param=anything'', '''', ''js'');

/// la secuencia de comandos de devolución de llamada debe devolver el nombre de la función de devolución de llamada, es decir, si escribe en el navegador

http://url_to_receiver_script/index.php&param=anything

debería devolver solo un texto (nombre de la función de procesamiento existente): addScriptToHead (any_param)

funciona como un reloj en cualquier navegador.