Tableless » AJAX

Lendo um arquivo de texto com AJAX

Moacyr Minéro — Wed, 14 Sep 2011 14:05:44 +0000

Inicio mostrando como realizar uma requisição de arquivos de texto com AJAX.
Em tempos de Web 2.0, não podemos pensar mais em sites que usem requisições síncronas para rotinas de interação com o usuário.
Uma das técnicas mais utilizadas para esse fim é o AJAX – Assynchronous Javascript and XML.
De uma forma resumida e sem muito “tecniquês”, AJAX é a captura de informações sem a necessidade de recarregamento da estrutura do documento HTML a cada requisição ao servidor web.

E para poder fazer conexão assíncrona com o servidor web temos que criar um objeto com as propriedades e métodos AJAX .
Porém, como a web não é um ambiente perfeito, temos que criar um objeto AJAX para os browsers Firefox, Chrome, Opera, Safari, chamado de XMLHttpRequest. E para o IE um objeto ActiveX que faça referencia ao objeto XMLHTTP.

Como padrão de desenvolvimento, vamos criar um arquivo que faça essa identificação e criação chamado de xhr.js.
Para a criação desse arquivo, abra o editor de código de sua preferência e digite o seguinte código:

Arquivo xhr.js…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

//Declarando variaveis globais
var xhr;
var txt ;

function ajax(){
//Verificando se os browsers aceitam o objeto XMLHttpRequest
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
//Verificando se o browser IE versão > 6
else if(window.ActiveXObject){
try{
xhr = new ActiveXObject(Msxml2.XMLHTTP);
}
catch(e){
try{
xhr = new ActiveXObject(Microsoft.XMLHTTP);
}
catch(er){
txt = "Seu browser não aceita AJAX!";
alert(txt);
}
}
}
return xhr;
}
...

Em seguida, vamos criar o arquivo HTML e fazer referência ao objeto AJAX criado pelo arquivo xhr.js.
Para isso use a tag script no head da página html. Exemplo:

Arquivo ajax_txt.html

Código javascript
…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

//Declarando variáveis globais
var xhr;
var valor;

//Função para pegar os arquivos de texto
function pegaTextos{
//Instancia o objeto ajax e guarda na var xhr
xhr = ajax();
//Captura o elemento select via DOM
var txt = document.getElementById("textos");
//Pega o valor da opção escolhida na lista do campo select
valor = txt.options[txt.selectedIndex].value;
//Monta a url da chamada AJAX
var url = "texto"+valor+".txt";
//Abre a conexão com o servidor web via AJAX
xhr.open("GET",url,false);
//Confirma o envio dos dados
xhr.send(null);
//Verifica a mudança de estado do servidor web e dispara a função para mostrar os textos
xhr.onreadystatechange = mostraTextos;
}

<em>
em> //Função para mostras os textos
function mostraTextos(){
//Verifica o status do retorno do servidor web
if(xhr.readyState == 4 && xhr.status == 200){
//Pega a resposta do servidor web
var resposta = xhr.responseText;
//Captura a div Box para mostrar os textos
var box = document.getElementById("box");
//Escreve os textos na div Box
box.innerHTML = resposta;
//Aplica um estilo de borda na div Box
box.style.border = "1px dotted #333";
}
}

Aplicando um estilo CSS na div Box

1
2
3
4
5
6

#box{
width: 450px;
height: auto;
padding: 10px;
margin-top: 25px;
}

Montamos agora o HTML com o combo dos textos.

…

1
2
3
4
5
6
7
8
9
10

<body>
<p>Selecionando textos com AJAX</p><br/>
<select id="textos" onchange="pegaTextos()">
<option value="" selected="selected">selecione</option>
<option value="1">Texto 1</option>
<option value="2">Texto 2</option>
<option value="3">Texto 3</option>
</select>
<div id="box"></div>
</body>

…

Para que a chamada AJAX funcione, temos que criar os arquivos de textos com os respectivos nomes: texto1.txt,texto2.txt e texto3.txt.
Em seguida salve os arquivos na mesma pasta onde se encontram os arquivos xhr.js e ajax_txt.html.

