Operações com AJAX
Operações com AJAX
Operações com AJAX é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 1 de 1. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 1 aulas no total.
Introdução
Olá,
Nesta lição, aprenderemos a interagir com o servidor remoto usando os métodos AJAX do jQuery.
AJAX (Asynchronous Javascript And XML) é uma tecnologia que permite transferir dados com o servidor de forma assíncrona, sem atualizar a página da web.
A experiência do usuário é afetada positivamente, especialmente porque os dados podem ser transferidos sem atualizar a página.
Exemplo de AJAX
Principalmente, os aplicativos web mais populares do mundo, como Facebook, Gmail e Youtube, usam a tecnologia AJAX com frequência.
Na verdade, em vez de pensar em AJAX como uma nova tecnologia, você pode considerá-lo um método que fornece transferência assíncrona de dados entre o servidor e o cliente usando Javascript.
Bem, vamos dar um exemplo de uma função que usa AJAX.
Por exemplo, você assistiu a um vídeo em youtube.com e clicou no botão de curtir. Nesse caso, nosso evento de curtida é transmitido aos servidores do youtube em segundo plano antes que a página do youtube seja atualizada.
Esse é um processo que ocorre com uma requisição AJAX.
Exemplo de AJAX
Vamos fazer um exemplo de requisições AJAX.
Abaixo está um código de requisição GET feito com AJAX para https://api.coddykit.com/api/coddy-test
Isso é feito com Vanilla JavaScript e tem uma sintaxe um pouco complicada, como você pode ver.
<div id="result"></div>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4
&& this.status == 200) {
//we are writing the AJAX request response
//to div element that has result id
var result = document.getElementById('result');
result.innerHTML = JSON.stringify(this.responseText);
}
};
xhttp.open("GET", "https://api.coddykit.com/api/coddy-test", true);
xhttp.send();
</script>Aviso
Como dissemos antes, o jQuery é uma biblioteca de modificação do DOM e também fornece métodos que facilitam as operações AJAX.
Método AJAX
Temos um método bastante simples para gerenciar nossas requisições AJAX com jQuery.
Com o método ajax(), podemos usar facilmente métodos HTTP normalmente usados no mundo da web, como get, post ou put.
A sintaxe do método Ajax é a seguinte.
$.ajax ({
url: 'remote URL'.
data: 'Data that we will send',
method: 'HTTP Method - Default GET',
success: 'Here, we should define function that work when Ajax get success result',
dataType: 'Interaction data type'
});
Vamos fazer um exemplo
<div id="result"></div>
<script>
$.ajax ({
url: 'https://api.coddykit.com/api/coddy-test',
success: function(data){
$('#result').text(JSON.stringify(data));
}
});
</script>Exemplo de Ajax
Requisição Ajax get
Agora vamos aprimorar nosso exemplo.
No exemplo abaixo, uma requisição ajax foi enviada para a URL (https://api.coddykit.com/api/coddy-test)
Se nenhum método HTTP for definido, uma requisição GET será feita por padrão.
const https = require('https');
function ajax(url) {
const callbacks = { success: [], fail: [], always: [] };
const req = https.get(url, (res) => {
let data = '';
res.on('data', chunk => data += chunk);
res.on('end', () => {
callbacks.success.forEach(cb => cb(data));
callbacks.always.forEach(cb => cb());
});
});
req.on('error', (err) => {
callbacks.fail.forEach(cb => cb(err));
callbacks.always.forEach(cb => cb());
});
return {
done: function(cb) { callbacks.success.push(cb); return this; },
fail: function(cb) { callbacks.fail.push(cb); return this; },
always: function(cb) { callbacks.always.push(cb); return this; }
};
}
var ajaxReq = ajax("https://api.coddykit.com/api/coddy-test")
.done(function() {
//success callback
/*
If our get request is sent to
the server with success (HTTP 2xx),
this function is called.
*/
})
.fail(function() {
/* This function works
if the AJAX request fails.
*/
})
.always(function() {
/*
This function works in all cases when
the AJAX request is
successful or unsuccessful.
*/
});método get
Método $.get() e requisição Get
Podemos usar o método $.get() para enviar uma requisição HTTP get aos nossos servidores.
Esse método é fornecido pelo jQuery e permite enviar uma requisição GET escrevendo um código mais conciso e fácil, em vez de usar Vanilla Javascript.
Vamos fazer um exemplo e observar como o código ficou mais curto.
<div id="result"></div>
<script>
$.get("https://api.coddykit.com/api/coddy-test",
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Método post
Método $.post() e requisição Post
Podemos usar o método $.post() para enviar uma requisição HTTP Post aos nossos servidores.
Vamos fazer um exemplo e observar como o código fica mais curto.
Usaremos requisições post com frequência, especialmente ao enviar formulários web para o servidor.
<div id="result"></div>
<script>
$.post("https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Post Request
{name:'Coddy', age: 3},
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Método Put
Requisição Put
Podemos usar o método $.put() para enviar uma requisição HTTP Put aos nossos servidores.
Vamos fazer um exemplo.
<div id="result"></div>
<script>
$.ajax({
method:'PUT',
url:"https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Put Request
data: {name:'Coddy', age: 3},
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Método Delete
Requisição Delete
Podemos usar o método $.delete() para enviar uma requisição HTTP Delete aos nossos servidores.
Vamos fazer um exemplo
<div id="result"></div>
<script>
$.ajax({
method:'DELETE',
url:"https://api.coddykit.com/api/coddy-test",
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Link
Você pode encontrar exemplos e obter informações detalhadas sobre os métodos AJAX no link abaixo.
Parabéns
Parabéns 🎉
Nesta seção, aprendemos AJAX com jQuery
Obrigado por participar do curso de jQuery para iniciantes 🎉🎉🎉
Agora você pode fazer a prova e obter um certificado do curso Tutorial de jQuery para iniciantes 🚀🚀🚀
Perguntas Frequentes
A aula “Operações com AJAX” é grátis?
Sim — o texto completo de “Operações com AJAX” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 1 aulas no total.
O que vou aprender em “Operações com AJAX”?
Operações com AJAX Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar jQuery Academy?
Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 1.
Quanto tempo leva a aula “Operações com AJAX”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de jQuery Academy?
Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.