AJAX - Guia rápido

AJAX significa Asíncrono JavaScript e XML. AJAX é uma nova técnica para criar aplicativos da web melhores, mais rápidos e mais interativos com a ajuda de XML, HTML, CSS e Java Script.

  • Ajax usa XHTML para conteúdo, CSS para apresentação, junto com Document Object Model e JavaScript para exibição de conteúdo dinâmico.

  • Os aplicativos convencionais da web transmitem informações de e para o servidor usando solicitações síncronas. Significa que você preenche um formulário, clica em enviar e é direcionado para uma nova página com novas informações do servidor.

  • Com AJAX, quando você clica em enviar, o JavaScript faz uma solicitação ao servidor, interpreta os resultados e atualiza a tela atual. No sentido mais puro, o usuário nunca saberia que algo foi transmitido para o servidor.

  • XML é comumente usado como o formato para receber dados do servidor, embora qualquer formato, incluindo texto simples, possa ser usado.

  • AJAX é uma tecnologia de navegador independente do software de servidor da web.

  • Um usuário pode continuar a usar o aplicativo enquanto o programa cliente solicita informações do servidor em segundo plano.

  • Interação intuitiva e natural do usuário. Não é necessário clicar, o movimento do mouse é um gatilho de evento suficiente.

  • Orientado por dados em oposição a orientado por página.

Rich Internet Application Technology

AJAX é a tecnologia Rich Internet Application (RIA) mais viável até agora. Ele está ganhando um grande impulso no setor e vários kits de ferramentas e estruturas estão surgindo. Mas, ao mesmo tempo, AJAX tem incompatibilidade de navegador e é suportado por JavaScript, o que é difícil de manter e depurar.

AJAX é baseado em padrões abertos

AJAX é baseado nos seguintes padrões abertos -

  • Apresentação baseada em navegador usando HTML e Cascading Style Sheets (CSS).
  • Os dados são armazenados no formato XML e buscados no servidor.
  • Buscas de dados nos bastidores usando objetos XMLHttpRequest no navegador.
  • JavaScript para fazer tudo acontecer.

AJAX não pode funcionar de forma independente. É usado em combinação com outras tecnologias para criar páginas da web interativas.

JavaScript

  • Linguagem de script vagamente digitada.
  • A função JavaScript é chamada quando ocorre um evento em uma página.
  • Cola para toda a operação AJAX.

DOM

  • API para acessar e manipular documentos estruturados.
  • Representa a estrutura de documentos XML e HTML.

CSS

  • Permite uma separação clara do estilo de apresentação do conteúdo e pode ser alterado programaticamente por JavaScript

XMLHttpRequest

  • Objeto JavaScript que executa interação assíncrona com o servidor.

Aqui está uma lista de alguns aplicativos da web famosos que usam AJAX.

Google Maps

Um usuário pode arrastar um mapa inteiro usando o mouse, em vez de clicar em um botão.

Google Suggest

Conforme você digita, o Google oferece sugestões. Use as setas do teclado para navegar pelos resultados.

Gmail

O Gmail é um webmail baseado na ideia de que os e-mails podem ser mais intuitivos, eficientes e úteis.

Yahoo Maps (novo)

Agora é ainda mais fácil e divertido chegar aonde você está indo!

Diferença entre AJAX e o programa CGI convencional

Experimente estes dois exemplos um por um e você sentirá a diferença. Ao tentar o exemplo AJAX, não há descontinuidade e você obtém a resposta muito rapidamente, mas ao tentar o exemplo GCI padrão, você teria que esperar pela resposta e sua página também seria atualizada.

Exemplo AJAX

Exemplo Padrão

NOTE- Demos um exemplo mais complexo no banco de dados AJAX .

Todos os navegadores disponíveis não suportam AJAX. Aqui está uma lista dos principais navegadores que suportam AJAX.

  • Mozilla Firefox 1.0 e superior.
  • Netscape versão 7.1 e superior.
  • Apple Safari 1.2 e superior.
  • Microsoft Internet Explorer 5 e superior.
  • Konqueror.
  • Opera 7.6 e superior.

