Richiesta GET HTTP in JavaScript?

Devo fare una richiesta HTTP GET in JavaScript. Qual è il modo migliore per farlo?

Devo farlo in un widget del dashcode di Mac OS X.

Puoi utilizzare le funzioni fornite dall’ambiente di hosting tramite javascript:

function httpGet(theUrl) { var xmlHttp = new XMLHttpRequest(); xmlHttp.open( "GET", theUrl, false ); // false for synchronous request xmlHttp.send( null ); return xmlHttp.responseText; } 

Tuttavia, le richieste sincrone sono scoraggiate, quindi potresti voler usare questo:

 function httpGetAsync(theUrl, callback) { var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) callback(xmlHttp.responseText); } xmlHttp.open("GET", theUrl, true); // true for asynchronous xmlHttp.send(null); } 

Nota: a partire da Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), le richieste sincrone sul thread principale sono state deprecate a causa degli effetti negativi dell’esperienza utente.

In jQuery :

 $.get( "somepage.php", {paramOne : 1, paramX : 'abc'}, function(data) { alert('page content: ' + data); } ); 

Un sacco di ottimi consigli sopra, ma non molto riutilizzabili, e troppo spesso pieni di assurdità DOM e altri fluff che nascondono il codice facile.

Ecco una class JavaScript che abbiamo creato che è riutilizzabile e facile da usare. Attualmente ha solo un metodo GET, ma funziona per noi. Aggiungere un POST non dovrebbe tassare le abilità di nessuno.

 var HttpClient = function() { this.get = function(aUrl, aCallback) { var anHttpRequest = new XMLHttpRequest(); anHttpRequest.onreadystatechange = function() { if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200) aCallback(anHttpRequest.responseText); } anHttpRequest.open( "GET", aUrl, true ); anHttpRequest.send( null ); } } 

Usarlo è facile come:

 var client = new HttpClient(); client.get('http://some/thing?with=arguments', function(response) { // do something with response }); 

Una versione senza callback

 var i = document.createElement("img"); i.src = "/your/GET/url?params=here"; 

Ecco il codice per farlo direttamente con JavaScript. Ma, come accennato in precedenza, staresti molto meglio con una libreria JavaScript. Il mio preferito è jQuery.

Nel caso qui sotto, una pagina ASPX (che sta servendo come servizio REST di un pover’uomo) viene chiamata per restituire un object JSON JavaScript.

 var xmlHttp = null; function GetCustomerInfo() { var CustomerNumber = document.getElementById( "TextBoxCustomerNumber" ).value; var Url = "GetCustomerInfoAsJson.aspx?number=" + CustomerNumber; xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = ProcessRequest; xmlHttp.open( "GET", Url, true ); xmlHttp.send( null ); } function ProcessRequest() { if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) { if ( xmlHttp.responseText == "Not found" ) { document.getElementById( "TextBoxCustomerName" ).value = "Not found"; document.getElementById( "TextBoxCustomerAddress" ).value = ""; } else { var info = eval ( "(" + xmlHttp.responseText + ")" ); // No parsing necessary with JSON! document.getElementById( "TextBoxCustomerName" ).value = info.jsonData[ 0 ].cmname; document.getElementById( "TextBoxCustomerAddress" ).value = info.jsonData[ 0 ].cmaddr1; } } } 

La nuova API window.fetch è una sostituzione più pulita per XMLHttpRequest che utilizza le promesse ES6. C’è una bella spiegazione qui , ma si riduce a (dall’articolo):

 fetch(url).then(function(response) { return response.json(); }).then(function(data) { console.log(data); }).catch(function() { console.log("Booo"); }); 

Il supporto per browser ora è buono nelle ultime versioni (funziona con Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), browser Android e Chrome per Android), tuttavia IE probabilmente non ricevere supporto ufficiale. GitHub ha un polyfill disponibile che è consigliato per supportare i browser più vecchi ancora in gran parte in uso (versioni esp di Safari pre marzo 2017 e browser mobili dello stesso periodo).

Immagino che questo sia più conveniente di jQuery o XMLHttpRequest o meno dipende dalla natura del progetto.

Ecco un link alle specifiche https://fetch.spec.whatwg.org/

Modifica :

Usando ES7 async / await, questo diventa semplicemente (basato su questo Gist ):

 async function fetchAsync (url) { let response = await fetch(url); let data = await response.json(); return data; } 

Una versione pronta per la copia e incolla

 var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState === 4) { if (request.status === 200) { document.body.className = 'ok'; console.log(request.responseText); } else if (!isValid(this.response) && this.status == 0) { document.body.className = 'error offline'; console.log("The computer appears to be offline."); } else { document.body.className = 'error'; } } }; request.open("GET", url , true); request.send(null); 

IE memorizzerà gli URL nella cache in modo da velocizzare il caricamento, ma se si sta interrogando un server ad intervalli cercando di ottenere nuove informazioni, IE lo memorizzerà nella cache e probabilmente restituirà lo stesso set di dati che hai sempre avuto.

Indipendentemente dal modo in cui si finisce per eseguire la richiesta GET – vanilla JavaScript, Prototype, jQuery, ecc. – assicurarsi di aver messo in atto un meccanismo per combattere il caching. Per combatterlo, aggiungi un token univoco alla fine dell’URL che stai per colpire. Questo può essere fatto da:

 var sURL = '/your/url.html?' + (new Date()).getTime(); 

Questo aggiungerà un timestamp univoco alla fine dell’URL e impedirà il verificarsi di eventuali caching.

Breve e puro:

 const http = new XMLHttpRequest() http.open("GET", "https://api.lyrics.ovh/v1/shakira/waka-waka") http.send() http.onload = () => console.log(http.responseText) 

Il prototipo lo rende semplicemente semplice

 new Ajax.Request( '/myurl', { method: 'get', parameters: { 'param1': 'value1'}, onSuccess: function(response){ alert(response.responseText); }, onFailure: function(){ alert('ERROR'); } }); 

Non ho dimestichezza con i widget Dashcode di Mac OS, ma se ti consentono di utilizzare librerie JavaScript e supportare XMLHttpRequests , utilizzerei jQuery e faccio qualcosa del genere:

 var page_content; $.get( "somepage.php", function(data){ page_content = data; }); 

Nel file Info.plist del widget, non dimenticare di impostare la chiave AllowNetworkAccess su true.

Per coloro che usano AngularJs , è $http.get :

 $http.get('/someUrl'). success(function(data, status, headers, config) { // this callback will be called asynchronously // when the response is available }). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. }); 

Il modo migliore è usare AJAX (puoi trovare un semplice tutorial su questa pagina Tizag ). La ragione è che qualsiasi altra tecnica che si può usare richiede più codice, non è garantito che funzioni cross browser senza rielaborazioni e richiede l’uso di più memoria client aprendo le pagine nascoste all’interno dei frame che passano gli URL analizzando i loro dati e chiudendoli. AJAX è la strada da percorrere in questa situazione. Che i miei due anni di sviluppo pesante in javascript parlano.

È ansible ottenere una richiesta HTTP GET in due modi:

  1. Questo approccio basato sul formato xml. Devi passare l’URL per la richiesta.

     xmlhttp.open("GET","URL",true); xmlhttp.send(); 
  2. Questo è basato su jQuery. Devi specificare l’URL e il nome_funzione che vuoi chiamare.

     $("btn").click(function() { $.ajax({url: "demo_test.txt", success: function_name(result) { $("#innerdiv").html(result); }}); }); 
 function get(path) { var form = document.createElement("form"); form.setAttribute("method", "get"); form.setAttribute("action", path); document.body.appendChild(form); form.submit(); } get('/my/url/') 

La stessa cosa può essere fatta anche per la richiesta di posta.
Dai un’occhiata a questo link Richiesta di post JavaScript come un modulo di invio

Una soluzione che supporta i browser più vecchi:

 function httpRequest() { var ajax = null, response = null, self = this; this.method = null; this.url = null; this.async = true; this.data = null; this.send = function() { ajax.open(this.method, this.url, this.asnyc); ajax.send(this.data); }; if(window.XMLHttpRequest) { ajax = new XMLHttpRequest(); } else if(window.ActiveXObject) { try { ajax = new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch(e) { try { ajax = new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch(error) { self.fail("not supported"); } } } if(ajax == null) { return false; } ajax.onreadystatechange = function() { if(this.readyState == 4) { if(this.status == 200) { self.success(this.responseText); } else { self.fail(this.status + " - " + this.statusText); } } }; } 

Forse un po ‘eccessivo, ma con questo codice andrai sicuramente al sicuro.

Uso:

 //create request with its porperties var request = new httpRequest(); request.method = "GET"; request.url = "https://example.com/api?parameter=value"; //create callback for success containing the response request.success = function(response) { console.log(response); }; //and a fail callback containing the error request.fail = function(error) { console.log(error); }; //and finally send it away request.send(); 

Ajax

Faresti meglio a usare una libreria come Prototype o jQuery .

Per eseguire questa API di recupero è l’approccio consigliato, utilizzando JavaScript Promises. XMLHttpRequest (XHR), object IFrame o tag dinamici sono approcci più vecchi (e più clunkier).

  

Ecco una fantastica demo di recupero e documenti MDN

Se si desidera utilizzare il codice per un widget di Dashboard e non si desidera includere una libreria JavaScript in ogni widget creato, è ansible utilizzare l’object XMLHttpRequest supportato da Safari in modo nativo.

Come riportato da Andrew Hedges, un widget non ha accesso a una rete, per impostazione predefinita; è necessario modificare questa impostazione nel file info.plist associato al widget.

Puoi farlo anche con JS puro:

 // Create the XHR object. function createCORSRequest(method, url) { var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr) { // XHR for Chrome/Firefox/Opera/Safari. xhr.open(method, url, true); } else if (typeof XDomainRequest != "undefined") { // XDomainRequest for IE. xhr = new XDomainRequest(); xhr.open(method, url); } else { // CORS not supported. xhr = null; } return xhr; } // Make the actual CORS request. function makeCorsRequest() { // This is a sample server that supports CORS. var url = 'http://html5rocks-cors.s3-website-us-east-1.amazonaws.com/index.html'; var xhr = createCORSRequest('GET', url); if (!xhr) { alert('CORS not supported'); return; } // Response handlers. xhr.onload = function() { var text = xhr.responseText; alert('Response from CORS request to ' + url + ': ' + text); }; xhr.onerror = function() { alert('Woops, there was an error making the request.'); }; xhr.send(); } 

Vedi: per maggiori dettagli: tutorial html5rocks

Per rinfrescare la migliore risposta da joann con la promise questo è il mio codice:

 let httpRequestAsync = (method, url) => { return new Promise(function (resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open(method, url); xhr.onload = function () { if (xhr.status == 200) { resolve(xhr.responseText); } else { reject(new Error(xhr.responseText)); } }; xhr.send(); }); }