javascript - remove - Usando PUT/POST/DELETE con JSONP y jQuery

remove attribute javascript

Question

Estoy trabajando en la creación de una API RESTful que admita solicitudes entre dominios, compatibilidad con JSON / JSONP y el método HTTP principal (PUT / GET / POST / DELETE). Ahora bien, aunque será fácil acceder a esta API a través del código del lado del servidor, sería bueno exponerlo a javascript. Por lo que puedo decir, al hacer una solicitud JSONP con jQuery, solo admite el método GET. ¿Hay alguna manera de hacer una solicitud JSONP usando POST / PUT / DELETE?

Idealmente, me gustaría una forma de hacerlo desde dentro de jQuery (a través de un complemento si el núcleo no es compatible), pero también tomaré una simple solución de JavaScript. Cualquier enlace al código de trabajo o cómo codificarlo sería útil, gracias.

Answer 1

¿Hay alguna manera de hacer una solicitud JSONP usando POST / PUT / DELETE?

No, no hay.

Answer 2

En realidad, hay una forma de admitir solicitudes POST. Y no hay necesidad en un servidor PROXI, solo una pequeña página HTML de utilidad que se describe a continuación.

Así es como se obtiene una llamada POST entre dominios de forma efectiva, incluidos los archivos adjuntos y de varias partes, y todo :)

Aquí primero están los pasos para comprender la idea, después de eso, encuentre una muestra de implementación.

¿Cómo se implementa JSONP de jQuery y por qué no admite solicitudes POST?

Mientras que el JSONP tradicional se implementa creando un elemento de guión y anexándolo al DOM, lo que resulta en que el navegador active una solicitud HTTP para recuperar el origen de la etiqueta y luego lo ejecute como JavaScript, la solicitud HTTP que el navegador enciende es simple OBTENER.

¿Qué no se limita a las solicitudes GET?

UNA FORMA. Envíe el FORMULARIO mientras especifica action el servidor de dominio cruzado. Una etiqueta FORM se puede crear completamente usando una secuencia de comandos, rellenada con todos los campos usando script, estableciendo todos los atributos necesarios, inyectada en el DOM, y luego enviada, todo usando script.

Pero, ¿cómo podemos enviar un FORMATO sin actualizar la página?

Especificamos el target del formulario a un IFRAME en la misma página. Un IFRAME también se puede crear, establecer, nombrar e inyectar al DOM mediante el script.

Pero, ¿cómo podemos ocultar este trabajo del usuario? Contendremos FORM y IFRAME en un DIV oculto usando style="display:none"

(y esta es la parte más complicada de la técnica, sea paciente)

Pero IFRAME de otro dominio no puede llamar a una devolución de llamada en su documento de nivel superior. ¿Cómo superar eso?

De hecho, si una respuesta del envío de formulario es una página de otro dominio, cualquier comunicación de script entre la página de nivel superior y la página en el IFRAME da como resultado "acceso denegado". Entonces el servidor no puede devolver la llamada usando una secuencia de comandos. ¿Qué puede hacer el servidor? redirigir El servidor puede redireccionar a cualquier página, incluidas las páginas del mismo dominio que el documento de nivel superior, páginas que pueden invocar la devolución de llamada por nosotros.

¿Cómo puede un servidor redirigir?

dos caminos:

1. Usando un script del lado del cliente como <Script>location.href = ''some-url''</script>
2. Usando HTTP-Header. Ver: http://www.webconfs.com/how-to-redirect-a-webpage.php

¿Así que termino con otra página? ¿Cómo me ayuda esto?

Esta es una página de utilidad simple que se utilizará en todas las llamadas entre dominios. En realidad, esta página es de hecho una especie de proxi, pero no es un servidor, sino una página HTML simple y estática , que cualquier persona con bloc de notas y un navegador puede usar.

Todo lo que esta página tiene que hacer es invocar la devolución de llamada en el documento de nivel superior, con los datos de respuesta del servidor. Las secuencias de comandos del lado del cliente tienen acceso a todas las partes de la URL, y el servidor puede codificar su respuesta como parte de ella, así como también el nombre de la devolución de llamada que debe invocarse. Medios: esta página puede ser estática y HTML, y no tiene que ser una página dinámica del servidor :)

Esta página de utilidades tomará la información de la URL en la que se ejecuta, específicamente en mi implementación a continuación, los parámetros Query-String (o puede escribir su propia implementación usando la identificación de anclaje, es decir, la parte de una URL directamente al "#" firmar). Y dado que esta página es estática, incluso se puede permitir su almacenamiento en caché :)

¿No agregará para cada solicitud POST un DIV, un SCRIPT y un IFRAME eventualmente pierden memoria?

Si lo dejas en la página, lo hará. Si limpias después de ti, no lo hará. Todo lo que tenemos que hacer es dar una identificación al DIV que podemos utilizar para celan el DIV y el FORMULARIO y el IFRAME dentro de él cada vez que llega la respuesta del servidor o se agota el tiempo de espera.