Ao escrever seu próximo aplicativo, considere os navegadores que não suportam AJAX.

NOTE - Quando dizemos que um navegador não oferece suporte a AJAX, significa simplesmente que o navegador não oferece suporte à criação de objeto Javascript - objeto XMLHttpRequest.

Escrevendo código específico do navegador

A maneira mais simples de tornar seu código-fonte compatível com um navegador é usar blocos try ... catch em seu JavaScript.

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!

            try {
               // Opera 8.0+, Firefox, Safari 
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {

               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {

                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
         }
         //-->
      </script>
      
      <form name = 'myForm'>
         Name: <input type = 'text' name = 'username' /> <br />
         Time: <input type = 'text' name = 'time' />
      </form>
      
   </body>
</html>

No código JavaScript acima, tentamos três vezes fazer nosso objeto XMLHttpRequest. Nossa primeira tentativa -

  • ajaxRequest = new XMLHttpRequest ();

É para os navegadores Opera 8.0+, Firefox e Safari. Se falhar, tentamos mais duas vezes criar o objeto correto para um navegador Internet Explorer com -

  • ajaxRequest = novo ActiveXObject ("Msxml2.XMLHTTP");
  • ajaxRequest = new ActiveXObject ("Microsoft.XMLHTTP");

Se não funcionar, podemos usar um navegador muito desatualizado que não seja compatível com XMLHttpRequest, o que também significa que não é compatível com AJAX.

Muito provavelmente, porém, nossa variável ajaxRequest agora será definida para qualquer padrão XMLHttpRequest que o navegador usa e podemos começar a enviar dados para o servidor. O fluxo de trabalho AJAX passo a passo é explicado no próximo capítulo.

Este capítulo fornece uma imagem clara das etapas exatas da operação AJAX.

Etapas da operação AJAX

  • Ocorre um evento de cliente.
  • Um objeto XMLHttpRequest é criado.
  • O objeto XMLHttpRequest está configurado.
  • O objeto XMLHttpRequest faz uma solicitação assíncrona ao servidor da Web.
  • O servidor da Web retorna o resultado contendo o documento XML.
  • O objeto XMLHttpRequest chama a função callback () e processa o resultado.
  • O HTML DOM é atualizado.

Vamos seguir esses passos um por um.

Um evento de cliente ocorre

  • Uma função JavaScript é chamada como resultado de um evento.

  • Exemplo - validateUserId () A função JavaScript é mapeada como um manipulador de eventos para um evento onkeyup no campo de formulário de entrada cujo id é definido como "userid"

  • <input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId ();">.

O objeto XMLHttpRequest é criado

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer Browsers
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
}

O objeto XMLHttpRequest está configurado

Nesta etapa, escreveremos uma função que será disparada pelo evento do cliente e uma função de callback processRequest () será registrada.

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

Fazendo uma solicitação assíncrona para o servidor da Web

O código-fonte está disponível no trecho de código acima. O código escrito em negrito é responsável por fazer uma solicitação ao servidor da web. Tudo isso está sendo feito usando o objeto XMLHttpRequest ajaxRequest .

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid"); var url = "validate?id = " + escape(target.value); ajaxRequest.open("GET", url, true); ajaxRequest.send(null);
}

Suponha que você insira Zara na caixa de ID do usuário e, na solicitação acima, a URL seja definida como "validate? Id = Zara".

O servidor da Web retorna o resultado contendo o documento XML

Você pode implementar seu script do lado do servidor em qualquer linguagem, porém sua lógica deve ser a seguinte.

  • Obtenha uma solicitação do cliente.
  • Analise a entrada do cliente.
  • Faça o processamento necessário.
  • Envie a saída para o cliente.

Se presumirmos que você vai escrever um servlet, aqui está o trecho do código.

