jQuery - Ajax

AJAX é uma sigla que significa Asynchronous JavaScript and XML e esta tecnologia nos ajuda a carregar dados do servidor sem uma atualização da página do navegador.

Se você é novo no AJAX, recomendo que leia nosso Tutorial de Ajax antes de prosseguir.

JQuery é uma ótima ferramenta que fornece um rico conjunto de métodos AJAX para desenvolver aplicativos da web de próxima geração.

Carregando dados simples

É muito fácil carregar qualquer dado estático ou dinâmico usando JQuery AJAX. JQuery forneceload() método para fazer o trabalho -

Sintaxe

Aqui está a sintaxe simples para load() método -

[selector].load( URL, [data], [callback] );

Aqui está a descrição de todos os parâmetros -

  • URL- O URL do recurso do lado do servidor para o qual a solicitação é enviada. Pode ser um script CGI, ASP, JSP ou PHP que gera dados dinamicamente ou fora de um banco de dados.

  • data- Este parâmetro opcional representa um objeto cujas propriedades são serializadas em parâmetros codificados adequadamente para serem passados ​​para a solicitação. Se especificado, a solicitação é feita usando oPOSTmétodo. Se omitido, oGET método é usado.

  • callback- Uma função de retorno de chamada chamada depois que os dados de resposta foram carregados nos elementos do conjunto correspondente. O primeiro parâmetro passado para esta função é o texto de resposta recebido do servidor e o segundo parâmetro é o código de status.

Exemplo

Considere o seguinte arquivo HTML com uma pequena codificação JQuery -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Aqui load() inicia uma solicitação Ajax para a URL especificada /jquery/result.htmlArquivo. Depois de carregar este arquivo, todo o conteúdo seria populado dentro de <div> marcado com o estágio de ID . Supondo que nosso arquivo /jquery/result.html tenha apenas uma linha HTML -

<h1>THIS IS RESULT...</h1>

Quando você clica em um determinado botão, o arquivo result.html é carregado.

Obtendo dados JSON

Haveria uma situação em que o servidor retornaria a string JSON em relação à sua solicitação. Função de utilidade JQuerygetJSON() analisa a string JSON retornada e disponibiliza a string resultante para a função de retorno de chamada como o primeiro parâmetro para realizar outras ações.

Sintaxe

Aqui está a sintaxe simples para getJSON() método -

[selector].getJSON( URL, [data], [callback] );

Aqui está a descrição de todos os parâmetros -

  • URL - A URL do recurso do lado do servidor contatado por meio do método GET.

  • data - Um objeto cujas propriedades servem como pares nome / valor usados ​​para construir uma string de consulta a ser anexada ao URL, ou uma string de consulta pré-formatada e codificada.

  • callback- Uma função chamada quando a solicitação é concluída. O valor dos dados resultante da digestão do corpo da resposta como uma string JSON é passado como o primeiro parâmetro para esse retorno de chamada e o status como o segundo.

Exemplo

Considere o seguinte arquivo HTML com uma pequena codificação JQuery -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
				
               $.getJSON('/jquery/result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.json file −</p>
		
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Aqui, o método utilitário JQuery getJSON() inicia uma solicitação Ajax para a URL especificada result.jsonArquivo. Depois de carregar este arquivo, todo o conteúdo seria passado para a função de retorno de chamada que finalmente seria populado dentro de <div> marcado com o estágio de ID . Supondo que nosso arquivo result.json tenha o seguinte conteúdo formatado json -

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

Quando você clica em um determinado botão, o arquivo result.json é carregado.

Passando dados para o servidor

Muitas vezes, você coleta informações do usuário e as transmite ao servidor para processamento posterior. JQuery AJAX tornou fácil passar os dados coletados para o servidor usandodata parâmetro de qualquer método Ajax disponível.

Exemplo

Este exemplo demonstra como pode passar a entrada do usuário para um script de servidor web que enviaria o mesmo resultado de volta e nós o imprimiríamos -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               var name = $("#name").val();
               $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

Aqui está o código escrito em result.php script -

<?php
   if( $_REQUEST["name"] ){
      $name = $_REQUEST['name'];
      echo "Welcome ". $name;
   }
?>

Agora você pode inserir qualquer texto na caixa de entrada fornecida e clicar no botão "Mostrar resultado" para ver o que você inseriu na caixa de entrada.

Métodos JQuery AJAX

Você viu o conceito básico de AJAX usando JQuery. A tabela a seguir lista todos os métodos JQuery AJAX importantes que você pode usar com base em sua necessidade de programação -

Sr. Não. Métodos e Descrição
1 jQuery.ajax (opções)

Carregue uma página remota usando uma solicitação HTTP.
2 jQuery.ajaxSetup (opções)

Defina as configurações globais para solicitações AJAX.
3 jQuery.get (url, [dados], [retorno de chamada], [tipo])

Carregue uma página remota usando uma solicitação HTTP GET.
4 jQuery.getJSON (url, [dados], [retorno de chamada])

Carregue dados JSON usando uma solicitação HTTP GET.
5 jQuery.getScript (url, [callback])

Carrega e executa um arquivo JavaScript usando uma solicitação HTTP GET.
6 jQuery.post (url, [dados], [retorno de chamada], [tipo])

Carregue uma página remota usando uma solicitação HTTP POST.
7 carregar (url, [dados], [retorno de chamada])

Carregue o HTML de um arquivo remoto e injete-o no DOM.
8 serialize ()

Serializa um conjunto de elementos de entrada em uma string de dados.
9 serializeArray ()

Serializa todos os formulários e elementos de formulário como o método .serialize (), mas retorna uma estrutura de dados JSON para você trabalhar.

Eventos JQuery AJAX

Você pode chamar vários métodos JQuery durante o ciclo de vida do progresso da chamada AJAX. Com base em diferentes eventos / fases, os seguintes métodos estão disponíveis -

Você pode passar por todos os eventos AJAX .

Sr. Não. Métodos e Descrição
1 ajaxComplete (callback)

Anexe uma função a ser executada sempre que uma solicitação AJAX for concluída.
2 ajaxStart (callback)

Anexe uma função a ser executada sempre que uma solicitação AJAX começar e não houver nenhuma ativa.
3 ajaxError (callback)

Anexe uma função a ser executada sempre que uma solicitação AJAX falhar.
4 ajaxSend (callback)

Anexe uma função a ser executada antes que uma solicitação AJAX seja enviada.
5 ajaxStop (callback)

Anexe uma função a ser executada sempre que todas as solicitações AJAX forem encerradas.
6 ajaxSuccess (callback)

Anexe uma função a ser executada sempre que uma solicitação AJAX for concluída com êxito.