Entendendo Javascript - 4
Ajax
"Ajax" é só um nome que o departamento de marketing inventou para um objeto Javascript, o nome deste objeto é XMLHttpRequest, mas não soa tão bem pra vender uma idéia.
AJAX = Asynchronous JavaScript And XML.
Ajax
// criamos uma instância deste objeto
var httpRequest = new XMLHttpRequest();
// este é o método que será chamado quando a requisição completar
// métodos deste tipo são chamados de métodos de callback
httpRequest.onreadystatechange = function(){
// processa a resposta recebida
};
// esta parte é a configuração da chamada assíncrona
// o primeiro parâmetro é o a formade obter os dados GET ou POST
// o segundo parâmetro é o destino que vc está chamando,
// seja um arquivo texto, ou uma URL
// o terceiro parâmetro é opcional que diz se a requisição
// deve ou não ser assíncrona
httpRequest.open("GET", "ajax_info.txt", true);
// método que realiza a chamada
httpRequest.send();Ajax
// se utilizar o formato de POST, é necessário
// enviar também um header com o conteúdo da requisição
//este é o header para um formulário
httpRequest.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
//este é o header para texto puro, atenção para o charset
httpRequest.setRequestHeader('Content-Type',
'text/plain; charset=utf-8' );
Ajax
httpRequest.onreadystatechange = function(){
// verifica se o estado da resposta é concluído
if (httpRequest.readyState === XMLHttpRequest.DONE) {
// verifica se o status da resposta
// obtida é código 200 que quer dizer OK
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
div.innerHTML = httpRequest.responseText;
} else {
// erros comuns são 404 por exemplo,
// um velho conhecido para página não encontrada
alert('Ocorreu um problema na requisição');
}
}
};JSON
JavaScript Object Notation
É uma notação nativa do Javascript que outras linguagens aproveitaram como padrão para trafegar dados.
Mas ok, qual é a mágica?
JSON
Lembram dos objetos e closures da parte básica?
function Person(){
this.name = "CH";
this.age = 32;
this.food = [ "Bolo", "Sanduíche", "Suco de Uva", "Torta Holandesa" ];
};Em JSON esse objeto fica assim:
{
"name":"CH",
"age" : 32,
"food" : [ "Bolo", "Sanduíche", "Suco de Uva", "Torta Holandesa" ]
};JSON
Ta, mas como eu uso isso?
Como se fosse um objeto Javascript puro... porque ele é um objeto javascript puro.
<script>
var a = {
"name" : "CH",
"age" : 32,
"food" : [ "Bolo", "Sanduíche", "Suco de Uva", "Torta Holandesa" ]
};
console.log(a.food);
</script>JSON
As outras linguagens pegaram o padrão, especialmente por ser menor que um XML, mas ele é nativo JS.
O que significa que se você trafega informação em formato JSON, você pode nativamente aplicar lógica e código em cima disso no seu navegador.
Ai você começa a pensar, e se a sua chamada AJAX retornar um JSON e vc tratar ou armazenar a informação de alguma forma?
Exemplos que utilizam Javascript
JSON e MongoDB
JQuery e a "Bala de Prata"
JQuery mascara muita coisa como sendo a única solução que existe, a única coisa que pode ser utilizada como base para aplicações que utilizam Javascript.
É uma biblioteca que inicialmente apresenta um experimento de programação, e isso é muito bom.
Mas não é a única coisa que existe e certamente não se aplica em todas as situações.
JQuery e a "Bala de Prata"
Para desenvolvedores que tem um entendimento superficial do que eles estão fazendo, JQuery possibilita coisas que em seria impossível para esta classe de desenvolvedor.
Repetindo, que definitivamente não é a única coisa que existe e não é a solução para todos os problemas.
Percebam que não é errado usar JQuery, é uma questão de escolha e de solução de um problema, mas não pode ser algo definido por ignorância.
JQuery e a "Bala de Prata"
E muitas vezes este conceito vai se aplicar em outras áreas, não só em JS:
Se puder fazer uma solução nativa de forma viável, não utilize uma biblioteca. Você se torna independente de versão, suporte ou tutorial explicando como usar a API.
Os exemplos simples deste curso foram todos feitos sem nenhuma biblioteca externa ao que já está disponível no JS padrão ES5.
Single Page Application
Aplicações que possuem apenas uma página, e apenas as partes do conteúdo necessário são atualizados, não a página toda.
Melhor utilização de recursos de rede e melhor experiência de usuário
Single Page Application
Após a requisição inicial apenas dados são trafegados entre o servidor e o client.
O principal problema é para indexar adequadamente esse tipo de aplicação em mecanismos de busca como o google.
Recursos de front-end podem ser efetivamente separados na camada de VIEW.
Dúvidas?
E fim! ou intervalo...
Entendendo Javascript - 4
By Chrysthian Simão
Entendendo Javascript - 4
Ajax, JSON, "Bala de Prata", Single Page Applications