public void doGet(HttpServletRequest request,
   HttpServletResponse response) throws IOException, ServletException {
   String targetId = request.getParameter("id");
   
   if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

Função de retorno de chamada processRequest () é chamada

O objeto XMLHttpRequest foi configurado para chamar a função processRequest () quando houver uma mudança de estado para o readyState do objeto XMLHttpRequest . Agora esta função receberá o resultado do servidor e fará o processamento necessário. Como no exemplo a seguir, ele define uma mensagem variável como verdadeira ou falsa com base no valor retornado do servidor da Web.

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

O HTML DOM é atualizado

Esta é a etapa final e nesta etapa, sua página HTML será atualizada. Acontece da seguinte maneira -

  • JavaScript obtém uma referência a qualquer elemento em uma página usando a API DOM.
  • A maneira recomendada de obter uma referência a um elemento é chamar.
document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document

  • JavaScript agora pode ser usado para modificar os atributos do elemento; modificar as propriedades de estilo do elemento; ou adicione, remova ou modifique os elementos filhos. Aqui está um exemplo -

<script type = "text/javascript">
   <!--
   function setMessageUsingDOM(message) {
      var userMessageElement = document.getElementById("userIdMessage");
      var messageText;
      
      if (message == "false") {
         userMessageElement.style.color = "red";
         messageText = "Invalid User Id";
      } else {
         userMessageElement.style.color = "green";
         messageText = "Valid User Id";
      }
      
      var messageBody = document.createTextNode(messageText);
      
      // if the messageBody element has been created simple 
      // replace it otherwise append the new element
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->
</script>

<body>
   <div id = "userIdMessage"><div>
</body>

Se você entendeu as sete etapas mencionadas acima, então está quase terminando com AJAX. No próximo capítulo, veremos o objeto XMLHttpRequest com mais detalhes.

O objeto XMLHttpRequest é a chave para AJAX. Ele está disponível desde o lançamento do Internet Explorer 5.5 em julho de 2000, mas não foi totalmente descoberto até que o AJAX e a Web 2.0 em 2005 se tornassem populares.

XMLHttpRequest (XHR) é uma API que pode ser usada por JavaScript, JScript, VBScript e outras linguagens de script de navegador da web para transferir e manipular dados XML de e para um servidor da web usando HTTP, estabelecendo um canal de conexão independente entre o cliente de uma página da web e Lado do servidor.

Os dados retornados de chamadas XMLHttpRequest serão frequentemente fornecidos por bancos de dados back-end. Além de XML, XMLHttpRequest pode ser usado para buscar dados em outros formatos, por exemplo, JSON ou mesmo texto simples.

Você já viu alguns exemplos de como criar um objeto XMLHttpRequest.

Listados abaixo estão alguns dos métodos e propriedades com os quais você deve se familiarizar.

Métodos XMLHttpRequest

  • abort()

    Cancela a solicitação atual.

  • getAllResponseHeaders()

    Retorna o conjunto completo de cabeçalhos HTTP como uma string.

  • getResponseHeader( headerName )

    Retorna o valor do cabeçalho HTTP especificado.

  • open( method, URL )

  • open( method, URL, async )

  • open( method, URL, async, userName )

  • open( method, URL, async, userName, password )

    Especifica o método, URL e outros atributos opcionais de uma solicitação.

    O parâmetro do método pode ter um valor de "GET", "POST" ou "HEAD". Outros métodos HTTP como "PUT" e "DELETE" (usados ​​principalmente em aplicativos REST) ​​podem ser possíveis.

    O parâmetro "async" especifica se a solicitação deve ser tratada de forma assíncrona ou não. "true" significa que o processamento do script continua após o método send () sem esperar por uma resposta, e "false" significa que o script espera por uma resposta antes de continuar o processamento do script.

  • send( content )

    Envia o pedido.

  • setRequestHeader( label, value )

    Adiciona um par rótulo / valor ao cabeçalho HTTP a ser enviado.

Propriedades XMLHttpRequest

  • onreadystatechange

    Um manipulador de eventos para um evento que dispara a cada mudança de estado.

  • readyState

    A propriedade readyState define o estado atual do objeto XMLHttpRequest.

    A tabela a seguir fornece uma lista dos valores possíveis para a propriedade readyState -

Estado Descrição
0 A solicitação não foi inicializada.
1 A solicitação foi configurada.
2 O pedido foi enviado.
3 A solicitação está em andamento.
4 A solicitação foi concluída.

readyState = 0 Depois de criar o objeto XMLHttpRequest, mas antes de chamar o método open ().

readyState = 1 Depois de ter chamado o método open (), mas antes de ter chamado send ().

readyState = 2 Depois de chamar send ().

readyState = 3 Depois que o navegador estabelecer uma comunicação com o servidor, mas antes que o servidor conclua a resposta.

readyState = 4 Depois que a solicitação foi concluída e os dados de resposta foram completamente recebidos do servidor.

  • responseText

    Retorna a resposta como uma string.

  • responseXML

    Retorna a resposta como XML. Esta propriedade retorna um objeto de documento XML, que pode ser examinado e analisado usando os métodos e propriedades da árvore de nós DOM do W3C.

  • status

    Retorna o status como um número (por exemplo, 404 para "Não encontrado" e 200 para "OK").

  • statusText

    Retorna o status como uma string (por exemplo, "Não encontrado" ou "OK").

Para ilustrar claramente como é fácil acessar informações de um banco de dados usando AJAX, vamos construir consultas MySQL dinamicamente e exibir os resultados em "ajax.html". Mas antes de prosseguirmos, vamos fazer o trabalho de base. Crie uma tabela usando o seguinte comando.

NOTE - Presumimos que você tenha privilégios suficientes para realizar as seguintes operações do MySQL.

CREATE TABLE 'ajax_example' (
   'name' varchar(50) NOT NULL,
   'age' int(11) NOT NULL,
   'sex' varchar(1) NOT NULL,
   'wpm' int(11) NOT NULL,
   PRIMARY KEY  ('name')
)

Agora, despeje os seguintes dados nesta tabela usando as seguintes instruções SQL -

INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);

Arquivo HTML do cliente

Agora vamos ter nosso arquivo HTML do lado do cliente, que é ajax.html, e ele terá o seguinte código -

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!
            
            try {        
               // Opera 8.0+, Firefox, Safari
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {
               
               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
            
            // Create a function that will receive data
            // sent from the server and will update
            // div section in the same page.
            ajaxRequest.onreadystatechange = function() {
            
               if(ajaxRequest.readyState == 4) {
                  var ajaxDisplay = document.getElementById('ajaxDiv');
                  ajaxDisplay.innerHTML = ajaxRequest.responseText;
               }
            }
            
            // Now get the value from user and pass it to
            // server script.
            var age = document.getElementById('age').value;
            var wpm = document.getElementById('wpm').value;
            var sex = document.getElementById('sex').value;
            var queryString = "?age = " + age ;
            
            queryString +=  "&wpm = " + wpm + "&sex = " + sex;
            ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
            ajaxRequest.send(null); 
         }
         //-->
      </script>

      <form name = 'myForm'>
         Max Age: <input type = 'text' id = 'age' /> <br />
         Max WPM: <input type = 'text' id = 'wpm' /> <br />
         Sex: 
         
         <select id = 'sex'>
            <option value = "m">m</option>
            <option value = "f">f</option>
         </select>
         
         <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
      </form>
      
      <div id = 'ajaxDiv'>Your result will display here</div>
   </body>
</html>

NOTE - A forma de passar variáveis ​​na Consulta é de acordo com o padrão HTTP e possui formA.

URL?variable1 = value1;&variable2 = value2;

O código acima lhe dará uma tela conforme mostrado abaixo -

Seu resultado será exibido aqui nesta seção após você ter feito sua entrada.

NOTE - Esta é uma tela fictícia.

Arquivo PHP do lado do servidor

Seu script do lado do cliente está pronto. Agora, temos que escrever nosso script do lado do servidor, que buscará idade, wpm e sexo do banco de dados e os enviará de volta ao cliente. Coloque o seguinte código no arquivo "ajax-example.php".

<?php
$dbhost = "localhost"; $dbuser = "dbusername";
$dbpass = "dbpassword"; $dbname = "dbname";
	
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error());
	
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
	
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
	
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";

if(is_numeric($age)) $query .= " AND age <= $age"; if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
	
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());

