Ao adotar métodos AJAX em jQuery, sites conseguem reagir di­na­mi­ca­mente a in­te­ra­ções de usuários, assim como receber e enviar dados ao servidor mais ra­pi­da­mente, atualizar conteúdos e outros elementos, sem que seja preciso re­car­re­gar a página inteira em exibição. Dessa forma, trans­fe­rên­cias as­sín­cro­nas de dados, pos­si­bi­li­ta­das por métodos AJAX, melhoram a res­pon­si­vi­dade de apli­ca­ções web.

O que são métodos AJAX em jQuery?

Tanto a linguagem de scripts Ja­vaS­cript quanto a bi­bli­o­teca jQuery contêm métodos AJAX (Asyn­ch­ro­nous Ja­vaS­cript and XML) que pos­si­bi­li­tam a troca as­sín­crona de dados entre um cliente e um servidor. Para isso, so­li­ci­ta­ções AJAX em jQuery (AJAX jQuery requests) utilizam, in­ter­na­mente, o objeto XM­LHtt­pRe­quest do Ja­vaS­cript. So­li­ci­ta­ções HTTP as­sín­cro­nas são enviadas por métodos AJAX a ser­vi­do­res web, que retornam a resposta em um de­ter­mi­nado formato, como em XML ou em JSON. Assim, seções es­pe­cí­fi­cas de uma página podem ser atu­a­li­za­das, sem que ela precise ser to­tal­mente re­car­re­gada. Outra vantagem do AJAX é que ele é muito flexível, também podendo ser utilizado com o jQuery no WordPress, por exemplo.

Dica

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 ar­ma­ze­na­mento por um preço acessível, e inclui domínio e endereços de e-mail próprios grátis.

Os prin­ci­pais métodos AJAX em jQuery

Para que entenda o fun­ci­o­na­mento de métodos AJAX, é preciso que você já tenha algum co­nhe­ci­mento básico de jQuery. Por esse motivo, re­co­men­da­mos que você acesse o nosso tutorial sobre jQuery antes de se apro­fun­dar es­pe­ci­fi­ca­mente nos métodos AJAX. Listamos, abaixo, os prin­ci­pais deles:

  • ajax(): Envia so­li­ci­ta­ções HTTP as­sín­cro­nas ao servidor.
  • get(): Envia uma so­li­ci­ta­ção HTTP GET para carregar dados do servidor.
  • post(): Envia uma so­li­ci­ta­ção jQuery AJAX Post para trans­mi­tir dados es­pe­cí­fi­cos ao servidor.
  • getJSON(): Transmite ao servidor uma so­li­ci­ta­ção jQuery AJAX GET e espera uma resposta em formato JSON.
  • getScript(): Envia uma so­li­ci­ta­ção HTTP GET para receber e executar um arquivo Ja­vaS­cript de um servidor.
  • load(): Envia uma so­li­ci­ta­ção HTTP para carregar HTML ou texto do servidor e vinculá-lo a elementos no DOM.
Dica

Com a API da IONOS, você ad­mi­nis­tra seus produtos de hos­pe­da­gem da IONOS com pra­ti­ci­dade e segurança. Basta solicitar uma chave de acesso para usar a API. Na página de do­cu­men­ta­ção da API, você encontra in­for­ma­ções mais de­ta­lha­das sobre a fer­ra­menta.

Exemplos de uso de métodos AJAX em jQuery

Métodos AJAX em jQuery podem ser com­bi­na­dos com as funções jQuery mais comuns, como com a jQuery.click(), a jQuery.append() e a jQuery.each().

No exemplo que ela­bo­ra­mos, re­cu­pe­ra­mos 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, es­co­lhe­mos 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 so­li­ci­ta­ção GET ao res­pec­tivo 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>
html

Aqui está o resultado exibido:

AJAX jQuery: exemplo de texto
text
Dica

Com o Deploy Now da IONOS, você pode im­ple­men­tar sites estáticos e apli­ca­ções de página única di­re­ta­mente pelo GitHub. Para fazer isso, você só precisa conectar o seu re­po­si­tó­rio ao Deploy Now e trans­mi­tir as al­te­ra­ções com um comando push. O Deploy Now reconhece au­to­ma­ti­ca­mente di­fe­ren­tes fra­meworks, con­fi­gu­rando a sua com­pi­la­ção da forma mais adequada. Para otimizar o seu fluxo de trabalho, use o Deploy Now!

Ir para o menu principal