Pregunta Solicitud HTTP GET en JavaScript?


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

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


621
2017-10-29 16:31


origen


Respuestas:


Puede usar funciones proporcionadas por el entorno de alojamiento a través de 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, por lo que es posible que desee utilizar esto en su lugar:

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: Comenzando con Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), solicitudes sincrónicas en el hilo principal han quedado obsoletas debido a los efectos negativos para la experiencia del usuario.


992
2017-10-27 12:43



En jQuery:

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

175
2017-10-29 16:38



Un montón de buenos consejos anteriores, pero no muy reutilizables, y con demasiada frecuencia llenos de tonterías de DOM y otras pelusas que esconden 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
});

122
2018-02-27 18:03



Una versión sin devolución de llamada

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

83
2017-11-08 09:50



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

En el caso siguiente, se llama a una página ASPX (que funciona como servicio REST de un hombre pobre) para que devuelva un objeto JavaScript JSON.

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

68
2017-10-29 16:35



El nuevo window.fetch API es un reemplazo más limpio para XMLHttpRequest que hace uso de las promesas de ES6. Hay una buena explicación 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");
});

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 de Android y Chrome para Android), sin embargo, es probable que IE no lo haga obtener apoyo oficial. GitHub tiene un polyfill disponible, que se recomienda para admitir navegadores antiguos aún en uso (versiones esp. de Safari antes de 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:

Al utilizar ES7 async / await, esto se convierte simplemente (basado en esta esencia)

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

56
2017-07-11 00:45



Una versión lista para copiar y pegar

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

28
2017-08-18 07:23



IE guardará en caché las URL para que la carga sea más rápida, pero si, por ejemplo, sondea un servidor a intervalos tratando de obtener nueva información, IE almacenará en caché esa URL y probablemente devuelva 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 poner un mecanismo en su lugar para combatir el almacenamiento en caché. Para combatir eso, agregue un token único al final de la URL que va a golpear. Esto se puede hacer por:

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

Esto agregará una marca de tiempo única al final de la URL e impedirá el almacenamiento en caché.


16
2017-10-29 16:40



Corto y puro:

const http = new XMLHttpRequest()

http.open("GET", "https://api.lyrics.ovh/v1/shakira/waka-waka")
http.send()

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


13
2017-10-28 18:42



Prototipo lo hace muerto simple

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

12
2017-10-29 16:35



No estoy familiarizado con Mac OS Dashcode Widgets, pero si le permiten usar bibliotecas JavaScript y soporte XMLHttpRequests, Yo usaría jQuery y haz algo como esto:

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

7
2017-10-30 04:03