//Build Result String
$display_string = "<table>"; $display_string .= "<tr>";
$display_string .= "<th>Name</th>"; $display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>"; $display_string .= "<th>WPM</th>";
$display_string .= "</tr>"; // Insert a new row in the table for each person returned while($row = mysql_fetch_array($qry_result)) { $display_string .= "<tr>";
   $display_string .= "<td>$row[name]</td>";
   $display_string .= "<td>$row[age]</td>";
   $display_string .= "<td>$row[sex]</td>";
   $display_string .= "<td>$row[wpm]</td>";
   $display_string .= "</tr>"; } echo "Query: " . $query . "<br />";
$display_string .= "</table>"; echo $display_string;
?>

Agora tente inserir um valor válido (por exemplo, 120) em Max Age ou qualquer outra caixa e clique no botão Query MySQL.

Seu resultado será exibido aqui nesta seção após você ter feito sua entrada.

Se você concluiu esta lição com sucesso, então sabe como usar MySQL, PHP, HTML e Javascript em conjunto para escrever aplicativos AJAX.

Segurança AJAX: lado do servidor

  • Os aplicativos da Web baseados em AJAX usam os mesmos esquemas de segurança do lado do servidor dos aplicativos da Web regulares.

  • Você especifica os requisitos de autenticação, autorização e proteção de dados em seu arquivo web.xml (declarativo) ou em seu programa (programático).

  • Os aplicativos da Web baseados em AJAX estão sujeitos às mesmas ameaças à segurança dos aplicativos da Web normais.

