Javascript – Requisições Ajax com Javascript sem uso de APIs

Javascript – Requisições Ajax com Javascript sem uso de APIs

1 de agosto de 2018 0 Por Ramos de Souza Janones

Esta dica tem como objetivo mostrar como realizar Requisições Ajax com Javascript sem uso de APIs.

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.

// Exemplo de requisição GET
var ajax = new XMLHttpRequest();
// Seta tipo de requisição e URL com os parâmetros
ajax.open(“GET”, “minha-url-api.com/?name=Henry&lastname=Ford”, true);
// Envia a requisição
ajax.send();
// Cria um evento para receber o retorno.
ajax.onreadystatechange = function() {
// Caso o state seja 4 e o http.status for 200, é porque a requisiçõe deu certo.
if (ajax.readyState == 4 && ajax.status == 200) {
var data = ajax.responseText;
// Retorno do Ajax
console.log(data);
}
}
// Exemplo de requisição POST
var ajax = new XMLHttpRequest();
// Seta tipo de requisição: Post e a URL da API
ajax.open(“POST”, “minha-url-api”, true);
ajax.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
// Seta paramêtros da requisição e envia a requisição
ajax.send([email protected]);
// Cria um evento para receber o retorno.
ajax.onreadystatechange = function() {
// Caso o state seja 4 e o http.status for 200, é porque a requisiçõe deu certo.
if (ajax.readyState == 4 && ajax.status == 200) {
var data = ajax.responseText;
// Retorno do Ajax
console.log(data);
}
}

» Programação » Javascript

votes
Article Rating
LEIA TAMBÉM:  As principais linguagens de programação utilizadas no Blockchain

E-Zine Ramos da Informática

* indicates required

View previous campaigns.