Skip to content

Instantly share code, notes, and snippets.

@cagartner
Created January 12, 2016 17:25
Show Gist options
  • Star 14 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save cagartner/4c4dd7a6d5fa53e1f368 to your computer and use it in GitHub Desktop.
Save cagartner/4c4dd7a6d5fa53e1f368 to your computer and use it in GitHub Desktop.
Fazendo requisições em Ajax utilizando Javascript puro
// 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=teste@teste.com");
// 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);
}
}
@vinic2000
Copy link

Ola, tudo bem, estou tendo problemas enviar um objeto via ajax, variável enviada deve ser atribuída ao método send como string ??
se poder me ajuda, vai ser 10, aguardo resposta.

@cagartner
Copy link
Author

Opa, e ai, isso mesmo eles tem que ir em forma de string: "nome=Carlos&sobrenome=Gartner"

Caso você tenha um objeto você pode usar a seguinte API URLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

const params = new URLSearchParams({
  var1: "value",
  var2: "value2",
  arr: "foo",
});
console.log(params.toString());

@lukkas-lukkas
Copy link

Boa tarde amigo, no exemplo da requisição enviando parâmetros via post, o que são os parâmetros que então sendo enviados em ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"), vlw

@tiagofrancafernandes
Copy link

tiagofrancafernandes commented Aug 17, 2021

TOP DEMAIS, mas e se usasse a o fetch direto?

fetch('https://jsonplaceholder.typicode.com/todos/3')
  .then(response => response.json())
  .then(json => console.log(json))

@cagartner
Copy link
Author

@tiagofrancafernandes
Hoje em dia vc deve usar fetch hahaha, quando criei esse gist, fetch ainda não existia, esse gist tem 6 anos.
Na época todo mundo usava jquery para tudo e eu criei esse exemplo para mostrar que vc podia fazer uma requisição ajax sem precisar de jquery :D

@tiagofrancafernandes
Copy link

@tiagofrancafernandes
Hoje em dia vc deve usar fetch hahaha, quando criei esse gist, fetch ainda não existia, esse gist tem 6 anos.
Na época todo mundo usava jquery para tudo e eu criei esse exemplo para mostrar que vc podia fazer uma requisição ajax sem precisar de jquery :D

Verdade. Vi isso em seguida.

Parabéns pelos repos.
Vi seu perfil depois de ver um pacote que fez para MP em um projeto bagio-store.

@GabrielAlvesGG
Copy link

olá @cagartner beleza cara? estou começando agora com as requisições ajax, talvez o que eu for pergunta nem tenha tanto haver com seu código, mas quando você chama uma data da requisição ajax ela vem com o tipo ISO-8609 se não me engano como consigo fazer a conversão desse dado que vem do servidor para apresentar no meu front-end com dd/mm/yyyy.

@cagartner
Copy link
Author

olá @cagartner beleza cara? estou começando agora com as requisições ajax, talvez o que eu for pergunta nem tenha tanto haver com seu código, mas quando você chama uma data da requisição ajax ela vem com o tipo ISO-8609 se não me engano como consigo fazer a conversão desse dado que vem do servidor para apresentar no meu front-end com dd/mm/yyyy.

Olá @GabrielAlvesGG se vc puder me dar um exemplo do resultado do servidor eu posso te apontar uma solução

Abraços!

@tiagofrancafernandes
Copy link

tiagofrancafernandes commented Aug 29, 2022

olá @cagartner beleza cara? estou começando agora com as requisições ajax, talvez o que eu for pergunta nem tenha tanto haver com seu código, mas quando você chama uma data da requisição ajax ela vem com o tipo ISO-8609 se não me engano como consigo fazer a conversão desse dado que vem do servidor para apresentar no meu front-end com dd/mm/yyyy.

Olá @GabrielAlvesGG se vc puder me dar um exemplo do resultado do servidor eu posso te apontar uma solução

Abraços!

Acho que posso ajudar.
Creio que o @GabrielAlvesGG quis dizer que quando recebe a data em format X ele gostaria de formatar para saída Y.
Vou dar um exempĺo:

let date = new Date('2021-02-03T21:42:51-08:00') //Qualquer string de data que seja válido
let brDateOnly = date.toLocaleDateString('pt-BR') //"04/02/2021"
let brDateWithTime = date.toLocaleString('pt-BR') //"04/02/2021 02:42:51" 

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment