Índice
AJAX É composto por um conjunto de técnicas e tecnologias que nos permitem estabelecer comunicações assíncronas entre o que o cliente vê na web e as informações que existem no lado servidor de uma página web.Uma das principais características que podemos destacar é que conta com os diferentes métodos HTTP O que POST, GET, PUT ou DELETE para poder enviar os dados necessários aos aplicativos no servidor.
No estágio inicial de desenvolvimento com AJAX as chamadas tinham que ser construídas usando Javascript plana, o que gerou muito código para nós, no entanto jQuery nos ajuda a simplificar as coisas, levando a adoção dessa técnica e tecnologias para as massas, tudo para o benefício do desenvolvedor e do usuário.
O que é AJAX?AJAX corresponde a Javascript assíncrono e XML quer dizer Javascript Y XML assíncrono, o que também significa que é algo que não depende de uma estrutura fixa, como um script PHP onde as instruções são executadas sequencialmente, obviamente salvando as chamadas para métodos e funções de classes e objetos.
O explicado acima nos dá a possibilidade de carregar informações ou enviá-las sem ter que recarregar ou fazer uma solicitação "completa" ao servidor, colocamos entre aspas porque as chamadas AJAX Essas são solicitações normais, simplesmente não é necessário atualizar a página por completo se não for o comportamento desejado.
O uso dessas técnicas e tecnologias representam algumas vantagens que muitos não têm conhecimento de sua existência, muitas vezes usamos apenas por uma questão de tendência, mas se entendermos seus benefícios poderemos saber em quais projetos podemos aplicá-la para obter o máximo proveito disso. Vamos ver abaixo algumas das vantagens mais importantes de usar AJAX:
Redução do uso de largura de bandaConseguimos isso graças aos pedidos de seções em particular, com isso podemos conseguir, por exemplo, não ter que recarregar estilos gerais ou imagens se o que queremos é atualizar o texto.
Melhor experiência do usuárioAo aumentar a velocidade da aplicação web, o usuário tem uma melhora notável no uso, além de nos dar a oportunidade, como desenvolvedores, de aumentar o grau de interação com os elementos que organizamos.
Remover dependência do navegadorAo usar jQuery a necessidade de escrever código que depende do navegador é eliminada, o que nos ajuda a melhorar a velocidade de desenvolvimento e a produtividade de nosso tempo.
Uma vez que nada é perfeito, ao usar AJAX Devemos também entender que existem algumas desvantagens que podem nos fazer refletir e pensar se esta é a melhor opção para o nosso projeto. A seguir veremos alguns desses pontos para ter uma visão mais completa antes de iniciar a parte técnica do tutorial.
DependênciaSe um cliente ou usuário está usando um navegador muito antigo ou tem o uso do Javascript desativado, nosso aplicativo pode sofrer ou não funcionar, o que nos obriga a fazer casos especiais em que não possamos usar AJAX.
Escreva código adicionalDe acordo com nossa aplicação, temos que escrever código adicional para poder integrar as respostas que obtemos das solicitações AJAX, como as respostas que vêm com HTML Y CSS.
Claro que no momento é muito difícil encontrar um navegador que não seja compatível com Javascript Y jQueryPorém, dependendo da nossa área, podemos encontrar alguns casos que podem tornar a vida muito difícil.
Um pedido AJAX a partir de jQuery deve ter uma estrutura básica, onde devemos estabelecer alguns parâmetros necessários para o framework, devemos estabelecer o método HTTP da solicitação, a rota para a qual a solicitação será feita, o formato da resposta e, por fim, o que deve ser feito caso a solicitação seja bem-sucedida ou quando ocorrer um erro. Vamos ver no código não funcional a seguir como podemos ver isso:
$ .ajax ({type: "HTTP method", // POST, GET, PUT, DELETE url: "Request path", // http: / / www.example.com/request dataType: "Type of data", / / html, xml, json success: function on success, error: function on error}); Vemos que cada uma das seções que descrevemos são parâmetros que nossa solicitação recebe e que é feita por meio do método $ .ajax () que é fornecido por jQuery diretamente, e é uma máscara para o código Javascript plano que corresponde a cada motor de cada navegador suportado, que neste momento são quase todos os comerciais mais recentes, como Chrome, Firefox, Opera, Safari Internet Explorer, e aqueles derivados dos motores desses que mencionamos.
Agora vamos colocar em prática o que vimos na seção anterior ao fazer uma solicitação AJAX de uma página HTML que vamos construir no exemplo a seguir. Devemos saber que vamos exigir a versão mais atual do jQuery podemos obter, no entanto, podemos usar o que eles armazenam em seus CDN, também precisaremos de um pequeno servidor web para poder rotear os arquivos que vamos obter de forma assíncrona, para isso podemos usar WAMP em janelas, ou uma instalação LUMINÁRIA em sistemas Linux, em relação às plataformas MAC, podemos usar XAMP ou similar.
No código a seguir, vamos incluir primeiro jQuery, então criaremos um rótulo no corpo com um id único onde colocaremos o conteúdo da resposta de nossa solicitação, e próximo ao final do documento faremos um rótulo roteiro onde geraremos o código para fazer a solicitação, no atributo do url vamos fazer a solicitação ao índice da pasta onde nossos arquivos estão localizados, fazemos isso para mostrar o funcionamento do nosso código, porém a forma de fazer isso é solicitar outro arquivo que irá atender a resposta que precisamos, vamos veja o código:
Exemplo de solicitação AJAXProcesso AJAX
Na imagem a seguir, vemos como tudo funcionou, onde podemos ver uma resposta bem-sucedida de nosso código.
Uma das coisas que jQuery quer é que não percamos tempo e código fazendo coisas ao longo do caminho, é por isso que nos oferece atalhos para chamadas AJAX métodos mais comuns, como OBTER Y PUBLICAR, então, usando o atalho, salvamos algumas linhas de código e, assim, podemos reduzir o peso de nosso aplicativo.
Para isso na documentação oficial do jQuery Temos todos os casos existentes, porém vamos refazer o exemplo anterior usando neste caso o atalho, mas antes de ver o código funcional, vamos ver o exemplo não funcional:
$ .get (caminho, dados, SuccessFunction, ResponseType);
Como percebemos, essa chamada é muito menor, o que nos ajuda a ter um código mais limpo e leve, agora aplicando isso ao nosso exemplo anterior seria o seguinte:
Exemplo de solicitação AJAXProcesso AJAX
Vemos que o número de linhas e caracteres foi significativamente reduzido, o que melhoraria nossa transmissão de dados usando uma largura de banda menor. Se executarmos tudo no navegador, teremos a seguinte resposta:
