Solicitação HTTP GET em JavaScript?

Eu preciso fazer uma solicitação HTTP GET em JavaScript. Qual é a melhor maneira de fazer isso?

Preciso fazer isso em um widget de código de rastreio do Mac OS X.

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

No jQuery :

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

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

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

Uma versão sem retorno de chamada

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

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

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

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)

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.

Protótipo simplifica

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

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

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

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

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.

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

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

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

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

O mesmo pode ser feito para a solicitação de postagem.
dê uma olhada neste link Solicitação de postagem em JavaScript como um formulário

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

Ajax

É melhor usar uma biblioteca como Prototype ou 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()

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.

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

Moderno, limpo e mais curto

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

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

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

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