Interfaces - Desempenho

Unidade 3 - Interfaces - Desempenho

3.1 Conceitos
Quando pensamos no desenvolvimento de interfaces para WeB, não podemos deixar
de pensar em questões de performance. Mesmo com o aumento constante da
velocidade da difusão da banda larga, a Internet ainda possui um volume significativo
de usuários que ainda possuem conexões de baixa performance.
Alem disso, o uso cada vez mais comum dos meios digitais para comercio eletrônico,
tem elevado o grau de importância dado a performance. Neste âmbito, apenas alguns
segundos podem ser cruciais para a definição da concretização ou não de um volume
maior de vendas.
Existem várias tecnologias que se popularizaram para este tipo de aplicação, dentre
elas podemos citar .net, php, jsp, javascript, XML, mas cada uma delas tem sua
participação no desenvolvimento de sistemas para web.
A combinação de linguagens mais popular é a chamada Ajax, da qual veremos mais
detalhes nas próximas unidades.

3.2 O que é Ajax?

Ao contrário do que muitos pensam Ajax não é uma nova tecnologia, e sim a junção
de tecnologias existentes no âmbito web que unidas melhoram tanto a performance
quanto a sistemática de navegação em website nos quesitos de usabilidade e
funcionalidade.
AJAX é a abreviação de Assyncronous Javascript and XML, ou seja, o acesso a dados
de forma Assíncrona no servidor utilizando-se linguagem Javascript no navegador e
arquivos XML gerados por alguma linguagem dinâmica no servidor.
Arquivos XML (eXtensible Markup Language) tem-se tornado populares na difusão e
compartilhamento de dados e acessibilidade para dispositivos moveis por exemplo.
Veremos em breve o formato e a maneira que estes arquivos são interpretados.
O surgimento desta tecnologia é tratado junto com uma serie de outras modificações e
padronizações na web que formam o paradigma da Web 2.0, onde conceitos que
visam o conforto do usuário e a facilidades na navegação imperam junto com padrões
já estabelecidos com o w3c.
Veja abaixo um diagrama que expressa um pouco melhor este conceito:

1
Interfaces - Desempenho

Como sabemos devido ao Javascript ser uma linguagem Client Side não é possível
realizar a leitura de um arquivo texto comum pelo Javascript, pelo menos de forma que
este reflita as informações e comportamentos retornados pelo servidor, desta maneira
ficamos apegados à uma forma de poder executar um arquivo dinâmico do outro lado,
sem que este seja exibido, ou sequer acessado diretamente pelo cliente.
A forma que estes dados serão retornados será em XML ou através de uma String que
será tratada por nós no Javascript.
Exemplos simples de aplicações com Ajax, são simples formulários web que não
necessitam ser recarregados para buscarem determinadas informações do servidor,
como o caso de o usuário selecionar um estado e logo após aparecem as opções de
seleção de cidades do respectivo estado selecionado no processo anterior. Desta
forma ganhamos tempo de navegação e satisfação do usuário que está navegando
em nosso site.
Veja abaixo alguns outros exemplos práticos:
Carrinho de compras: utilizando-se da manipulação em DOM o usuário pode arrastar
e soltar produtos diretamente dentro do carrinho, sem a necessidade de esperar por
inúmeras requisições da pagina ao servidor.
Formulários com grande número de campos: possibilidade de selecionar os
campos que serão preenchidos e estes já auto formularem os dados disponíveis em
outros elementos do formulário, sem o recarregamento da página.
Auto completar: recurso já disponível em aplicativos que são executados no desktop
também pode ser implementado em um site da internet, sugerindo palavras conforme
os caracteres que o usuário digita no teclado em determinado campo do formulário.

2
Interfaces - Desempenho

3.3 Os quatro princípios do AJAX:

3.3.1 O navegador hospeda uma aplicação e não o
conteúdo:
Em uma aplicação web clássica o navegador faz o papel de uma espécie de terminal
burro. Ele não sabe absolutamente nada do que o usuário esta realmente realizando
em suas ações conseqüentes. Sendo que inúmeras solicitações devem ser feitas ao
servidor pela sessão do usuário para que o conteúdo do site seja atualizado.

Quando a sessão do usuário é iniciada no servidor, o site simplesmente carrega uma

interface com o que foi retornado, sendo que qualquer outra interação do usuário será
processada no lado do servidor, e novamente o site será recarregado para que estas
sejam atualizadas (exemplo clássico de comercio eletrônico).
Já em uma aplicação AJAX a parte lógica da operação é movida para o navegador
(lado do cliente), como mostrado abaixo:

3
Interfaces - Desempenho

Uma aplicação AJAX bem desenvolvida elimina diversas etapas de requisições ao

servidor, deixando a aplicação agir de forma mais inteligente, e ganhando-se assim
um considerável tempo de navegação no site. Veja o gráfico abaixo:

Portanto, vamos a partir de agora abordar um novo conceito no processo de

requisição de dados, e dividir melhor as tarefas, bem vindo ao AJAX.

4
Interfaces - Desempenho

3.4 Como começar?

Um dos maiores empecilhos da utilização do Javascript sempre foi a questão de
compatibilidade entre os navegadores em uso, atualmente temos divergências entre
os métodos de acessibilidade dos navegadores mais populares (Mozilla Firefox e
Internet Explorer).
Para isso existem maneiras de solicitar as requisições identificando qual o navegador
que está sendo usado pelo usuário no momento de acesso ao site.
Utilizaremos um método conector conhecido como Requisitor XML via HTTP. Para
acessarmos este elemento criaremos uma função que simplesmente realizará este
processo. O navegador Microsoft utiliza um componente adjacente acessado por
controle ActiveXObject.

3.5 Como testar o navegador?

Sabemos que no Javascript se alguma instrução ou erro de sintaxe ocorre durante o
processo muitas etapas são abortadas e muitas vezes um erro é gerado e retornado
na tela do navegador, para o cliente isso é sinônimo de site mal estruturado e
desenvolvido, surge então a possibilidade de tratarmos estes erros e retornarmos algo
mais Suva no momento de tratar este problema.

Tentativa e retorno (TRY and CATCH)

Veja o exemplo a seguir:

var s;
var a = new Array("maçã", "banana")
s = a[3].substring(0,4);
document.write(s);

O exemplo acima se executado irá retornar um erro dizendo que o vetor não possui a
posição solicitada, e que não é possível executar a função substring no elemento
desejado.

Caso quiséssemos executar este mesmo processo de forma que caso algo de errado
seja retornado um erro coerente para o usuário poderíamos usar o TRY and CATCH.

5
Interfaces - Desempenho

Veja a atualização do código abaixo:

var s;
var a = new Array("maçã", "banana")

try{
s = a[3].substring(0,4);
}catch(e){
s = “Ocorreu um erro no script!”;
}
document.write(s);

O TRY and CATCH é um teste seqüencial que sempre retorna um valor e que visa
tratar um erro que possa interromper a execução do script de forma grosseira.

A sintaxe é dada da seguinte maneira:

try {
bloco com código normal mas que pode gerar erros
} catch(exceção) {
bloco com código capaz de fazer a recuperação dos
erros
}
Ou em pseudocódigo:
tentar {
bloco com código normal mas que pode gerar erros
} retorna(exceção) {
bloco com código capaz de fazer a recuperação dos
erros
}

NOTA: Apesar de estas instruções não fazerem parte do padrão ECMAScript, elas são
suportadas por todos os browsers importantes e são de grande utilidade para a
construção de código robusto.
Em qual circunstância será usado o TRY and CATCH?

A acessibilidade ao XML varia de navegador para navegador, sendo que se tentarmos

acessá-lo de uma forma não disponível no navegador do usuário uma série de erros
será retornada.

6
Interfaces - Desempenho

3.6 Requisitando em diversos browsers:

Utilizando-se da função TRY and CATCH criaremos uma função especifica para
utilizarmos o AJAX no navegador do usuário, está usará os seguintes métodos para
acessar estes componentes:
Internet Explorer:
Active XObject(“Msxml2.XMLHTTP”):
AtiveXObject(“Microsoft.XMLHTTP”);
Firefox, Opera, Saffari, e outros:
XMLHttpRequest;

