Solicitação HTTP GET em JavaScript?


Respostas:


1207

Navegadores (e Dashcode) fornecem um objeto XMLHttpRequest que pode ser usado para fazer solicitações HTTP a partir do JavaScript:

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

No entanto, solicitações síncronas são desencorajadas e gerarão um aviso ao longo das linhas de:

Nota: A partir do Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), solicitações síncronas no thread principal foram descontinuadas devido aos efeitos negativos para a experiência do usuário.

Você deve fazer uma solicitação assíncrona e manipular a resposta dentro de um manipulador 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);
}

2
Bem, é claro que o Javascript está embutido, ou como qualquer biblioteca Javascript pode oferecer um método conveniente para isso? A diferença é que os métodos de conveniência oferecem, bem, conveniência e uma sintaxe mais clara e simples.
Pistos

37
Por que o prefixo XML`?
AlikElzin-Kilaka

9
Prefixo XML porque ele usa o X do JavaScript AJAX ~ Assíncrono e XML . Além disso, o ponto positivo é que a " API que possui uma ligação ECMAScript " deve-se ao fato de que o JavaScript pode estar em muitas coisas, exceto nos navegadores que suportam HTTP (por exemplo, como o Adobe Reader ...). Orelhas pontudas.
será

7
@ AlikElzin-kilaka Na verdade, todas as respostas acima estão erradas (na verdade, os documentos W3 vinculados explicam "cada componente desse nome é potencialmente enganoso"). Resposta correta? é apenas mal chamado stackoverflow.com/questions/12067185/...
Ashley Coolman

2
A API de busca oferece uma maneira melhor de fazer isso e pode ser preenchida com polyf quando necessário (consulte a resposta de @ PeterGibson abaixo ).
Dominus.Vobiscum

190

No jQuery :

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

4
observe que isso não está funcionando no IE 10 ao tentar acessar a URL em um domínio diferente do domínio da página
BornToCode

5
@BornToCode você deve investigar mais e possivelmente abrir um bug no issue tracker jQuery nesse caso
ashes999

92
Eu sei que algumas pessoas querem escrever Javascript puro. Entendi. Não tenho nenhum problema com as pessoas fazendo isso em seus projetos. Meu "No jQuery:" deve ser interpretado como "Eu sei que você perguntou como fazê-lo em Javascript, mas deixe-me mostrar como você faria isso com o jQuery, para que você possa ter sua curiosidade despertada ao ver que tipo de concisão de sintaxe e clareza que você pode desfrutar usando esta biblioteca, que também oferece muitas outras vantagens e ferramentas ".
Pistos

34
Observe também que o pôster original mais tarde dizia: "Obrigado por todas as respostas! Eu fui com o jQuery com base em algumas coisas que li no site deles".
Pistos

153

Muitos ótimos conselhos acima, mas não muito reutilizáveis, e muitas vezes repletos de bobagens do DOM e outros fluff que ocultam o código fácil.

Aqui está uma classe Javascript que criamos que é reutilizável e fácil de usar. Atualmente, ele possui apenas um método GET, mas isso funciona para nós. Adicionar um POST não deve sobrecarregar as habilidades de ninguém.

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

Usá-lo é tão fácil quanto:

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

Erro UnCaughtReference, HttpClient não está definido. Estou conseguindo essa primeira linha.
precisa saber é o seguinte

Como você o chama de html onClick?
Gobliins

Crie uma função em outro local que contenha o cliente var ... e apenas execute functionName (); retorna falso; no onClick
mail929 4/17/17

1
ReferenceError: XMLHttpRequest is not defined
Bugs Buggy

123

A nova window.fetchAPI é um substituto mais limpo, XMLHttpRequestque faz uso das promessas do ES6. Há uma boa explicação aqui , mas tudo se resume a (do artigo):

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

O suporte ao navegador agora é bom nas versões mais recentes (funciona no Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), navegador Android e Chrome para Android); no entanto, o IE provavelmente não obterá apoio oficial. O GitHub tem um polyfill disponível, recomendado para oferecer suporte a navegadores mais antigos ainda amplamente em uso (especialmente versões do Safari anteriores a março de 2017 e navegadores móveis do mesmo período).

Eu acho que isso é mais conveniente que jQuery ou XMLHttpRequest ou não, depende da natureza do projeto.

Aqui está um link para a especificação https://fetch.spec.whatwg.org/

Editar :

Usando o ES7 async / waitit, isso se torna simplesmente (com base neste Gist ):

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

9
Eu poderia salvar alguém algum tempo, ao mencionar que você pode fazer isso para incluir credenciais no pedido:fetch(url, { credentials:"include" })
Enselic

@ bugmenot123 window.fetchnão vem com um analisador de XML, mas você pode analisar a resposta por conta própria se a manipular como texto (não json, como no exemplo acima). Veja stackoverflow.com/a/37702056/66349 para um exemplo
Peter Gibson

94

Uma versão sem retorno de chamada

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

2
Excelente! Eu precisava de um script Greasemonkey para manter uma sessão ativa e esse trecho é perfeito. Apenas o envolvi em uma setIntervalligação.
Carcamano

9
como obtenho o resultado?
user4421975

@ user4421975 Você não obtém - para obter acesso à solicitação de resposta, é necessário usar o XMLHttpRequest acima mencionado.
Jakub Pastuszuk 04/04/19

74

Aqui está o código para fazê-lo diretamente com JavaScript. Mas, como mencionado anteriormente, você ficaria muito melhor com uma biblioteca JavaScript. O meu favorito é o jQuery.

No caso abaixo, uma página ASPX (que está servindo como um serviço REST de pobre) está sendo chamada para retornar um objeto 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;
        }                    
    }
}

33
Uma vez que esta resposta é um dos melhores resultados para googling "http pedido javascript", vale a pena mencionar que a execução de eval sobre os dados de resposta como essa é considerada má prática
Kloar

9
@ Kloar bom ponto, mas seria ainda melhor dar a razão pela qual é ruim, o que eu acho que é segurança. Explicar por que as práticas são ruins é a melhor maneira de fazer as pessoas mudarem de hábitos.
Balmipour

43

Uma versão moderna de copiar e colar (usando a função buscar e seta ) :

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

Uma versão clássica de copiar e colar:

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

36

Curto e limpo:

const http = new XMLHttpRequest()

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

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


19

O IE armazenará em cache os URLs para acelerar o carregamento, mas se você estiver, digamos, pesquisando um servidor em intervalos, tentando obter novas informações, o IE armazenará em cache esse URL e provavelmente retornará o mesmo conjunto de dados que você sempre teve.

Independentemente de como você acaba fazendo sua solicitação GET - JavaScript baunilha, Prototype, jQuery, etc. - certifique-se de colocar um mecanismo no local para combater o cache. Para combater isso, anexe um token exclusivo ao final do URL que você acessará. Isso pode ser feito por:

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

Isso anexará um carimbo de data / hora exclusivo ao final da URL e evitará que qualquer cache ocorra.


12

Protótipo simplifica

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

2
O problema é que o Mac OS X não vem com o Prototype pré-instalado. Como o widget precisa ser executado em qualquer computador, incluir Prototype (ou jQuery) em cada widget não é a melhor solução.
kiamlaluno

@kiamlaluno usar Prototype CDN a partir cloudflare
Vladimir Stazhilov

10

Uma solução que suporta navegadores antigos:

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

Talvez um pouco exagerado, mas você definitivamente fica seguro com esse 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();

2
As pessoas poderiam fazer alguns comentários sobre o que eu fiz de errado? Não é muito útil dessa maneira!
flyingP0tat0

A melhor resposta na minha opinião, se alguém estiver codificando no ES5 usando javascript simples.
CoderX

8

Não estou familiarizado com os Widgets de Dashcode do Mac OS, mas se eles permitirem que você use bibliotecas JavaScript e suporte XMLHttpRequests , eu usaria o jQuery e faria algo assim:

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

5

No arquivo Info.plist do seu widget, não se esqueça de definir sua AllowNetworkAccesschave como verdadeira.


5

A melhor maneira é usar o AJAX (você pode encontrar um tutorial simples nesta página Tizag ). O motivo é que qualquer outra técnica que você pode usar exige mais código, não é garantido que funcione em vários navegadores sem retrabalho e exige que você use mais memória do cliente abrindo páginas ocultas dentro dos quadros, passando URLs analisando seus dados e fechando-os. AJAX é o caminho a seguir nesta situação. Que meus dois anos de desenvolvimento pesado javascript falando.


5

Para quem usa 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.
  });

5

Você pode obter uma solicitação HTTP GET de duas maneiras:

  1. Essa abordagem é baseada no formato xml. Você precisa passar o URL para a solicitação.

    xmlhttp.open("GET","URL",true);
    xmlhttp.send();
  2. Este é baseado em jQuery. Você deve especificar o URL e nome da função que deseja chamar.

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

5

Para fazer isso, a API de busca é a abordagem recomendada, usando o JavaScript Promises. XMLHttpRequest (XHR), objeto IFrame ou tags dinâmicas são abordagens mais antigas (e mais complicadas).

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

Aqui está uma excelente demonstração de busca e documentos MDN



4

Solicitação assíncrona simples:

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


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

1

Se você deseja usar o código para um widget do Dashboard e não deseja incluir uma biblioteca JavaScript em todos os widgets criados, poderá usar o objeto XMLHttpRequest que o Safari suporta nativamente.

Conforme relatado por Andrew Hedges, um widget não tem acesso a uma rede, por padrão; você precisa alterar essa configuração no info.plist associado ao widget.


1

Para atualizar a melhor resposta de joann com promessa, este é o meu 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();
    });
}

1

Moderno, limpo e mais curto

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


0

Você também pode fazer isso com 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();
}

Consulte: para obter mais detalhes: tutorial html5rocks


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>

-1

Aqui está uma alternativa aos arquivos xml para carregar seus arquivos como um objeto e acessar propriedades como um objeto de uma maneira muito rápida.

  • Atenção, para que o javascript possa utilizá-lo e para interpretar o conteúdo corretamente, é necessário salvar seus arquivos no mesmo formato da sua página HTML. Se você usa UTF 8, salve seus arquivos em UTF8, etc.

XML funciona como uma árvore ok? em vez de escrever

     <property> value <property> 

escreva um arquivo simples como este:

      Property1: value
      Property2: value
      etc.

Salve seu arquivo .. Agora chame a função ....

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

agora você pode obter seus valores com eficiência.

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

window.onload = function(){

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

É apenas um pequeno presente para contribuir com o grupo. Obrigado do seu gosto :)

Se você deseja testar a função localmente no seu PC, reinicie o navegador com o seguinte comando (suportado por todos os navegadores, exceto o safari):

yournavigator.exe '' --allow-file-access-from-files
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.