Agora é so testar!

Lembrando que para uma requisição AJAX funcionar, ela tem que passar por um servidor. No nosso caso o localhost.

Posts Relacionados

Entendendo os Reflows

Alysson Franklin — Mon, 18 Jul 2011 13:00:02 +0000

Reflow é um assunto extenso e necessário. Ele sempre vai existir nos navegadores, então temos que entendê-lo para saber como utilizá-lo de maneira racional. O mais legal é entender todo o contexto sobre o que são e como funcionam, para a partir daí repensar o código que renderizamos no navegador para obtermos maior performance.

Reflow é o resultado de um evento que desencadeia mudanças no jeito que a pagina deve ser renderizada, tomando tempo para cálculo e reposicionamento de elementos.

Para explicar como isso acontece, o importante é entender como um navegador renderiza uma página web.

DOM

Document Object Model (DOM) é uma interface independente de linguagem e plataforma para representar e interagir com objetos em HTML, XHTML e XML. Mas o DOM é mais que isso; toda linguagem estruturada tem uma arvore DOM.

Exemplo de arvore DOM para documento HTML

Mas sobre o DOM podemos dizer que programas ou scripts podem dinamicamente acessar elementos na árvore DOM e alterar seu conteúdo, estrutura e estilo. Adicional ao estado inicial da pagina, estas alterações são agregadas a árvore DOM. O resultado é a renderização - o que nós vemos em um navegador. Mas a nossa Render Tree tem mais que isso:

Render Tree e como realmente entender display X visibility

Como a render tree é montada

O DOM é resultado do parse do markup HTML que você montou dentro de um navegador. Só que dentro de um HTML você não tem apenas a estrutura do documento, estilos em CSS e funcionalidades em javascript também estarão no seu markup. E a Render tree é a soma de DOM mais estilos, que depois podem ser manipulados (seus scripts).

Pode parecer estranho, mas para mim a melhor maneira de entender as diferencas entre DOM e Render Tree é encarar esta última como um individuo narcisista. Isso mesmo: A Render Tree gosta de aparecer, é o que vemos no browser. O DOM acontece por trás das cortinas. À Render tree, o palco. (Para saber mais sobre o DOM, veja este outro artigo)

Uma página que tem controles de show/hide mostra isso muito bem. Enquanto todo o conteúdo da página está presente na árvore DOM, apenas alguns itens estarão disponíveis na Render Tree – os visíveis na página (display:block). Alterar os elementos display:none vão disparar mudanças na render tree, e não na árvore DOM.

Já tentou entender as diferenças entre display:none e visibility:hidden? A maioria das explicações que vemos é que um “deixa de mostrar o elemento totalmente, incluindo seu espaço em tela” e o outro “deixa de mostrar o elemento visual, mas sua área de exibição continua sendo utilizada”. Esta explicação não está incorreta, mas seria melhor dizer que a propriedade display altera a estrutura da render tree, adicionando algo que antes não estava ali, enquanto visibility não faz alterações, apenas o câmbio de mostrar ou não um elemento que já esta na render tree.

Repaint

Entendido as diferenças entre display e visibility, além do contexto de área do elemento, conseguimos explicar o Repaint. Uma ação que faça alteração de propriedades de background sem alterar dimensões ou outras propriedades do elemento não causam o reflow, apenas o repaint, que seria a atualização da propriedade de cor ou da imagem – literalmente pintar novamente o elemento. Repaints gastam menos CPU que reflows.

Como um navegador monta seu documento HTML

Esses vídeos são sensacionais. Eles explicam o que são os reflows e dai como minimizá-los durante a fase de desenvolvimento do documento (sempre usando Progressive Enhancement quando possível) é mais fácil..

Esta é uma representação de como a página da Mozilla é montada. Quer mais? Veja também como a Wikipedia e a página do Google no Japão são renderizadas.