Onde:
XMLHTTP: Objeto Javascript que torna possível a comunicação assíncrona com o
servidor, sem a necessidade de recarregara página por completo. Este objeto fazer
parte da especificação DOM nível 3.
Veja um exemplo da função abaixo:
function criaxmlhttp(){
try{
xmlhttp = new XMLHttpRequest();
}catch(e){
try{
xmlhttp = new
ActiveXObject("Microsoft.XMLHTTP");
}catch(e1){
try{
xmlhttp = new
ActiveXObject("Msxml2.XMLHTTP");
}catch(e2){
xmlhttp = false;
document.write("Navegador não da
suporte a Ajax!");
}
}
}
}

7
Interfaces - Desempenho

Com esta função iremos ao longo do curso prosseguir com a consulta assíncrona de
dados no servidor, sendo que como podemos analisar em ultimo caso é retornado um
erro informado que o navegador do usuário não é compatível com AJAX.

8
Interfaces - Desempenho

3.7 Enviando a requisição - parâmetros do envio

da requisição
Após termos estabelecido qual o objeto de conexão será utilizado pelo cliente para a
conexão assíncrona, deveremos então criar uma nova função que será responsável
por requisitar determinado arquivo dinâmico no servidor e realizar assim a solicitação e
futuramente a leitura dos dados retornados pelo servidor.

Para realizar a requisição utilizaremos do método OPEN no qual serão passados três
parâmetros:

objeto.open(MÉTODO, URL, ASSINCRONA?);

Onde:
Objeto: objeto XmlHTTP gerado pela função anteriormente vista.
Método: GET ou POST.
Assíncrona: valor booleano no qual TRUE representa que a conexão é assíncrona, e
necessita de um retorno dado pelo servidor, e FALSE caso contrário.

Vejamos então como ficará a nossa função juntamente de alguns outros métodos
essenciais no Ajax:

function acessa(elemento,valor){
criaxmlhttp();
xmlhttp.open("GET",”arquivo01.php,true);
xmlhttp.send(null);
}

Como podemos observar, primeiramente é chamada a função “criaxmlhttp()”, a qual é

responsável por criar um objeto “xmlhttp” no qual logo após utilizamos em conjunto
com o método OPEN. A função acima demonstra a conexão a um arquivo em PHP
chamado arquivo01.php.

Logo após é chamado o método “send” o qual podemos retornar algum tipo de valor
para o servidor, mas neste caso simplesmente retornamos como NULL significando
assim que não há mais nada a ser realizado no processo.

9
Interfaces - Desempenho

3.7.1 Analisando os 5 estados da requisição

Após termos efetuado a etapa acima nossa função ainda não está concluída, após o
documento dinâmico ter sido solicitado ao servidor, este passar por 5 estados de
requisição, os quais podem ser observados a seguir e devem ser analisados em nosso
algoritmo conforme o tipo de implementação que estamos realizando:
Estados:
0: Não inicializado (unitialized)
1: Carregando (loading)
2: Carregado (loaded)
3: Interativo (interactive)
4: Concluído (completed)
Dependendo da funcionalidade do seu script você utilizará testes para verificar qual
tipo de estado em que se encontra a leitura do documento no lado do servidor para o
lado do cliente, sendo que para executar este processo precisaremos chamar dois
outros métodos em nossa função:

onreadystatechange: método que avalia a situação do documento carregado, e em

cada mudança do estado de leitura realiza determinados processos impostos pelo
algoritmo.
objeto.readyState: método que retorna o estado de leitura do documento o qual foi
solicitada a execução e carregamento.

Logo, devemos então incorporar estes métodos em nossa função, ficando a mesma da
seguinte maneira:

function acessa(){
criaxmlhttp();
xmlhttp.open("GET","arquivo01.php,true);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4)
alert(‘Dados Carregados!’);
}
xmlhttp.send(null);
}

Observe que neste caso só nos interessa o estado de leitura “4”, ou seja, estamos
executando determinada ação somente quando o servidor tiver retornado por completo
os dados do documento dinâmico e sua execução estiver sido completada do outro
lado.

10
Interfaces - Desempenho

Laboratório:
Tendo em vista o que foi ensinado até o momento já temos idéia de como são
analisadas as requisições em Ajax de uma forma macro.
Elabore um script aproveitando as funções vistas anteriormente de forma que seja
solicitada a execução de um script dinâmico em no servidor e enquanto este não
estiver completamente carregado seja exibida em uma DIV a mensagem: “Aguarde:
carregando...”

3.8 Verificando os dados retornados pelo

servidor:
Os dados que foram lidos pelo Javascript na conexão assíncrona são retornados pelo
servidor de duas formas:

Formato Texto (simples);

Formato XML (mais organizado, porem mais complexo);

Como teremos um capitulo introdutório ao XML, iremos primeiramente tratar os dados

recebidos em forma de texto, mas para isso teremos que implementar um script
simples que fará o papel do nosso já mencionado “arquivo01.php” responsável por
retornar os dados solicitados ao servidor.
Crie um novo arquivo e salve-o no mesmo diretório que o arquivo HTML e JS que
estamos utilizando. Nomeie-o como “arquivo01.php”.
Este arquivo conterá simplesmente a seguinte linha:

<?php
echo “Curso de AJAX”;
?>

3.9 Retornos em texto simples:

Para realizamos a leitura dos dados passados do servidor para o cliente no caso
simples, ou seja, formato texto teremos de criar uma terceira função responsável por
coletar e interpretar esses dados, dando assim o tratamento necessário a eles
conforme a nossa necessidade.
Quando tratamos de dados em formato texto temos um método chamado
“responseText” onde ficam armazenados todos os dados que foram retornados do
servidor no momento de execução do script solicitado.

11
Interfaces - Desempenho

Crie então uma nova função a qual chamaremos de monta(), ficando ela como
mostrado abaixo:

function monta(){
var dados = xmlhttp.responseText;
}

Como você pode observar é criada uma variável “dados” na qual o método
responseText é chamado em conjunto com o objeto já criado anteriormente xmlhttp.
Todos os dados retornados pelo servidor estão agora armazenados dentro desta
variável, podendo ser tratados como uma variável simples Javascript.
Criaremos no mesmo documento uma DIV com o nome de CONTEUDO e injetaremos
dentro dela o conteúdo retornado pelo servidor:

function monta(){
var dados = xmlhttp.responseText;
document.getElementById(“CONTEUDO”).innerHTML = dados;
}

Desta forma deveremos simplesmente chamar esta função dentro da nossa já

implementada função acessa(), ficando a mesma disponibilizada da seguinte forma:

function acessa(){
criaxmlhttp();
xmlhttp.open("GET","arquivo01.php”,true);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
monta();
else
document.getElementById(“CONTEUDO”).innerHTML =
"Carregando...";
}
xmlhttp.send(null);
}

12
Interfaces - Desempenho

ATENÇÃO: nunca se esqueça de finalizar a função acessa() com o método

xmlhttp.send, pois caso contrário o servidor fica aguardando uma finalização da
conexão assíncrona e não retorna os dados para o browser.

DICA: da mesma maneira que você solicita a execução de um arquivo ao servidor,

você pode passar para eles variáveis que serão recebidas do outro lado pelo método
que você as enviou, veja o exemplo:

xmlhttp.open(“GET”,”arquivo01.php?id_pessoa=”+15,true);

Só não se esqueça de setar o método correto acima para que o script interprete e
receba as variáveis enviadas pelo Javascript no momento de execução.

Exemplo:
Utilizando um pouco mais de manipulação de elementos em DOM, realize o seguinte
exercício:
Monte um documento em HTML que possua dois componentes do tipo SELECT em
um formulário, sendo que no primeiro serão listados alguns estados brasileiros e no
outro ao selecionar-se o estado serão apresentadas as respectivas cidades deste
estado, conforme mostrado na imagem abaixo:

Solução:
Para resolver este exercício você necessitará de 4 arquivos:
cidades.php: arquivo onde ficará o formulário HTML.

ajax01.js: Java script que será responsável pela execução assíncrona do arquivo
dinâmico no servidor e recuperação dos dados para o cliente.

ajax01.php: arquivo dinâmico que será executado pelo Ajax no servidor.

conexão.php: arquivo simples em php que simplesmente fará a conexão com o banco
de dados.

13
Interfaces - Desempenho

Primeiro crie as tabelas no banco de dados usando a seguinte query:

CREATE TABLE IF NOT EXISTS estados (
id_estado int(10) unsigned NOT NULL auto_increment,
sigla char(2) ,
nome varchar(50) ,
PRIMARY KEY (id_estado)
);
INSERT INTO estados VALUES("1", "RS", "Rio Grande do Sul");
INSERT INTO estados VALUES("2", "SC", "Santa Catarina");
INSERT INTO estados VALUES("4", "SP", "São Paulo");
INSERT INTO estados VALUES("5", "RJ", "Rio de Janeiro");

CREATE TABLE IF NOT EXISTS cidades (

id_cidade int(10) unsigned NOT NULL auto_increment,
id_estado int(10) unsigned ,
nome varchar(100) ,
PRIMARY KEY (id_cidade)
);
INSERT INTO cidades VALUES("1", "1", "Porto Alegre");
INSERT INTO cidades VALUES("2", "1", "Alvorada");
INSERT INTO cidades VALUES("3", "1", "Viamão");
INSERT INTO cidades VALUES("4", "2", "Sombrio");
INSERT INTO cidades VALUES("5", "2", "São João do Sul");
INSERT INTO cidades VALUES("6", "4", "São Paulo");
INSERT INTO cidades VALUES("7", "5", "Rio de Janeiro");

Agora que possuímos os dados que serão acessados no banco de dados, criamos o
arquivo de conexão com o banco:
CONEXAO.PHP

<?php
mysql_connect('localhost','root','') or die(mysql_error());
mysql_select_db('alfamidia');
?>
A seguir o arquivo CIDADES.PHP o qual será a interface para o usuário:

14
Interfaces - Desempenho

<?php
include('includes/conexao.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<script src="ajax01.js" type="text/javascript">
</script>
<title>Exercicio Ajax</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="400" border="0" cellspacing="2" cellpadding="2">
<tr>
<td colspan="2">Formul&aacute;rio:</td>
</tr>
<tr>
<td width="55">Estado:</td>
<td width="331">
<select name="estado" id="estado"
onchange="acessa('cidades',this.value);" >
<option value="00">Selecione</option>
<?php
$sql = "select * from estados order by nome";
$rs = mysql_query($sql) or die(mysql_error());
$total = mysql_num_rows($rs);
for($x = 0; $x < $total; $x++)
{
$id_estado = mysql_result($rs, $x, 'id_estado');
$nome = mysql_result($rs, $x, 'nome');
?>
<option value="<?php echo $id_estado; ?>"><?php echo $nome;
?></option>

15
Interfaces - Desempenho

<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Cidade:</td>
<td>
<select name="cidades" id="cidades">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>

Agora que possuímos o documento que será apresentado ao clientes, criaremos as

duas ultimas camadas restantes. O processo de leitura em Ajax consiste em
solicitarmos através de uma função em Java script que um arquivo em php seja
executado no servidor, iremos então através dessa execução enviarmos um valor
(id_estado) para o servidor e o mesmo executar uma query no banco de dados
retornando as cidades respectivas do estado selecionado.
AJAX01.PHP
<?php
include('conexao.php');

$id_estado = $_GET["id_estado"];

$sql = "select * from cidades where id_estado = $id_estado";

$rs = mysql_query($sql) or die(mysql_error());
$total = mysql_num_rows($rs);

$resultado = '';
for($x = 0; $x < $total; $x++){

16
Interfaces - Desempenho

$resultado .= utf8_encode(mysql_result($rs, $x, 'nome')) .

',';
}
echo $resultado;
?>
Observe que devido a codificação de caracteres é recomendável converter a string
enviada para utf8 antes de prosseguir com a operação.
Por fim, iremos montar o arquivo em Java script que realizará a requisição ao servidor:
AJAX01.JS
function criaxmlhttp(){
try{
xmlhttp = new XMLHttpRequest();
}catch(e){
try{
xmlhttp = new
ActiveXObject("Microsoft.XMLHTTP");
}catch(e1){
try{
xmlhttp = new
ActiveXObject("Msxml2.XMLHTTP");
}catch(e2){
xmlhttp = false;
document.write("Navegador não da suporte a
Ajax!");
}
}
}
}

function acessa(elemento,valor){
criaxmlhttp();
xmlhttp.open("GET","ajax01.php?id_estado="+valor,true);

xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
monta(elemento);
}else{

17
Interfaces - Desempenho

document.getElementById(elemento).innerHTML
="Carregando...";
}
}
xmlhttp.send(null);
}
function monta(elemento){
var dados = xmlhttp.responseText;
campo = document.getElementById(elemento);
campo.options.length = 0;

var dados_vet = dados.split(',');

for(i = 0; i < dados_vet.length-1; i++){
campo.options[i] = new Option(dados_vet[i]);
}
}
Devemos neste caso apenas dar uma atenção especial a função monta(), a qual foi
modificada para manipular via DOM as propriedades do componente SELECT do
formulário que montamos.
De qualquer forma a manipulação por texto é a mais simples e mais usada por Ajax
atualmente, sendo que devemos ter domínio e dar a devida importância a manipulação
de elementos do documento via DOM.

Laboratório:

1. Crie dois selects: O primeiro deve conter uma lista de tipos de filme que seja
carregada a partir de um banco de dados. Ao clicar duas vezes sobre o tipos
de filme o mesmo deve ser deslocado para o select 2.
2. Crie um select com uma lista de 3 páginas que ao ser alterado mudará o
conteúdo de uma div para a página montada com algum parâmetro.
3. Monte uma caixa de texto que pesquise o que for digitado e mostre o que for
encontrado em uma tabela em uma div logo abaixo(como um “auto-
completar”)
4. Crie uma lista de categorias de produtos que exiba em uma textarea a lista dos
produtos desta categoria.

18