O que é Ajax?
Neste post, discutiremos o que é Ajax, o funcionamento do Ajax e passaremos por um exemplo para entender melhor a implementação do Ajax.
O que é Ajax?
Ajax, que significa JavaScript assíncrono e XML, é um método (não uma linguagem de programação) usada para aplicativos da web transmitir e receber dados do servidor de forma assíncrona, sem afetar o restante do conteúdo da página ou exigir uma página recarregada.
A abreviação Xml apoia Extensible Markup Language que é usado para criptografar mensagens para que possa ser lido por humanos e máquinas. XML é semelhante ao HTML, mas permite criar e personalizar suas próprias tags.
O AJAX se comunica com o servidor usando o objeto XMLHTTPREQUEST, JavaScript/DOM para fazer solicitações e XML como mecanismo de transmissão de dados. Tornou -se popular apenas quando o Google colocou no Google sugerindo em 2005
Para colocar em palavras simples, o Ajax é um método para reduzir as interações servidores-cliente que são realizadas apenas atualizando uma parte de uma página da web em vez de atualizar toda a página da web. O objetivo do Ajax é enviar pequenas quantidades de dados para o servidor sem precisar atualizar a página.
Funcionamento gradual do Ajax
- Algum evento é executado e o navegador cria um objeto xmlhttprequest, após o qual o httprequest é enviado ao servidor.
- O servidor recebe o httprequest e depois o processa, após o processamento, o servidor gera uma resposta e envia a resposta de volta ao navegador com alguns dados.
- Os dados retornados são então processados pelo navegador com a ajuda do JavaScript e dependendo da resposta JavaScript atualiza o conteúdo da página da web.
Vamos seguir alguns exemplos para entender melhor o Ajax.
Exemplo 1:
Este exemplo demonstrará como alterar o conteúdo de um H2 tag usando ajax. Primeiro, implementaremos a estrutura da nossa página da web usando HTML.
O objeto xmlHttPrequest
No código acima, definimos um div contêiner e deu o atributo de identificação devido ao qual podemos fazer referência a este contêiner de divistério. Esta seção DIV é definida para que possa exibir informações de um servidor. Em seguida, definimos uma etiqueta H2 e um botão em que passamos por um ONCLICK evento. Sempre que um usuário clicar neste botão, um evento será gerado e a função ChangeContent () será executado.
functionChanGeContent ()// xmlHttPrequest Objeto Inicialização
constxhttp = newxmlHttPrequest ();
// Usando a função interno de Onload
xhttp.OnLoad = function ()
// Atualizando o conteúdo do elemento div
documento.getElementById ("exemplo").inerhtml =
esse.responseText;
// Obtenha arquivo ajax_info.TXT
xhttp.Open ("Get", "Ajax_info.TXT");
// Enviar pedido
xhttp.enviar();
Agora que terminamos com a configuração da página HTML, precisamos escrever algum código de script. Para este tutorial, incluiremos o código JavaScript dentro do marcação. Em nosso código de script, primeiro precisamos criar a função ChangeContent () Isso será executado com o clique do botão, podemos fazer isso com as seguintes linhas de código:
functionChanGeContent ()// xmlHttPrequest Objeto Inicialização
constxhttp = newxmlHttPrequest ();
// Usando a função interno de Onload
xhttp.OnLoad = function ()
// Atualizando o conteúdo do elemento div
documento.getElementById ("exemplo").inerhtml =
esse.responseText;
// Obtenha arquivo ajax_info.TXT
xhttp.Open ("Get", "Ajax_info.TXT");
// Enviar pedido
xhttp.enviar();
Como você pode ver no snippet de código acima, a função gera um novo xmlhttprequest e aguarda a resposta do servidor. Ao receber a resposta, o conteúdo da Div será substituído por esta função.
Vamos agora criar um arquivo com o nome de Ajax_info.TXT e escreva algumas informações fictícias neste arquivo, por exemplo:
Todo o código é fornecido abaixo:
O objeto xmlHttPrequest
A saída do código acima é fornecida abaixo:
Podemos ver que, quando o usuário clica no botão, o texto “muda” para o texto que estava presente dentro do Ajax_info.arquivo txt.
Conclusão
O JavaScript executa o código linha por linha que é chamado de execução síncrona e, portanto, o Ajax entra em jogo, pois é um método que ajuda na implementação da execução assíncrona do código no JavaScript. Na execução assíncrona, uma declaração ou uma linha de código não precisa esperar o acabamento da linha de código anterior e ambos podem executar paralelos. O Ajax é usado para transmitir e receber dados do servidor de forma assíncrona sem afetar o restante da página e nem exige a página inteira de recarga.
Neste post, vimos o que é Ajax e depois fomos ver como o Ajax funciona descrevendo o processo gradualmente e, no final, fornecemos um exemplo para tornar seu conceito mais claro.