Segurança AJAX: Lado do Cliente

  • O código JavaScript é visível para um usuário / hacker. O hacker pode usar o código JavaScript para inferir pontos fracos do lado do servidor.

  • O código JavaScript é baixado do servidor e executado ("eval") no cliente e pode comprometer o cliente por código mal intencionado.

  • O código JavaScript baixado é restringido pelo modelo de segurança sand-box e pode ser relaxado para JavaScript assinado.

O AJAX está crescendo muito rápido e é por isso que contém muitos problemas. Esperamos que com o passar do tempo, eles sejam resolvidos e o AJAX se torne ideal para aplicações web. Estamos listando alguns problemas que AJAX sofre atualmente.

Complexity is increased

  • Os desenvolvedores do lado do servidor precisarão entender que a lógica de apresentação será necessária nas páginas do cliente HTML, bem como na lógica do lado do servidor.

  • Os desenvolvedores de páginas devem ter habilidades com a tecnologia JavaScript.

AJAX-based applications can be difficult to debug, test, and maintain

  • JavaScript é difícil de testar - o teste automático é difícil.
  • Modularidade fraca em JavaScript.
  • Falta de padrões de design ou diretrizes de melhores práticas ainda.

Toolkits/Frameworks are not mature yet

  • A maioria deles está em fase beta.

No standardization of the XMLHttpRequest yet

  • A versão futura do IE resolverá isso.

No support of XMLHttpRequest in old browsers

  • Iframe vai ajudar.

JavaScript technology dependency and incompatibility

  • Deve ser habilitado para que os aplicativos funcionem.
  • Ainda existem algumas incompatibilidades de navegador.

JavaScript code is visible to a hacker

  • Um código JavaScript mal projetado pode gerar problemas de segurança.