HTML5 - Ajax

Índice
Até alguns anos atrás, pensava-se em Ajax como o futuro das aplicações web, depois que começou sua massificação com o Gmail, porém hoje deve-se considerar que é a realidade, de fato, um site que neste momento não incorpora Ajax de alguma forma não é muito bem visto.
Ajax é um conjunto de técnicas que nos permitem enviar e receber informações sem ter que atualizar o documento ou recarregar a página, portanto simplificando poderíamos dizer que é uma ferramenta para salvar e agilizar a navegação.
O que é Ajax?
Ajax responde a uma sigla para Javascript assíncrono e XML quer dizer Javascript Y XML assíncrono, porém atualmente o formato é usado JSON mais comumente do que XML, JSON é até considerado por muitos como o padrão.
Tudo isso resulta em algo muito simples de explicar, a recepção e envio de dados independentemente do carregamento e atualização das páginas, por exemplo se queremos que toda vez que clicamos em um botão e uma parte da página traga dados de um banco de dados , em vez de enviar uma solicitação ao servidor enviando um formulário e atualizando a página inteira, o que faremos será por meio de uma função Javascript e uma solicitação XMLHttpRequest comunicar-se com o servidor para buscar os dados e alterar apenas a parte da página de que precisamos.
Como vemos isso, parece e soa maravilhoso, o único problema ou limite é o uso do Javascript, pois se o desactivarmos no nosso navegador não poderemos usufruir destas funcionalidades.
Nosso primeiro documento com Ajax
Agora que sabemos os fundamentos e os fundamentos do Ajax, vamos elaborar um pequeno exemplo que pode nos ilustrar sobre essa técnica.
Primeiro, vamos ver o código a seguir e, em seguida, explicaremos a que corresponde:
 ExemploMaçãs Cerejas Bananaspressione um botão

Este exemplo simplesmente o que faz é que quando clicamos em um botão, acionamos uma função chamada HandleButtonPress (), isso cria um novo objeto do tipo XMLHttpRequest e com isso podemos pegar o HTML dentro do botão, pegar seu texto e concatená-lo à extensão .HTML para poder chamar um documento com o mesmo nome criado anteriormente.
Então a função handleResponse faz uma verificação do status da solicitação se foi bem-sucedida, em um container já designado carregará o documento correspondente que chamamos.
Vamos ver nas imagens como será o fluxo do processo:

Na primeira imagem somos solicitados a clicar em um dos botões, então quando o fazemos na segunda imagem vemos como o conteúdo é carregado, que de acordo com a função Ajax descrito no código de exemplo vem de um documento HTML já criado, este conteúdo é carregado na div onde estava a instrução que dizia para apertar um botão.
Com isso terminamos o tutorial, já temos a capacidade de começar a experimentar com Ajax para enriquecer a experiência de navegação em nossas páginas ou documentos HTML.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo

Você vai ajudar o desenvolvimento do site, compartilhando a página com seus amigos

wave wave wave wave wave