¿Qué obtenemos?

Efectivamente, una llamada POST entre dominios, incluidos los archivos adjuntos y varias partes y todo :)

¿Cuáles son los límites?

• La respuesta del servidor está limitada a lo que corresponda a una redirección.
• El servidor SIEMPRE debe devolver un REDIRECTO a una solicitud POST. Eso incluye 404 y 500 errores. Alternativamente, cree un tiempo de espera en el cliente justo antes de activar la solicitud, para que pueda detectar las solicitudes que no han regresado.
• no todos pueden entender todo esto y todas las etapas involucradas. es una especie de trabajo de nivel de infraestructura, pero una vez que lo ejecutas, se mece :)

¿Puedo usarlo para PUT y ELIMINAR llamadas?

La etiqueta FORM no se PONE y ELIMINA. Pero eso es mejor que nada :)

Ok, entendí el concepto. ¿Cómo se hace técnicamente?

Lo que hago es:

Creo el DIV, lo calculo como invisible y lo agrego al DOM. También le doy una identificación que puedo limpiar desde el DOM después de que ha llegado la respuesta del servidor (de la misma manera que JQuery limpia sus borradores JSONP SCRIPT, pero el DIV).

Luego compongo una cadena que contiene tanto IFRAME como FORM - con todos los atributos, propiedades y campos de entrada, y lo inyecto en el DIV invisible. es importante inyectar esta cadena en el DIV solo DESPUÉS de que el div esté en el DOM. Si no, no funcionará en todos los navegadores.

Después de eso, obtengo una referencia al FORMULARIO y lo envío. Solo recuerde una línea antes de eso: establecer una devolución de llamada Timeout en caso de que el servidor no responda o responda de manera incorrecta.

La función de devolución de llamada contiene el código de limpieza. También se llama por temporizador en caso de un tiempo de espera de respuesta (y limpia su tiempo de espera cuando llega una respuesta del servidor).

¡Muéstrame el código!

El siguiente fragmento de código es totalmente "neutral" en javascript "puro" y declara la utilidad que necesita. Solo por simplificar la explicación de la idea, todo se ejecuta en el ámbito global, sin embargo, debería ser un poco más sofisticado ...

Organízala en las funciones que puedas y parametriza lo que necesites, pero asegúrate de que todas las partes que necesitan verse se ejecuten en el mismo ámbito :)

Para este ejemplo, supongamos que el cliente se ejecuta en http://samedomain.com y el servidor se ejecuta en http://crossdomain.com .

El código de script en el documento de nivel superior

//declare the Async-call callback function on the global scope
function myAsyncJSONPCallback(data){
    //clean up 
    var e = document.getElementById(id);
    if (e) e.parentNode.removeChild(e);
    clearTimeout(timeout);

    if (data && data.error){
        //handle errors & TIMEOUTS
        //...
        return;
    }

    //use data
    //...
}

var serverUrl          = "http://crossdomain.com/server/page"
  , params = { param1  : "value of param 1"      //I assume this value to be passed
             , param2  : "value of param 2"      //here I just declare it...
             , callback: "myAsyncJSONPCallback" 
             }
  , clientUtilityUrl   = "http://samedomain.com/utils/postResponse.html"
  , id     = "some-unique-id"// unique Request ID. You can generate it your own way
  , div    = document.createElement("DIV")       //this is where the actual work start!
  , HTML   = [ "<IFRAME name=''ifr_",id,"''></IFRAME>"  
             , "<form target=''ifr_",id,"'' method=''POST'' action=''",serverUrl 
             , "'' id=''frm_",id,"'' enctype=''multipart/form-data''>"
             ]
  , each, pval, timeout;

//augment utility func to make the array a "StringBuffer" - see usage bellow
HTML.add = function(){
              for (var i =0; i < arguments.length; i++) 
                  this[this.length] = arguments[i];
           }

//add rurl to the params object - part of infrastructure work
params.rurl = clientUtilityUrl //ABSOLUTE URL to the utility page must be on
                               //the SAME DOMAIN as page that makes the request