Analisando o primeiro vídeo, perceba que ao finalizar a montagem do rodapé, “algo mais” acontece (a partir de 12seg). São os Reflows. A maioria dos elementos são recalculados e reposicionados. Se ponderarmos que o rodapé acaba de ser montado aos 14 segundos e a renderização termina aos 26 segundos da pagina, estamos falando quase de 50% do tempo de renderização sendo gasto com Reflows, o que é muito, dependendo do que a sua página deve fazer.

O que causam exatamente os reflows?

1
2
3
4
5
6
7
8
var bstyle = document.body.style; // cache
bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; // outro reflow e repaint
bstyle.color = "blue"; // repaint
bstyle.backgroundColor = "#fad"; // repaint
bstyle.fontSize = "2em"; // reflow, repaint
// novo elemento DOM - reflow, repaint
document.body.appendChild(document.createTextNode('Leeento'));

Reflows são excessivamente pesados e para reduzir efeitos uma das táticas que navegadores usam é processar nossos scripts em lote. Uma fila é criada para todos os comandos que causam reflow sejam processados de uma única vez. Porém o foco é entender o que causa um reflow e tentar minimizar o seu uso para ganhar performance na aplicação.

Este assunto é novo, e com certeza, A lista que mostro abaixo deve crescer. É importante mantermos a atenção a este assunto porque pequenos cuidados podem significar muito. Em um site web visualizado em desktops a diferença é óbvia sobre o tempo de renderização. Mas isso implica em outras coisas, que podem fazer a diferença não apenas em montar uma página mais rápido, mas também para menor gasto de processamento, o que garante também mais tempo de bateria em mobiles e tablets por exemplo.

Adicionar, remover ou atualizar o DOM;
Esconder nós do DOM usando display:none;
Mover e animar o DOM na página;
Adicionar folhas de estilo on-the-fly que mudem o comportamento dos elementos;
Redimensionar janelas;
Alterar tamanho de fontes;
Scroll de página;

Em um dos posts sobre o assunto, Tony G mapeou pesquisas prévias e montou a seguinte tabela, que também está sendo constantemente atualizada.

Element

Frame, Image

Range

SVGLocatable

SVGTextContent

SVGUse

window

clientHeight,
clientLeft,
clientTop,
clientWidth,
focus(), getBoundingClientRect(), getClientRects(), innerText,
offsetHeight,
offsetLeft,
offsetParent,
offsetTop,
offsetWidth,
outerText,
scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft,
scrollTop,
scrollWidth

height, width

getBoundingClientRect(), getClientRects()

computeCTM(), getBBox()

getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString()

instanceRoot

getComputedStyle(),
scrollBy(),
scrollTo(),
scrollX,
scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()

Como melhorar o meu código para minimizar os reflows?

É simples. Basta minimizar o uso de requisições de estilo, que façam o navegador executar reflows ou repaints.

Planejar a sua aplicação e entender como plugins e scripts criados vão se comportar em relação a reflow e repaints. Arquitetar o uso de plugins de acordo com a personalização que deve ser feita. Minimize o uso de alteração de estilos on-the-fly.
Quando precisar alterar a propriedade de um estilo, troque o nome da classe, planeje a existência deste estado e adicione-o ao CSS previamente. Se o valor desta nova classe for dinâmica, use cssText. Evite alterar a propriedade diretamente para qualquer mudança.
Pense como suas mudanças afetam a render tree e o quanto precisará ser revalidado depois desta mudanca. Se você usa position:absolute em um elemento, ele deixa de pertencer ao nó que está, e passa a ser filho do BODY. Alterá-lo então, não será tão custoso em termos de performance. Mesmo que alterações neste nó sobreponha outras areas, o reflow acontecerá apenas neste nó, e não em toda a render tree.
Limpe seu CSS. Classes não utilizadas devem ser removidas.
Reduza o número de mudanças no DOM. Ele vai causar mudanças estruturais em todas as outras etapas. E mais tempo de reflow.
Animações na página, transições? Pondere sobre posicioná-la de maneira absoluta e trabalhar com ela a partir do BODY.
Vá com calma nos seletores CSS – os descendentes em particular – pois usam maior poder de CPU para executar a tarefa (CPU = Bateria).

