Skip to content

Instantly share code, notes, and snippets.

@sistematico sistematico/callback.php
Last active Nov 6, 2019

Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
XMLHttpRequest Examples
Raw
callback.php
<?php
$array = array(
array('texto'=>'Olá ' . $_POST['nome'] . '!'),
array('texto'=>'Bem-vindo(a) ' . $_POST['nome']),
array('texto'=>'Tudo bem ' . $_POST['nome'])
);
echo json_encode($array);
Raw
get.php
<?php
echo "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum repellendus doloremque consectetur sed esse autem quos dignissimos recusandae velit eum qui voluptatibus vitae obcaecati id repellat aspernatur, eaque ipsa aliquid?";
Raw
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>XMLHttpRequest</title>
</head>
<body>
Código em: <a href="https://gist.github.com/sistematico/c1bdf247c69edd60206b48fa9bc4cf11">https://gist.github.com/sistematico/c1bdf247c69edd60206b48fa9bc4cf11</a>
<br /><br />
<button id="getBtn">XHR Get</button> <div id="resultadoGet"></div><br /><br />
<button id="postBtn">XHR Post</button> <div id="resultadoPost"></div><br /><br />
<button id="jsonBtn">XHR Json</button> <div id="resultadoJson"></div><br /><br />
<button id="callbackBtn">XHR Callback</button> <div id="resultadoCallback"></div><br /><br />
<script src="xhr.js"></script>
<script src="xhrpost.js"></script>
<script src="xhrjson.js"></script>
<script src="xhrcallback.js"></script>
</body>
</html>
Raw
json.php
<?php
$array = array(
array('texto'=>'Algum texto'),
array('texto'=>'Algum outro texto'),
array('texto'=>'E mais algum texto')
);
echo json_encode($array);
Raw
post.php
<?php
echo $_POST['lorem'];
Raw
xhr.js
const getBtn = document.getElementById("getBtn");
const resultadoGet = document.getElementById("resultadoGet");
let xhr = (url,div) => {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
div.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
};
getBtn.onclick = function(){
xhr('get.php', resultadoGet);
};
Raw
xhrcallback.js
const callbackBtn = document.getElementById("callbackBtn");
const resultadoCallback = document.getElementById("resultadoCallback");
let xhrCallback = (url, method, cb, params = null) => {
xmlhttp = new XMLHttpRequest();
xmlhttp.open(method, url, true);
if (method === 'post') {
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
cb(xmlhttp.responseText);
}
}
xmlhttp.send(params);
};
let callback = (resposta) => {
let saida = '';
data = JSON.parse(resposta);
data.forEach((el, i) => {
saida += data[i].texto + '<br />';
});
resultadoCallback.innerHTML = saida;
};
callbackBtn.onclick = function(){
xhrCallback('callback.php', 'post', callback, 'nome=Joao&sobrenome=Silva');
};
Raw
xhrjson.js
const jsonBtn = document.getElementById("jsonBtn");
const resultadoJson = document.getElementById("resultadoJson");
let xhrJson = (url, div) => {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
let objetos = JSON.parse(xmlhttp.responseText);
let saida = '';
let i;
for(i = 0; i < objetos.length; i++) {
//saida += '<a href="' + objetos[i].id + '">' + objetos[i].artista + '</a><br>';
saida += objetos[i].texto + '</a><br>';
}
div.innerHTML = saida;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
};
jsonBtn.onclick = function(){
xhrJson('json.php', resultadoJson);
};
Raw
xhrpost.js
const postBtn = document.getElementById("postBtn");
const resultadoPost = document.getElementById("resultadoPost");
let xhrPost = (url,params,div) => {
xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', url, true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
div.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(params);
};
postBtn.onclick = function(){
xhrPost('post.php', 'lorem=ipsum&ipsum=lorem', resultadoPost);
};
@wilcorrea

This comment has been minimized.

Sign in to view
Copy link

wilcorrea commented Nov 5, 2019 

function ajax (method, url, callback, error = () => undefined) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState !== 4) {
            return
        }
        const response = xmlhttp.responseText
        if (xmlhttp.status < 200 && xmlhttp.status > 299) {
            error(response, xmlhttp)
           return
        }
        callback(response, xmlhttp)
    }
    xmlhttp.open(method, url, true);
    xmlhttp.send();
@sistematico

This comment has been minimized.

Sign in to view
Copy link
Owner Author

sistematico commented Nov 5, 2019

VSCode Snippets: https://github.com/sistematico/dotfiles/blob/master/vscode/.config/Code/User/snippets/javascript.json
Demo: https://xhr.lucasbrum.net
@sistematico

This comment has been minimized.

Sign in to view
Copy link
Owner Author

sistematico commented Nov 5, 2019 

function ajax (method, url, callback, error = () => undefined) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState !== 4) {
            return
        }
        const response = xmlhttp.responseText
        if (xmlhttp.status < 200 && xmlhttp.status > 299) {
            error(response, xmlhttp)
           return
        }
        callback(response, xmlhttp)
    }
    xmlhttp.open(method, url, true);
    xmlhttp.send();

Aí é outro nível né!? :D
@wilcorrea

This comment has been minimized.

Sign in to view
Copy link

wilcorrea commented Nov 5, 2019 •
edited 

function post (url, params, callback = undefined, error = undefined) {
  ajax('POST', url, params, callback)
}

function ajax (method, url, params = undefined, callback, error = () => undefined) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState !== 4) {
            return
        }
        const response = xmlhttp.responseText
        if (xmlhttp.status < 200 && xmlhttp.status > 299) {
            error(response, xmlhttp)
           return
        }
        callback(response, xmlhttp)
    }
    xmlhttp.open(method, url, true);
    xmlhttp.send();

--

const postBtn = document.getElementById("postBtn");
const resultadoPost = document.getElementById("resultadoPost");

postBtn.onclick = function(){
    post('post.php', 'lorem=ipsum&ipsum=lorem', (response) => {
       div.innerHTML = xmlhttp.responseText;
    })
};
@IgorDePaula

This comment has been minimized.

Sign in to view
Copy link

IgorDePaula commented Nov 5, 2019

Pra quem reclamou de var ontem, nao ta faltando const ae nao? kkkkkkkkkk
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.