¿Solicitud HTTP GET en JavaScript?

Necesito hacer un solicitud HTTP GET en JavaScript. ¿Cuál es la mejor manera de hacer eso?

Necesito hacer esto en un widget de código de tablero de Mac OS X.

Los navegadores (y Dashcode) proporcionan un objeto XMLHttpRequest que se puede usar para realizar solicitudes HTTP desde JavaScript:

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

Sin embargo, se desaconsejan las solicitudes sincrónicas y generarán una advertencia en la línea de:

Nota: Comenzando con Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), las solicitudes sincrónicas en el hilo principal han quedado en desuso debido a los efectos negativos para la experiencia del usuario.

Debe realizar una solicitud asincrónica y manejar la respuesta dentro de un controlador de eventos.

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);
}

En jQuery :

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

Muchos de los excelentes consejos anteriores, pero no muy reutilizables, y con demasiada frecuencia están llenos de tonterías DOM y otras pelusas que ocultan el código fácil.

Aquí hay una clase de Javascript que creamos que es reutilizable y fácil de usar. Actualmente solo tiene un método GET, pero eso funciona para nosotros. Agregar un POST no debería gravar las habilidades de nadie.

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 es tan fácil como:

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

La nueva window.fetchAPI es un reemplazo más limpio XMLHttpRequestque hace uso de las promesas de ES6. Hay una explicación agradable aquí , pero se reduce a (del artículo):

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

El soporte del navegador ahora es bueno en las últimas versiones (funciona en Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), navegador Android y Chrome para Android), sin embargo, IE lo hará probablemente no obtenga apoyo oficial. GitHub tiene un polyfill disponible que se recomienda para admitir navegadores más antiguos aún en uso (especialmente versiones de Safari anteriores a marzo de 2017 y navegadores móviles del mismo período).

Supongo que si esto es más conveniente que jQuery o XMLHttpRequest o no, depende de la naturaleza del proyecto.

Aquí hay un enlace a la especificación https://fetch.spec.whatwg.org/

Editar :

Usando ES7 async / await, esto se vuelve simplemente (basado en este Gist ):

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

Una versión sin devolución de llamada

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

Aquí hay un código para hacerlo directamente con JavaScript. Pero, como se mencionó anteriormente, sería mucho mejor con una biblioteca de JavaScript. Mi favorito es jQuery.

En el siguiente caso, se está llamando a una página ASPX (que funciona como servicio REST de un hombre pobre) para devolver un objeto JSON de 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;
        }                    
    }
}

Una versión moderna de copiar y pegar (usando la función de búsqueda y flecha ) :

//Option with catch
fetch( textURL )
   .then(async r=> console.log(await r.text()))
   .catch(e=>console.error('Boo...' + e));

//No fear...
(async () =>
    console.log(
            (await (await fetch( jsonURL )).json())
            )
)();

Una versión clásica de copiar y pegar:

let request = new XMLHttpRequest();
request.onreadystatechange = function () {
    if (this.readyState === 4) {
        if (this.status === 200) {
            document.body.className = 'ok';
            console.log(this.responseText);
        } else if (this.response == null && 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);

Corto y limpio:

const http = new XMLHttpRequest()

http.open("GET", "https://api.lyrics.ovh/v1/toto/africa")
http.send()

http.onload = () => console.log(http.responseText)

IE almacenará en caché las URL para que la carga sea más rápida, pero si, por ejemplo, está sondeando un servidor a intervalos tratando de obtener nueva información, IE almacenará en caché esa URL y probablemente devolverá el mismo conjunto de datos que siempre ha tenido.

Independientemente de cómo termine haciendo su solicitud GET (JavaScript vainilla, Prototype, jQuery, etc.), asegúrese de establecer un mecanismo para combatir el almacenamiento en caché. Para combatir eso, agrega un token único al final de la URL que vas a utilizar. Esto puede hacerse por:

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

Esto agregará una marca de tiempo única al final de la URL y evitará que ocurra el almacenamiento en caché.

El prototipo lo hace muy simple

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

Una solución que admite navegadores antiguos:

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);
            }
        }
    };
}

Tal vez sea un poco exagerado, pero definitivamente vas a salvo con este código.

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();

No estoy familiarizado con los widgets Dashcode de Mac OS, pero si te permiten usar bibliotecas JavaScript y admitir XMLHttpRequests , usaría jQuery y haría algo como esto:

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

En el archivo Info.plist de su widget, no olvide establecer su AllowNetworkAccessclave en true.

La mejor manera es usar AJAX (puede encontrar un tutorial simple en esta página Tizag ). La razón es que cualquier otra técnica que pueda usar requiere más código, no se garantiza que funcione en varios navegadores sin volver a trabajar y requiere que use más memoria del cliente abriendo páginas ocultas dentro de marcos pasando URLs analizando sus datos y cerrándolos. AJAX es el camino a seguir en esta situación. Que mis dos años de desarrollo pesado javascript hablando.

Para aquellos que usan AngularJs , es $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.
  });

Puede obtener una solicitud HTTP GET de dos maneras:

1. Este enfoque basado en el formato xml. Debe pasar la URL de la solicitud.

   xmlhttp.open("GET","URL",true);
   xmlhttp.send();

2. Este está basado en jQuery. Debe especificar la URL y el nombre_función al que desea llamar.

   $("btn").click(function() {
     $.ajax({url: "demo_test.txt", success: function_name(result) {
       $("#innerdiv").html(result);
     }});
   }); 

Para hacer esto, Fetch API es el enfoque recomendado, usando Promesas de JavaScript. XMLHttpRequest (XHR), el objeto IFrame o las etiquetas dinámicas son enfoques más antiguos (y más complicados).

<script type=“text/javascript”> 
    // Create request object 
    var request = new Request('https://example.com/api/...', 
         { method: 'POST', 
           body: {'name': 'Klaus'}, 
           headers: new Headers({ 'Content-Type': 'application/json' }) 
         });
    // Now use it! 

   fetch(request) 
   .then(resp => { 
         // handle response }) 
   .catch(err => { 
         // handle errors 
    }); </script>

Aquí hay una gran demostración de recuperación y documentos de MDN

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/')

Lo mismo se puede hacer para la solicitud posterior también.
Echa un vistazo a este enlace Solicitud de publicación de JavaScript como un formulario enviar

Solicitud asíncrona simple:

function get(url, callback) {
  var getRequest = new XMLHttpRequest();

  getRequest.open("get", url, true);

  getRequest.addEventListener("readystatechange", function() {
    if (getRequest.readyState === 4 && getRequest.status === 200) {
      callback(getRequest.responseText);
    }
  });

  getRequest.send();
}

Ajax

Sería mejor usar una biblioteca como Prototype o jQuery .

// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest()

// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'restUrl', true)

request.onload = function () {
  // Begin accessing JSON data here
}

// Send request
request.send()

Si desea utilizar el código para un widget de Panel de control y no desea incluir una biblioteca de JavaScript en cada widget que haya creado, puede usar el objeto XMLHttpRequest que Safari admite de forma nativa.

Según lo informado por Andrew Hedges, un widget no tiene acceso a una red, por defecto; debe cambiar esa configuración en la lista de información asociada con el widget.

Para actualizar la mejor respuesta de joann con promesa, este es mi código:

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();
    });
}

Moderno, limpio y más corto

fetch('https://www.randomtext.me/api/lorem')

let url = 'https://www.randomtext.me/api/lorem';

// to only send GET request without waiting for response just call 
fetch(url);

// to wait for results use 'then'
fetch(url).then(r=> r.json().then(j=> console.log('\nREQUEST 2',j)));

// or async/await
(async()=> console.log('\nREQUEST 3', await(await fetch(url)).json()) )();

Open Chrome console network tab to see request

También puedes hacerlo 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();
}

Ver: para más detalles: tutorial html5rocks

<button type="button" onclick="loadXMLDoc()"> GET CONTENT</button>

 <script>
        function loadXMLDoc() {
            var xmlhttp = new XMLHttpRequest();
            var url = "<Enter URL>";``
            xmlhttp.onload = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == "200") {
                    document.getElementById("demo").innerHTML = this.responseText;
                }
            }
            xmlhttp.open("GET", url, true);
            xmlhttp.send();
        }
    </script>

Aquí hay una alternativa a los archivos xml para cargar sus archivos como un objeto y acceder a las propiedades como un objeto de una manera muy rápida.

• Atención, para que javascript pueda e interpretar el contenido correctamente es necesario guardar sus archivos en el mismo formato que su página HTML. Si usa UTF 8, guarde sus archivos en UTF8, etc.

XML funciona como un árbol, ¿vale? en lugar de escribir

     <property> value <property> 

escribe un archivo simple como este:

      Property1: value
      Property2: value
      etc.

Guarde su archivo ... Ahora llame a la función ...

    var objectfile = {};

function getfilecontent(url){
    var cli = new XMLHttpRequest();

    cli.onload = function(){
         if((this.status == 200 || this.status == 0) && this.responseText != null) {
        var r = this.responseText;
        var b=(r.indexOf('\n')?'\n':r.indexOf('\r')?'\r':'');
        if(b.length){
        if(b=='\n'){var j=r.toString().replace(/\r/gi,'');}else{var j=r.toString().replace(/\n/gi,'');}
        r=j.split(b);
        r=r.filter(function(val){if( val == '' || val == NaN || val == undefined || val == null ){return false;}return true;});
        r = r.map(f => f.trim());
        }
        if(r.length > 0){
            for(var i=0; i<r.length; i++){
                var m = r[i].split(':');
                if(m.length>1){
                        var mname = m[0];
                        var n = m.shift();
                        var ivalue = m.join(':');
                        objectfile[mname]=ivalue;
                }
            }
        }
        }
    }
cli.open("GET", url);
cli.send();
}

ahora puede obtener sus valores de manera eficiente.

getfilecontent('mesite.com/mefile.txt');

window.onload = function(){

if(objectfile !== null){
alert (objectfile.property1.value);
}
}

Es solo un pequeño regalo para contribuir al grupo. Gracias por tu gusto :)

Si desea probar la función en su PC localmente, reinicie su navegador con el siguiente comando (compatible con todos los navegadores excepto safari):

yournavigator.exe '' --allow-file-access-from-files