//add all params to composed string of FORM and IFRAME inside the FORM tag  
for(each in params){
    pval = params[each].toString().replace(//"/g,"&quot;");//assure: that " mark will not break
    HTML.add("<input name=''",each,"'' value=''",pval,"''/>"); //        the composed string      
}
//close FORM tag in composed string and put all parts together
HTML.add("</form>");
HTML = HTML.join("");   //Now the composed HTML string ready :)

//prepare the DIV
div.id = id; // this ID is used to clean-up once the response has come, or timeout is detected
div.style.display = "none"; //assure the DIV will not influence UI

//TRICKY: append the DIV to the DOM and *ONLY THEN* inject the HTML in it
//        for some reason it works in all browsers only this way. Injecting the DIV as part 
//        of a composed string did not always work for me
document.body.appendChild(div);
div.innerHTML = HTML;

//TRICKY: note that myAsyncJSONPCallback must see the ''timeout'' variable
timeout = setTimeout("myAsyncJSONPCallback({error:''TIMEOUT''})",4000);
document.getElementById("frm_"+id+).submit();

El servidor en el dominio cruzado Se espera que la respuesta del servidor sea una REDIRECCIÓN, ya sea por HTTP-Header o escribiendo una etiqueta SCRIPT. (la redirección es mejor, la etiqueta SCRIPT es más fácil de depurar con puntos críticos JS). Aquí está el ejemplo del encabezado, suponiendo que el valor de rurl desde arriba

Location: http://samedomain.com/HTML/page?callback=myAsyncJSONPCallback&data=whatever_the_server_has_to_return

Tenga en cuenta que

• el valor del argumento de data puede ser una expresión JavaScript Object-Literal o JSON, sin embargo, es mejor que esté codificada en url.
• la duración de la respuesta del servidor está limitada a la longitud de una URL que un navegador puede procesar.

Además, en mi sistema, el servidor tiene un valor predeterminado para rurl para que este parámetro sea opcional. Pero puede hacerlo solo si su aplicación de cliente y su aplicación de servidor están acopladas.

API para emitir encabezado de redirección:

http://www.webconfs.com/how-to-redirect-a-webpage.php

Alternativamente, puede hacer que el servidor escriba como respuesta lo siguiente:

<script>
   location.href="http://samedomain.com/HTML/page?callback=myAsyncJSONPCallback&data=whatever_the_server_has_to_return"
</script>

Pero los encabezados HTTP se considerarían más limpios;)

La página de utilidades en el mismo dominio que el documento de nivel superior

Uso la misma página de utilidad que rurl para todas mis solicitudes de publicación: todo lo que hace es tomar el nombre de la devolución de llamada y los parámetros de Query-String usando el código del lado del cliente, y llamarlo en el documento principal. ¡Puede hacerlo ÚNICAMENTE cuando esta página se ejecuta en el mismo dominio EXACTO que la página que activó la solicitud! Importante: a diferencia de las cookies, ¡los subdominios no cuentan! Tiene que ser el mismo dominio.

También lo hace más eficiente si esta página de utilidad no contiene referencias a otros recursos, incluidas las bibliotecas JS. Entonces esta página es JavaScript simple. Pero puedes implementarlo como quieras.

Aquí está la página de respuesta que uso, quién es la URL que se encuentra en el rurl de la solicitud POST (en el ejemplo: http://samedomain.com/utils/postResponse.html )

<html><head>
<script type="text/javascript">
//parse and organize all QS parameters in a more comfortable way
var params = {};
if (location.search.length > 1) {
    var i, arr = location.search.substr(1).split("&");
    for (i = 0; i < arr.length; i++) {
        arr[i] = arr[i].split("=");
        params[arr[i][0]] = unescape(arr[i][1]);
    }
}

//support server answer as JavaScript Object-Literals or JSON:
//  evaluate the data expression
try { 
    eval("params.data = " + params.data); 
} catch (e) { 
    params.data = {error: "server response failed with evaluation error: " + e.message
                  ,data : params.data
                  }
}

//invoke the callback on the parent
try{
     window.parent[ params.callback ](params.data || "no-data-returned");
}catch(e){
     //if something went wrong - at least let''s learn about it in the
     //      console (in addition to the timeout)
     throw "Problem in passing POST response to host page: /n/n" + e.message;
}
</script>
</head><body></body></html>

No es mucha automatización y una biblioteca ''lista para usar'' como jQuery e impone cierto trabajo ''manual'', pero tiene el encanto :)

Si eres un entusiasta admirador de las bibliotecas prefabricadas, también puedes consultar Dojo Toolkit que la última vez que revisé (hace aproximadamente un año) tenía su propia implementación para el mismo mecanismo. http://dojotoolkit.org/

Buena suerte amigo, espero que ayude ...

Answer 3

No. Considere lo que es JSONP: una inyección de una nueva etiqueta <script> en el documento. El navegador realiza una solicitud GET para extraer el script señalado por el atributo src . No hay forma de especificar ningún otro verbo HTTP al hacer esto.

Answer 4

• En lugar de golpearnos la cabeza con el método JSONP, que en realidad no admitirá el método POST de forma predeterminada, podemos utilizar CORS Esto no proporcionará grandes cambios en la forma convencional de programación. Por simple llamada Jquery Ajax podemos ir con dominios cruzados.
• En el método CORS, debe agregar encabezados en el archivo de scripting del lado del servidor, o en el servidor mismo (en el dominio remoto), para habilitar este acceso. Esto es muy confiable, ya que podemos prevenir / restringir los dominios que realizan llamadas no deseadas.
• Se puede encontrar en detalle en la página de wikipedia .