68

Geralmente, quando precisamos recorrer à requisições AJAX usando JavaScript, temos à mão APIs que nos auxiliam com isso (ex: jQuery).

Porém, qual seria a maneira mais segura e cross-browser de realizar essas requisições (POST e GET) usando JavaScript puro?

2
  • 4
    Obs: Movi a parte de suporte cross-domain para outra pergunta: pt.stackoverflow.com/questions/3183/…
    – everton
    30/01/2014 às 16:00
  • Eu usava isso antes de descobrir o jquery. Depois que veio essa maravilha, felizmente, não precisamos mais nos preocupar com essa questão do cross-browser, o código fica mais limpo. Quem evolui o jquery que vai se preocupar com isso. Recomendo que use ajax com jquery.
    – Junior
    9/09/2014 às 23:15

5 Respostas 5

54
+50

O site quirksmode.org possui um exemplo completo de requisição Ajax destinada a funcionar na maioria dos browsers (atuais e antigos), sem o uso de bibliotecas externas:

function sendRequest(url,callback,postData) {
    var req = createXMLHTTPObject();
    if (!req) return;
    var method = (postData) ? "POST" : "GET";
    req.open(method,url,true);
    req.setRequestHeader('User-Agent','XMLHTTP/1.0');
    if (postData)
        req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    req.onreadystatechange = function () {
        if (req.readyState != 4) return;
        if (req.status != 200 && req.status != 304) {
//          alert('HTTP error ' + req.status);
            return;
        }
        callback(req);
    }
    if (req.readyState == 4) return;
    req.send(postData);
}

var XMLHttpFactories = [
    function () {return new XMLHttpRequest()},
    function () {return new ActiveXObject("Msxml2.XMLHTTP")},
    function () {return new ActiveXObject("Msxml3.XMLHTTP")},
    function () {return new ActiveXObject("Microsoft.XMLHTTP")}
];

function createXMLHTTPObject() {
    var xmlhttp = false;
    for (var i=0;i<XMLHttpFactories.length;i++) {
        try {
            xmlhttp = XMLHttpFactories[i]();
        }
        catch (e) {
            continue;
        }
        break;
    }
    return xmlhttp;
}

A parte "padronizada" (i.e. suportada por navegadores recentes, que seguem os padrões estabelecidos) é a que envolve o XMLHttpRequest. As demais, estão aí para dar suporte a navegadores antigos.

Fonte: essa resposta no SOEN

4
  • +1 E quanto ao caso de requisições cross-domain? Essa abordagem suportaria de forma cross-browser?
    – everton
    30/01/2014 às 15:49
  • 6
    @EvertonAgner Eu acho que a questão cross-domain merece uma pergunta em si. É muito mais complicada. Você tem várias opções: CORS, JSONP, proxy 30/01/2014 às 15:51
  • 2
    @EvertonAgner Isso que o Juan Mendes falou. Em algumas dessas soluções (ex.: CORS) não é preciso mexer nada no código, ele funciona do mesmo jeito pro mesmo domínio e pra domínios externos; o que tem que mexer é na configuração do servidor (indicando que ele aceita Ajax para outros domínios). Outras (ex.: JSONP) precisam de código próprio pra isso. Ou seja, assunto para uma outra pergunta...
    – mgibsonbr
    30/01/2014 às 15:56
  • Feito! pt.stackoverflow.com/questions/3183/…
    – everton
    30/01/2014 às 15:59
17
+50

Com as novas APIs dos navegadores, ao invés de usar XMLHttpRequest, podemos usar a API fetch para realizar requisições HTTP assíncronas.

O uso de fetch é bem mais simples se comparado ao seu antecessor. Além disso, a API em questão usa Promises, o que é significativamente interessante, tendo em vista que podemos usar async/await se desejarmos.

Para demonstrar como funciona, vamos acessar a API do GitHub:

const baseurl = 'https://api.github.com/users'
const username = 'lffg'

fetch(`${baseurl}/${username}`)
  .then((response) => response.json())
  .then((data) => {
    console.log(`O usuário ${data.login} tem ${data.public_repos} repositórios públicos.`)
  })
  .catch((error) => console.error('Whoops! Erro:', error.message || error))

Também é possível notar na linha 5 do exemplo anterior que a API fetch nos fornece também modos de transformar a resposta (Response) da requisição em JSON (Response.json), texto (Response.text) e diversos outros os quais você pode consultar aqui.

Sobre os diversos tipos que se pode passar ao corpo da requisição HTTP, ler Quais os principais tipos aceitos pela API Fetch para o corpo da requisição HTTP?.

Compatibilidade entre browsers antigos

A API fetch já é relativamente bem suportada. Consulte a tabela de compatibilidade.

Se você pretende suportar alguma versão ou navegador que ainda não a suporta, pode utilizar um polyfill. Você pode encontrar diversos, como este.

1
  • Muito bom o update! De fato atualmente é a maneira mais recomendada
    – everton
    18/03/2019 às 15:22
15
try
{
    var loader = new XMLHttpRequest();
}
catch (err)
{
    // versões antigas do Internet Explorer não tem a classe XMLHttpRequest, precisa usar esse componente ActiveX
    var loader = new ActiveXObject('Microsoft.XMLHTTP');
}

loader.onreadystatechange = function ()
{
    // esse callback é chamado várias vezes para cada mudança de readyState
    // readyState 4 é chamado quando o request é concluído (mesmo que .done() do jQuery)
    // você também pode checar o this.status para ver código de retorno HTTP
    // 200 é sucesso
    // 404 é página não encontrada
    // 403 é acesso negado
    // 500 é erro interno do servidor etc
    if (this.readyState == 4)
    {
        alert(this.responseText);
    }
}
loader.open('POST', 'http://www.exemple.com/submit.php', true);
loader.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
loader.send('nome=Manoel&idade=50'); // use null para métodos que não forem POST
11

A requisição AJAX em Javascript puro é feita com o objeto XMLHttpRequest. A menos que você queira usar uma versão antiga do Internet Explorer, por exemplo, que usava um objeto ActiveX. Então, costuma-se começar com esse "quickfix":

var xmlhttp;
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
else if(window.ActiveXObject) xmlhttp = new ActiveXObject("MSXML2.XMLHTTP.3.0");
else throw "AJAX não suportado!";

Depois, você precisa escutar ao evento onreadystatechange do seu objeto XMLHttpRequest:

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) { // Download concluído e a resposta não contém erros
        return this.responseText; // this dentro dessa function é seu XMLHttpRequest
    }
    // Você pode colocar outras condições aqui, como responder com erro quando o status for 404 ou 500, por exemplo
}

E finalmente iniciar o request:

xmlhttp.open(metodo, url, true);
// metodo: "GET", "POST", "PUT", "DELETE"... enfim, um suportado pelo HTTP
// url: a URL do seu request
// o terceiro argumento é o 'A' do AJAX. True = request assíncrono; False = request síncrono.
loader.send(queryString); // quesyString é opcional
8

Segue o exemplo abaixo:

try{
    xmlhttp = new XMLHttpRequest();
}catch(ee){
    try{
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        try{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(E){
            xmlhttp = false;
        }
    }
}

function pegarCep( CEP ){
    if( CEP.length==0) return false;
    var divCep = document.getElementById('divCep');
    divCep.innerHTML = "Carregando...";
    xmlhttp.open("GET", "/cadastro-sms/br/cep.asp?CEP="+ CEP,true);
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4){
            var resposta = xmlhttp.responseText;
            divCep.innerHTML = resposta;
        }
    }
    xmlhttp.send(null);             
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .