Come fare una richiesta JSONP da Javascript senza JQuery?

Posso fare una richiesta JSONP tra domini in JavaScript senza usare jQuery o altra libreria esterna? Vorrei usare JavaScript di per sé e quindi analizzare i dati e renderli un object in modo che potessi usarlo. Devo usare una libreria esterna? Se no, come posso farlo?

function foo(data) { // do stuff with JSON } var script = document.createElement('script'); script.src = '//example.com/path/to/jsonp?callback=foo' document.getElementsByTagName('head')[0].appendChild(script); // or document.head.appendChild(script) in modern browsers 

Esempio leggero (con supporto per onSuccess e onTimeout). È necessario passare il nome di callback all’interno dell’URL se necessario.

 var $jsonp = (function(){ var that = {}; that.send = function(src, options) { var callback_name = options.callbackName || 'callback', on_success = options.onSuccess || function(){}, on_timeout = options.onTimeout || function(){}, timeout = options.timeout || 10; // sec var timeout_trigger = window.setTimeout(function(){ window[callback_name] = function(){}; on_timeout(); }, timeout * 1000); window[callback_name] = function(data){ window.clearTimeout(timeout_trigger); on_success(data); } var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = src; document.getElementsByTagName('head')[0].appendChild(script); } return that; })(); 

Esempio di utilizzo:

 $jsonp.send('some_url?callback=handleStuff', { callbackName: 'handleStuff', onSuccess: function(json){ console.log('success!', json); }, onTimeout: function(){ console.log('timeout!'); }, timeout: 5 }); 

In GitHub: https://github.com/sobstel/jsonp.js/blob/master/jsonp.js

Cos’è JSONP?

La cosa importante da ricordare con jsonp è che non è in realtà un protocollo o un tipo di dati. È solo un modo per caricare uno script al volo ed elaborare lo script che viene introdotto nella pagina. Nello spirito di JSONP, questo significa introdurre un nuovo object javascript dal server nell’applicazione client / script.

Quando è necessario JSONP?

È un metodo che consente a un dominio di accedere / elaborare dati da un altro nella stessa pagina in modo asincrono. Principalmente, viene utilizzato per ignorare le restrizioni CORS (Cross Origin Resource Sharing) che si verificano con una richiesta XHR (ajax). I carichi di script non sono soggetti alle restrizioni CORS.

Com’è fatto

L’introduzione di un nuovo object javascript dal server può essere implementata in molti modi, ma la pratica più comune è che il server implementa l’esecuzione di una funzione di “callback”, con l’object richiesto passato. La funzione di callback è solo una funzione che hai già impostato sul client che lo script che carichi chiama nel momento in cui lo script carica per elaborare i dati passati ad esso.

Esempio:

Ho un’applicazione che registra tutti gli oggetti nella casa di qualcuno. La mia applicazione è impostata e ora voglio recuperare tutti gli elementi nella camera da letto principale.

La mia applicazione è su app.home.com . Le API di cui ho bisogno per caricare i dati sono su api.home.com .

A meno che il server non sia configurato esplicitamente per consentirlo, non posso utilizzare ajax per caricare questi dati, poiché anche le pagine su sottodomini separati sono soggette alle restrizioni XHR CORS.

Idealmente, imposta le cose per consentire X-domain XHR

Idealmente, poiché l’API e l’app si trovano nello stesso dominio, potrei avere accesso per impostare le intestazioni su api.home.com . Se lo faccio, posso aggiungere un Access-Control-Allow-Origin: intestazione che garantisce l’accesso a app.home.com . Supponendo che l’intestazione sia impostata come segue: Access-Control-Allow-Origin: "http://app.home.com" , questo è molto più sicuro rispetto all’impostazione di JSONP. Questo perché app.home.com può ottenere tutto ciò che desidera da api.home.com senza api.home.com fornisce a CORS l’accesso all’intero Internet.

La soluzione XHR di cui sopra non è ansible. Configurare JSONP Sul mio script client: ho impostato una funzione per elaborare la risposta dal server quando effettuo la chiamata JSONP. :

 function processJSONPResponse(data) { var dataFromServer = data; } 

Il server dovrà essere configurato per restituire un mini script che assomigli a "processJSONPResponse({"room":"main bedroom","items":["bed","chest of drawers"]});" Potrebbe essere progettato per restituire una stringa di questo tipo se viene chiamato qualcosa come //api.home.com?getdata=room&room=main_bedroom .

Quindi il client imposta un tag script come tale:

 var script = document.createElement('script'); script.src = '//api.home.com?getdata=room&room=main_bedroom'; document.querySelector('head').appendChild(script); 

Questo carica lo script e chiama immediatamente window.processJSONPResponse() come scritto / echo / stampato dal server. I dati passati come parametro alla funzione sono ora memorizzati nella variabile locale dataFromServer e puoi farne tutto ciò che ti serve.

Pulire

Una volta che il cliente ha i dati, es. immediatamente dopo che lo script è stato aggiunto al DOM, l’elemento di script può essere rimosso dal DOM:

 script.parentNode.removeChild(script); 

La mia comprensione è che in realtà usi i tag script con JSONP, sooo …

Il primo passo è creare la tua funzione che gestirà il JSON:

 function hooray(json) { // dealin wit teh jsonz } 

Assicurati che questa funzione sia accessibile a livello globale.

Quindi, aggiungi un elemento di script al DOM:

 var script = document.createElement('script'); script.src = 'http://domain.com/?function=hooray'; document.body.appendChild(script); 

Lo script caricherà il codice JavaScript creato dal provider dell’API e lo eseguirà.

il modo in cui utilizzo jsonp come di seguito:

 function jsonp(uri) { return new Promise(function(resolve, reject) { var id = '_' + Math.round(10000 * Math.random()); var callbackName = 'jsonp_callback_' + id; window[callbackName] = function(data) { delete window[callbackName]; var ele = document.getElementById(id); ele.parentNode.removeChild(ele); resolve(data); } var src = uri + '&callback=' + callbackName; var script = document.createElement('script'); script.src = src; script.id = id; script.addEventListener('error', reject); (document.getElementsByTagName('head')[0] || document.body || document.documentElement).appendChild(script) }); } 

quindi utilizzare il metodo ‘jsonp’ come questo:

 jsonp('http://xxx/cors').then(function(data){ console.log(data); }); 

riferimento:

JavaScript XMLHttpRequest che utilizza JsonP

http://www.w3ctech.com/topic/721 (parla del modo d’uso Promise)

Ho una libreria javascript pura per farlo https://github.com/robertodecurnex/J50Npi/blob/master/J50Npi.js

Dai un’occhiata e fammi sapere se hai bisogno di aiuto per usare o capire il codice.

A proposito, hai un semplice esempio di utilizzo qui: http://robertodecurnex.github.com/J50Npi/

 /** * Loads data asynchronously via JSONP. */ const load = (() => { let index = 0; const timeout = 5000; return url => new Promise((resolve, reject) => { const callback = '__callback' + index++; const timeoutID = window.setTimeout(() => { reject(new Error('Request timeout.')); }, timeout); window[callback] = response => { window.clearTimeout(timeoutID); resolve(response.data); }; const script = document.createElement('script'); script.type = 'text/javascript'; script.async = true; script.src = url + (url.indexOf('?') === -1 ? '?' : '&') + 'callback=' + callback; document.getElementsByTagName('head')[0].appendChild(script); }); })(); 

Campione di utilizzo:

 const data = await load('http://api.github.com/orgs/kriasoft'); 

Ho scritto una biblioteca per gestire questo, il più semplicemente ansible. Non c’è bisogno di renderlo esterno, è solo una funzione. A differenza di altre opzioni, questo script si ripulisce da solo, ed è generalizzato per fare ulteriori richieste in fase di runtime.

https://github.com/Fresheyeball/micro-jsonp

 function jsonp(url, key, callback) { var appendParam = function(url, key, param){ return url + (url.indexOf("?") > 0 ? "&" : "?") + key + "=" + param; }, createScript = function(url, callback){ var doc = document, head = doc.head, script = doc.createElement("script"); script .setAttribute("src", url); head .appendChild(script); callback(function(){ setTimeout(function(){ head .removeChild(script); }, 0); }); }, q = "q" + Math.round(Math.random() * Date.now()); createScript( appendParam(url, key, q), function(remove){ window[q] = function(json){ window[q] = undefined; remove(); callback(json); }; }); } 
 /** * Get JSONP data for cross-domain AJAX requests * @private * @link http://cameronspear.com/blog/exactly-what-is-jsonp/ * @param {String} url The URL of the JSON request * @param {String} callback The name of the callback to run on load */ var loadJSONP = function ( url, callback ) { // Create script with url and callback (if specified) var ref = window.document.getElementsByTagName( 'script' )[ 0 ]; var script = window.document.createElement( 'script' ); script.src = url + (url.indexOf( '?' ) + 1 ? '&' : '?') + 'callback=' + callback; // Insert script tag into the DOM (append to ) ref.parentNode.insertBefore( script, ref ); // After the script is loaded (and executed), remove it script.onload = function () { this.remove(); }; }; /** * Example */ // Function to run on success var logAPI = function ( data ) { console.log( data ); } // Run request loadJSONP( 'http://api.petfinder.com/shelter.getPets?format=json&key=12345&shelter=AA11', 'logAPI' ); 

Se si utilizza ES6 con NPM, è ansible provare il modulo nodo “fetch-jsonp”. API di recupero Fornisce supporto per effettuare una chiamata JsonP come una normale chiamata XHR.

Prerequisito: dovresti utilizzare il modulo del nodo di isomorphic-fetch nello stack.

Si prega di trovare sotto l’esempio di JavaScript per effettuare una chiamata JSONP senza JQuery:

Inoltre, puoi fare riferimento al mio repository GitHub come riferimento.

https://github.com/shedagemayur/JavaScriptCode/tree/master/jsonp

 window.onload = function(){ var callbackMethod = 'callback_' + new Date().getTime(); var script = document.createElement('script'); script.src = 'https://jsonplaceholder.typicode.com/users/1?callback='+callbackMethod; document.body.appendChild(script); window[callbackMethod] = function(data){ delete window[callbackMethod]; document.body.removeChild(script); console.log(data); } }