Referências

DOM pela wikipedia
Gecko Reflow
DOM, HTML5, CSS3 e Performance – Slides por Paul Irish
Reflow pelo Mozilla Labs
Reflow e Repaint na Ajaxian
Reflow pelo Google Code
W3C Overview do DOM
1 dia de javascript com Alex Russel: Como Navegadores Veem as suas Apps
Como (não) criar um layout no webkit por Tony G
Usando a timeline panel em navegadores webkit
The book of Speed
Reflow/Repaint por Stoyan Stefanov
Inconsistências dos navegadores em Reflows por Stoyan Stefanov
BrowserScope tests para reflows
Browsers para Web Developers David Baron da Mozilla labs
Renderização no webkit, o básico

Posts Relacionados

Templates e jQuery – parte 2

Davi Ferreira — Mon, 13 Dec 2010 10:37:27 +0000

Na primeira parte deste artigo você conferiu uma introdução ao novo plugin .tmpl() que possibilita a utilização de templates para retornos e saídas de suas aplicações jQuery. O plugin certamente é um avanço considerável na organização de código – é o JavaScript ficando cada vez mais profissional e robusto, abandonando a fama de ser uma simples linguagem de script, sem padrões.

A forma mais básica de utilização do plugin .tmpl() é declarar seu template em uma variável e chamá-lo da seguinte forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var noticias = [
{
titulo : 'Notícia 1',
data_publicacao : '28/10/2010 20h31',
chamada : 'Chamada da notícia 1',
link : '/noticia-1/',
},
{
titulo : 'Notícia 2',
data_publicacao : '28/10/2010 20h32',
chamada : 'Chamada da notícia 2',
link : '/noticia-2/',
},
{
titulo : 'Notícia 3',
data_publicacao : '28/10/2010 20h33',
chamada : 'Chamada da notícia 3',
link : '/noticia-3/',
}
];

var tpl_noticia = '

${titulo}

${data_publicacao}${chamada}Veja mais

';

$.tmpl( tpl_noticia, noticias ).appendTo( 'ul#noticias' );

Um problema do exemplo acima é que o template acaba ficando confuso dentro de uma variável. Uma outra forma de declarar um modelo seria utilizando a própria tag script, mas com um tipo diferente (text/x-jquery-tmpl):

1
2
3
4
5
6
7
8

id="tpl-noticia" type="text/x-jquery-tmpl">
>
>${titulo}>
class="data">${data}>
class="chamada">${chamada}>
href="${link}">Leia mais>
>
>

Dessa forma é possível indentar o template HTML obtendo uma melhor organização/visualização do código.

Caching

Antes de um template ser retornado através do método .tmpl(), ele é tranformado em uma função e depois executado. Uma forma de evitar esta execução toda vez que for retornado o plugin é utilizar o método .template() para criar uma versão em cache, otimizando a performance do script.

1
2
3
4
5
6
7
8

// renderizando como plugin diretamente no objeto jQuery
$('#tpl-noticia').template('tplNoticia');

// associando diretamente a uma variável
var tplNoticia = $('#tpl-noticia').template();

// renderizando passando html/texto como parâmetro
$.template('tplNoticia', '

${titulo}

');

No exemplo acima, a variável tplNoticia armazena a função responsável por nosso template. O método .template() é chamado de duas formas distintas: a primeira cria a função do template baseada no script com o id tpl-noticia. A segunda chamada funciona da mesma forma, só que dessa vez passamos o conteúdo do template diretamente como parâmetro. Lembram do artigo sobre plugins? Então, uma é um método público e a outra um utilitário jQuery.

{{wrap}} e {{tmpl}}

As tags especiais {{wrap}} e {{tmpl}} possuem objetivos bem parecidos. A primeira permite a iteração e inclusão de trechos HTML dentro de um objeto de template. Já a tag {{tmpl}} utiliza, ao invés de trechos HTML, um outro objeto template.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

id="tplNoticia" type="text/x-jquery-tmpl">
{{wrap "#tableNoticia"}}
>Notícia 1>
> href="noticia-1">Chamada da notícia 1>>
>Notícia 2>
> href="noticia-2">Chamada da notícia 2>
{{/wrap}}
>

id="tableNoticia" type="text/x-jquery-tmpl">
>
>
>
{{each $item.html("h2", true)}}
>
${$value}
>
{{/each}}
>
>
{{each $item.html("p")}}
>
{{html $value}}
>
{{/each}}
>
>
>
>

id="noticias">>

>
$(function(){
$("#tplNoticia").tmpl().appendTo("#noticias");
});
>

No código acima utilizamos a tag {{wrap}} para popular dados em uma tabela. A primeira linha () da tabela recebe os títulos do nosso template de notícias – tudo o que estiver entre a tag

. A iteração é feita através da tag {{each}}, explicada no artigo anterior. O que o exemplo acima faz é buscar todos os elementos H2 no item de template e adicionar o seu conteúdo, sem a tag, na célula da tabela. (Lembrando que você pode utilizar qualquer método jQuery no item de um loop dentro do template.)

Já a segunda linha da tabela recebe a chamada da notícia, preservando suas tags HTML – por isso a utilização da tag {{html}} no valor de cada notícia.

A tag {{tmpl}} é muito útil quando precisamos encadear ou utilizar uma espécie de include dentro de um outro template. No exemplo abaixo, o template para o título e o template da chamada da notícia estão separados. O método .tmpl() recebe apenas o template da chamada.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
id="tplNoticia" type="text/x-jquery-tmpl">
{{tmpl "#tplTitulo"}}
class="chamada">${chamada} href="${link}">Leia mais...>>
>

id="tplTitulo" type="text/x-jquery-tmpl">
>${titulo}>
class="data">${data_publicacao}>
>

id="noticias">>

>
$(function(){
$( "#tplNoticia" ).tmpl( noticias ).appendTo( "#noticias" );
});
>

Como e quando utilizar templates?

Templating é um conceito relativamente novo no jQuery, portanto, algumas funcionalidades ainda podem parecer confusas. Cabe a você decidir qual a melhor forma de definir e converter seus modelos. Por exemplo, se o seu template só vai ser utilizado uma única vez não é necessário utilizar caching (de repente não é necessário nem mesmo utilizar um template!).

Procure organizar bem seu código e pensar sempre em uma possível evolução do projeto – nesse caso, templates vão ser uma mão na roda.

Posts Relacionados

Javascript e acessibilidade

Davi Ferreira — Thu, 04 Nov 2010 12:30:55 +0000

É muito comum o desenvolvedor ficar empolgado ao descobrir recursos, plugins, animações e efeitos JavaScript e acabar exagerando no produto final. Também é muito comum, como disse a Thaiana, que acessiblidade esteja ligado exclusivamente a sites governamentais. Aos poucos este cenário está mudando.

Além de tornar o seu site acessível à pessoas com necessidades especiais, as técnicas abaixo serão úteis também quando o navegador do usuário estiver com JavaScript desabilitado. E se mesmo assim você ainda não estiver convencido, pense que, quanto menos JavaScript, mais otimizado e estável será o seu site/sistema.

O problema

Acessibilidade, basicamente, significa tornar o seu site/sistema compatível com dispositivos leitores de tela. O que este dispositivo faz é tentar converter todo o conteúdo presente em uma página para uma saída especial, seja ela voz (text-to-speech) ou braille. Por isso a importância da semântica no HTML e, por isso também, a importância do JavaScript não acabar atrapalhando o funcionamento do seu site.

Dependendo da forma como você utilizou JavaScript, parte do conteúdo pode passar batida no screen reader. Isso acontece muito com animações (conteúdos escondidos) e eventos que não são nativos do elemento, como tentar utilizar onClick em um parágrafo.