Búsqueda de sitios web

¿Solicitud HTTP GET en JavaScript?

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

Necesito hacer esto en un widget de Dashcode de Mac OS X.

Respuesta #1

Los navegadores (y Dashcode) proporcionan un objeto XMLHttpRequest que se puede utilizar 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, las solicitudes síncronas no están recomendadas y generarán una advertencia del tipo:

Nota: A partir de Gecko 30.0 (Firefox 30.0/Thunderbird 30.0/SeaMonkey 2.27), las solicitudes sincrónicas en el hilo principal han sido desaprobadas debido a los efectos negativos en la experiencia del usuario.

Deberías hacer 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);
}

Respuesta #2

window.fetch es un reemplazo moderno de XMLHttpRequest que hace uso de las promesas de ES6. Hay una buena explicación aquí, pero se resume a (del artículo):

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(err) {
  console.log('Fetch Error :-S', err);
});

El soporte del navegador ha sido bueno desde 2017. Es probable que IE no reciba soporte oficial. GitHub tiene un polyfill disponible que agrega soporte a algunos navegadores legacy (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 depende de la naturaleza del proyecto.

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

Editar:

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

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

Respuesta #3

En jQuery:

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

Respuesta #4

Muchos excelentes consejos arriba, pero no muy reutilizables, y demasiado a menudo llenos de tonterías del DOM y otras cosas innecesarias 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 nos funciona. Agregar un POST no debería dificultarle a 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
});

Respuesta #5

Una versión sin devolución de llamada

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

Respuesta #6

Aquí está el código para hacerlo directamente con JavaScript. Pero, como se mencionó anteriormente, te iría mucho mejor con una biblioteca de JavaScript. Mi favorita es jQuery.

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

Respuesta #7

Una versión moderna de copiar y pegar (usando fetch y función 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 para 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);

Respuesta #8

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)

Respuesta #9

Moderno, limpio y más corto

fetch('https://baconipsum.com/api/?type=1')


let url = 'https://baconipsum.com/api/?type=all-meat&paras=1&start-with-lorem=2';

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

Respuesta #10

IE almacenará en caché las URL para hacer que la carga sea más rápida, pero si, digamos, estás 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 has tenido.

Independientemente de cómo termines realizando tu solicitud GET - JavaScript puro, Prototype, jQuery, etc. - asegúrate de poner 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 se puede hacer de la siguiente manera:

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

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

Respuesta #11

Prototype lo hace extremadamente sencillo

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

Respuesta #12

Una solución que soporta 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);
            }
        }
    };
}

Quizás sea un poco exagerado, pero definitivamente vas seguro 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();

Respuesta #13

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

<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 fetch y documentación de MDN

Artículos relacionados