AJAX jQuery: Como funciona a transferência assíncrona de dados?
IONOS editorial team4 mins
Ao adotar métodos AJAX em jQuery, sites conseguem reagir dinamicamente a interações de usuários, assim como receber e enviar dados ao servidor mais rapidamente, atualizar conteúdos e outros elementos, sem que seja preciso recarregar a página inteira em exibição. Dessa forma, transferências assíncronas de dados, possibilitadas por métodos AJAX, melhoram a responsividade de aplicações web.
O que são métodos AJAX em jQuery?
Tanto a linguagem de scripts JavaScript quanto a biblioteca jQuery contêm métodos AJAX (Asynchronous JavaScript and XML) que possibilitam a troca assíncrona de dados entre um cliente e um servidor. Para isso, solicitações AJAX em jQuery (AJAX jQuery requests) utilizam, internamente, o objeto XMLHttpRequest do JavaScript. Solicitações HTTP assíncronas são enviadas por métodos AJAX a servidores web, que retornam a resposta em um determinado formato, como em XML ou em JSON. Assim, seções específicas de uma página podem ser atualizadas, sem que ela precise ser totalmente recarregada. Outra vantagem do AJAX é que ele é muito flexível, também podendo ser utilizado com o jQuery no WordPress, por exemplo.
Alugue o seu espaço web com a IONOS para lançar o seu projeto on-line, seja ele sua primeira aplicação jQuery, um blog ou um fórum. A IONOS oferece espaço de armazenamento por um preço acessível, e inclui domínio e endereços de e-mail próprios grátis.
Os principais métodos AJAX em jQuery
Para que entenda o funcionamento de métodos AJAX, é preciso que você já tenha algum conhecimento básico de jQuery. Por esse motivo, recomendamos que você acesse o nosso tutorial sobre jQuery antes de se aprofundar especificamente nos métodos AJAX. Listamos, abaixo, os principais deles:
- ajax(): Envia solicitações HTTP assíncronas ao servidor.
- get(): Envia uma solicitação HTTP GET para carregar dados do servidor.
- post(): Envia uma solicitação jQuery AJAX Post para transmitir dados específicos ao servidor.
- getJSON(): Transmite ao servidor uma solicitação jQuery AJAX GET e espera uma resposta em formato JSON.
- getScript(): Envia uma solicitação HTTP GET para receber e executar um arquivo JavaScript de um servidor.
- load(): Envia uma solicitação HTTP para carregar HTML ou texto do servidor e vinculá-lo a elementos no DOM.
Com a API da IONOS, você administra seus produtos de hospedagem da IONOS com praticidade e segurança. Basta solicitar uma chave de acesso para usar a API. Na página de documentação da API, você encontra informações mais detalhadas sobre a ferramenta.
Exemplos de uso de métodos AJAX em jQuery
Métodos AJAX em jQuery podem ser combinados com as funções jQuery mais comuns, como com a jQuery.click(), a jQuery.append() e a jQuery.each().
No exemplo que elaboramos, recuperamos o texto “AJAX jQuery: exemplo de texto” do URL /jquery/getdata, que é fornecido como primeiro argumento do método AJAX ajax(). Para ocupar o segundo parâmetro, escolhemos uma função callback que processa a resposta do servidor e insere os dados dentro da tag p no DOM. Por padrão, o método ajax() envia uma solicitação GET ao respectivo servidor. O envio dessa AJAX jQuery request é acionado pelo evento de clique de botão btn. Por fim, o texto é exibido pelo navegador.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function(){
$.ajax('/jquery/getdata', // request url
{
success: function (data, status, xhr) { // success callback function
$('p').append(data);
}
});
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="Enviar AJAX jQuery request" />
<p></p>
</body>
</html>Aqui está o resultado exibido:
AJAX jQuery: exemplo de textoCom o Deploy Now da IONOS, você pode implementar sites estáticos e aplicações de página única diretamente pelo GitHub. Para fazer isso, você só precisa conectar o seu repositório ao Deploy Now e transmitir as alterações com um comando push. O Deploy Now reconhece automaticamente diferentes frameworks, configurando a sua compilação da forma mais adequada. Para otimizar o seu fluxo de trabalho, use o Deploy Now!