¿Solicitud HTTP GET en JavaScript?

Respuestas:

1208

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);
}
Joan
fuente
2
Bueno, por supuesto, Javascript lo tiene incorporado, o ¿cómo podría cualquier biblioteca de Javascript ofrecerle un método conveniente? La diferencia es que los métodos de conveniencia ofrecen, bueno, conveniencia y una sintaxis más clara y simple.
Pistos
37
¿Por qué el prefijo XML`?
AlikElzin-kilaka
99
Prefijo XML porque usa la X de AJAX ~ JavaScript asíncrono y XML . Además, un buen punto sobre la " API que tiene y el enlace ECMAScript " se debe al hecho de que JavaScript puede estar en muchas cosas, aparte de los navegadores que admiten HTTP (por ejemplo, como Adobe Reader ...). Es bueno recordarlo. Orejas puntiagudas.
será el
77
@ AlikElzin-kilaka En realidad, todas las respuestas anteriores están fuera de lugar (de hecho, los documentos W3 vinculados explican que "cada componente de este nombre es potencialmente engañoso"). ¿Respuesta correcta? es simplemente mal llamado stackoverflow.com/questions/12067185/…
Ashley Coolman
2
La API fetch ofrece una mejor manera de hacer esto y se puede rellenar cuando sea necesario (consulte la respuesta de @ PeterGibson a continuación ).
Dominus.Vobiscum
190

En jQuery :

$.get(
    "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + data);
    }
);
Pistos
fuente
44
tenga en cuenta que esto no funciona en IE 10 cuando intente acceder a la URL en un dominio diferente al dominio de la página
BornToCode
55
@BornToCode debe investigar más a fondo y posiblemente abrir un error en el rastreador de problemas jQuery en ese caso
cenizas999
92
Sé que algunas personas quieren escribir Javascript puro. Lo entiendo. No tengo ningún problema con que la gente haga eso en sus proyectos. Mi "En jQuery:" debe interpretarse como "Sé que preguntaste cómo hacerlo en Javascript, pero déjame mostrarte cómo harías eso con jQuery, para que puedas despertar tu curiosidad al ver qué tipo de concisión de sintaxis y claridad que puede disfrutar al usar esta biblioteca, que también le brindaría muchas otras ventajas y herramientas ".
Pistos
34
Observe también que el póster original dijo más tarde: "¡Gracias por todas las respuestas! Fui con jQuery en base a algunas cosas que leí en su sitio".
Pistos
153

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
});
tggagne
fuente
Error UnCaughtReference, HttpClient no está definido. Estoy obteniendo esta primera línea por sí mismo.
sashikanta
¿Cómo se llama desde html onClick?
Gobliins
Haga una función más donde contenga el cliente var ... y simplemente ejecute functionName (); falso retorno; en onClick
mail929
1
ReferenceError: XMLHttpRequest is not defined
Bugs Buggy
123

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;
}
Peter Gibson
fuente
99
Podría ahorrarle algo de tiempo al mencionar que puede hacer esto para incluir credenciales en la solicitud:fetch(url, { credentials:"include" })
Enselic
@ bugmenot123 window.fetchno viene con un analizador XML, pero puede analizar la respuesta usted mismo si la maneja como texto (no json como en el ejemplo anterior). Consulte stackoverflow.com/a/37702056/66349 para ver un ejemplo
Peter Gibson,
94

Una versión sin devolución de llamada

var i = document.createElement("img");
i.src = "/your/GET/url?params=here";
aNieto2k
fuente
2
¡Excelente! Necesitaba un script de Greasemonkey para mantener viva una sesión y este fragmento es perfecto. Solo lo envolví en una setIntervalllamada.
Carcamano
99
¿Cómo obtengo el resultado?
user4421975
@ user4421975 No obtiene: para obtener acceso a la respuesta de solicitud, debe utilizar XMLHttpRequest antes mencionado.
Jakub Pastuszuk
74

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;
        }                    
    }
}
rp.
fuente
33
Dado que esta respuesta es uno de los mejores resultados para buscar en Google "http request javascript", vale la pena mencionar que ejecutar eval en los datos de respuesta como ese se considera una mala práctica
Kloar
99
@Kloar buen punto, pero sería aún mejor dar la razón por la que es malo, lo que supongo que es seguridad. Explicar por qué las prácticas son malas es la mejor manera de hacer que las personas cambien sus hábitos.
Balmipour
43

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);
Daniel De León
fuente
36

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)

Damjan Pavlica
fuente
19

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é.

Tom
fuente
12

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');
  }
});
Mark Biek
fuente
2
El problema es que Mac OS X no viene con Prototype preinstalado. Como el widget necesita ejecutarse en cualquier computadora, incluir Prototype (o jQuery) en cada widget no es la mejor solución.
kiamlaluno
@kiamlaluno usa Prototype cdn de cloudflare
Vladimir Stazhilov
10

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();
flyingP0tat0
fuente
2
¿Podría la gente dar algunos comentarios sobre lo que he hecho mal? ¡No es muy útil de esa manera!
flyingP0tat0
La mejor respuesta en mi opinión, si uno está codificando en ES5 usando JavaScript simple.
CoderX
8

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;
});
Daniel Beardsley
fuente
5

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

Andrew Hedges
fuente
5

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.

Nikola Stjelja
fuente
5

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.
  });
Vitalii Fedorenko
fuente
5

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);
      }});
    }); 
parag.rane
fuente
5

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

aabiro
fuente
4
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

Gaurav Gupta
fuente
4

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();
}
Juniorized
fuente
2
// 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()
Pradeep Maurya
fuente
1

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.

kiamlaluno
fuente
1

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

Moderno, limpio y más corto

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

Kamil Kiełczewski
fuente
0

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

jpereira
fuente
0
<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>
Rama
fuente
-1

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
Cherif
fuente