Aprendendo a Programar

Capítulo X
Uma web mais inteligente
 Comunicação assíncrona
• Pensem em duas pessoas que estão uma ao lado da outra, falando a mesma
língua e respondendo às perguntas da outra, em tempo real. Por outro lado,
imaginem uma pessoa, há centos de anos, enviando uma carta para uma outra
que mora a centos ou milhares de quilômetros de distância.
• No primeiro dos casos, como ambas as pessoas estão batendo papo
simultaneamente, realizam a mesma tarefa de comunicação, ao mesmo tempo.
Mas, no segundo caso, a primeira pessoa escreve a carta, a envia e continua com
sua vida. A segunda pessoa, um tempo depois, receberá a carta e interromperá
suas tarefas em algum momento para responder e continuar a comunicação.
• O segundo caso é o que se chama comunicação assíncrona, na qual as duas
partes se comunicam de maneira diferida no tempo, ou seja, quando não estão
conectadas ao mesmo tempo. Isso acontece com o correio eletrônico ou com os
fóruns, nos quais uma pessoa deixa uma mensagem e, em seguida, algum outro
usuário responde essa mensagem.
 Comunicação assíncrona
• Em computação, a comunicação assíncrona ou não bloqueante é
uma forma de processamento que permite continuar executando
programas antes de a transmissão e recepção das respostas
concluírem.
• O envio de informações entre dois subsistemas é muito mais
devagar que o processamento de dados dentro de um mesmo
sistema. Por isso, se esperarmos que uma comunicação conclua
antes de continuar com o restante do programa, provavelmente
deixaremos muitos recursos do computador sem usar. Por isso
utilizamos a comunicação assíncrona, na qual ficam bloqueados
somente os processos que requerem a conclusão da comunicação,
enquanto o restante do processamento continua em andamento.
 Melhora de interfaces assincronicamente
• Uma das coisas mais interessantes que podemos fazer ao programar
assincronicamente é dividir nossas interfaces em pequenas partes que,
graças ao tipo de programação que estamos aprendendo, podem se
atualizar sem necessidade de carregar toda a página novamente.
• Por exemplo, se entrarmos em Outlook.com para checar nossos correios
eletrônicos e selecionamos algum dos correios da coluna esquerda,
veremos que não carrega toda a página novamente para exibir seu
conteúdo. Há alguns anos, quando as tecnologias que utilizaremos ainda
não tinham sido desenvolvidas, as interfaces se atualizavam
constantemente. Isso era muito cansativo porque a velocidade da
conexão à Internet era, também, muito lenta . Hoje, as velocidades são
mais rápidas, e as partes atualizadas (e, portanto, as informações
descarregadas) são somente uma parte da tela. Isso faz com que nossa
experiência seja mais amigável.
 AJAX (ou AJAJ)
• Na atualidade, os aplicativos web podem enviar dados para um servidor, e recuperar
dados dele, de maneira assíncrona (em segundo plano), sem interferir com a
visualização e com o comportamento da página. Os dados podem ser recuperados
mediante um tipo de dado chamado XMLHttpRequest, o qual veremos em detalhe.
Embora seu nome, não precisa utilizar XML, uma linguagem utilizada principalmente
para transmitir informações, mas utiliza JSON (um outro tipo de linguagem para
comunicação) e nem sempre as comunicações são 100% assíncronas.
• Para realizar este tipo de comunicação na web que atualize uma parte das interfaces,
solemos utilizar Ajax (ou AJAJ no caso de utilizar JSON), a qual não é só uma
tecnologia, mas um grupo de tecnologias. HTML e CSS podem ser utilizadas em
combinação para armar as interfaces e seus designs. Com Javascript pode acessar o
DOM (ou seja, as informações relativas a como a interface HTML foi armada), para
alterá-la dinamicamente e permitir que o usuário interaja com as informações
apresentadas. JavaScript e o objeto XMLHttpRequest oferecem um método para
intercâmbio de dados de maneira assíncrona entre o navegador e o servidor, para
evitar cargas de uma página completa.
 O DOM
• Falei muito rápido? O DOM é uma convenção padrão que permite
representar e interagir com elementos de HTML, XML ou outras
linguagens. Se eu tiver um título com o tag H1 em um HTML, o DOM
me permite acessá-lo enquanto executo meu sistema, e posso alterá-
lo, se precisar. Assim, quando eu receber uma interação do usuário
em minha interface, mediante AJAX ou AJAJ, envio informações para
o servidor e exibo minha interface sem alterações. Quando eu
receber a resposta a minha comunicação, acesso o DOM e peço que
altere a parte do HTML que precisar alterar. Por exemplo, no caso de
nosso correio, peço ao servidor que me envie informações relativas
ao mail selecionado na coluna da esquerda e minha interface
permanece sem alterações até o conteúdo do correio ser devolvido, e
atualizo somente a seção da direita, onde são exibidos os correios.
 Exemplo básico
<!DOCTYPE html>
<html><head>
<script>
function showHint(str)
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
</script></head>
<body>
<h3>Começar a digitar um nome</h3>
<form action=""> Nome: <input type="text" id="txt1" onkeyup="showHint(this.value)" /></form>
<p>Sugestão: <span id="txtHint"></span></p>
</body></html>
 Exemplo básico
• Cada vez que o usuário pressionar uma tecla,
então a função showHint de Javascript será
chamada, incluindo o valor digitado, para ela o
enviar para a página gethint.asp, e obter assim
uma sugestão de nome em caso de tiver.
Sempre que a largura da cadeia que está no
campo para inserir texto txt1 seja maior de 0, as
informações serão enviadas para sua avaliação.
• O conteúdo do arquivo gethint.asp é o seguinte:
 getHint.asp
<%
response.expires=-1
dim a(30)
a(1)="Ana"
a(2)="Bernarda"
a(3)="Clara"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Ivone"
a(8)="Helena"
a(9)="Júlia"
a(10)="Joana"
a(11)="Karen"
a(12)="Lisa"
a(13)="Nina"
a(14)="Letícia"
a(15)="Paula"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cíntia"
a(19)="Délia"
a(20)="Inti"
a(21)="Elisa"
a(22)="Dora"
a(23)="Solange"
a(24)="Yanina"
a(25)="Violeta"
a(26)="Sabrina"
a(27)="Elisabeth"
a(28)="Hélia"
a(29)="Marta"
a(30)="Eugênia"
 getHint.asp
'receber o parâmetro que me enviaram do HTML
q=ucase(request.querystring("q"))

'buscar as sugestões sempre que a largura de q>0

if len(q)>0 then
  hint=""
  for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if

Retornar "sem sugestão" se não se encontraram coincidências

'ou retornar o valor encontrado
if hint="" then
  response.write("sem sugestões")
else
  response.write(hint)
end if
%>
 AJAX com arquivo remoto
• No exemplo anterior, realizamos um chamado assíncrono a
um arquivo ASP, o qual retornou um dado a exibir. Em vez
disso, poderíamos requerer, a um aplicativo remoto, um
arquivo em formato XML ou JSON com uma variedade de
dados e, em seguida, interpretá-los e exibi-los em nosso
programa. Isso é feito, por exemplo, pelos aplicativos de
nossos computadores que exibem o clima. Conectam-se a
sites, como accuweather.com, e trazem arquivos XML ou
JSON. Simplesmente, substituímos a função showHint em
nosso HTML original por outra que podamos chamar e que
se encarregue de trazer as informações. Por exemplo:
 AJAX com arquivo remoto
function loadXMLDoc(url)
{
var xmlhttp;
var txt,xx,x,i;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr>";
      xx=x[i].getElementsByTagName("TITLE");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td>&nbsp;</td>";
          }
        }
   
 AJAX com arquivo remoto
    xx=x[i].getElementsByTagName("ARTIST");
      {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td>&nbsp;</td>";
          }
        }
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
 }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
• Essa função receberá, como parâmetro, o endereço onde procurar o arquivo XML e, depois, percorrerá o arquivo
XML e armará uma tabela em nossa interface gráfica, com todas as informações recuperadas.
 XML
• Mostramos como, mediante AJAX (que significa Asynchronous
Javascript and XML) podemos atualizar partes da interface do
usuário, sem necessidade de bloquear os demais processos.
Isso foi realizado mediante XML, mas mencionamos que há
também uma linguagem para a comunicação chamada JSON. O
que são essas duas linguagens que mencionamos?
• A XML, como a HTML, é uma linguagem de marcação que
define um conjunto de regras para a codificação de
documentos em um formato que é legível para nós e para o
computador. Os objetivos do design XML focalizam a
simplicidade, generalidade e facilidade de uso, através da
Internet.
 XML
• Um arquivo XML tem um cabeçalho assim:
<?xml version="1.0" encoding="UTF-8"?>

• Segue uma estrutura que permite aninhamentos. Ai temos sempre um tag ou marca de apertura e um tag de
fechamento, da forma a seguir:
<pessoa>
<nome>João</nome>
<sobrenome>Da Silva</sobrenome>
<documento>23456789</documento>
<carro>
<marca>Ford</marca>
<modelo>Escort</modelo>
<fabricado>2006</fabricado>
</carro>
</pessoa>

• XML é tão simples como vimos e, nas comunicações entre subsistemas, se documenta qual será o formato do
arquivo. Em nosso aplicativo, só teremos que contemplar que as informações que tentemos ler sejam as que nos
fornece o outro sistema.
 JSON
• Por outra parte, JSON, que significa Javascript
Object Notation, é também um padrão aberto
que permite transmitir pares de dados que
contêm o nome do atributo e o valor que
corresponder.
• Para transmitir os dados de uma pessoa
através de um arquivo .json, deveremos
escrever alguma coisa como essa:
 JSON
{
"nome": "João",
"sobrenome": "Da Silva",
"idade": 25,
"altura_cm": 167.64,
"endereço": {
"rua": "Rua sete de Abril",
"cidade": "São Paulo",
"estado": "SP",
"codigoendereçopostal": " 01043000"
},
"telefone": [
{ "tipo": "casa", "numero": "11 2165-1234" },
{ "tipo": "fax", "numero": "11 2165-5678" },
]
} 
• Para ler o dado, utilizaremos funções fornecidas por bibliotecas de Javascript do tipo:

var p = JSON.parse(contact);
 AJAJ
• O seguinte código de JavaScript é só um exemplo de um cliente que utiliza XMLHttpRequest para solicitar dados
em formato JSON a partir de um servidor. (A programação do lado do servidor é omitida, mas consideramos que
deve ser configurado para solicitações de serviço à URL que contém uma cadeia com formato JSON).
 
var my_JSON_object;
var http_request = new XMLHttpRequest();
http_request.open("GET", url, true);
http_request.onreadystatechange = function () {
var done = 4, ok = 200;
if (http_request.readyState === done && http_request.status === ok) {
my_JSON_object = JSON.parse('''http_request.responseText''');
}
};
http_request.send(null);
 
• O objeto XMLHTTPRequest é um tipo de dado que permite fazer pedidos a um servidor através da Internet (e
receber as respostas) de objetos de comunicação que podem ser XML, JSON, HTML, arquivo de texto ou outra
variedade.
 Processos batch
• O processamento batch é a execução de uma série
de programas ("trabalhos") em um computador,
sem intervenção manual.
• Os trabalhos se estabelecerão de maneira tal de
poder executá-los até o final sem interação humana.
Todos os parâmetros de entrada estão pré-definidos
pelos scripts ou programas que desenvolvemos,
informações enviadas no início da execução,
arquivos ou a própria linguagem de controle de
trabalhos.
 Processos batch
• Assim, poderíamos ter um programa no servidor, calculando constantemente qual
será o clima da semana próxima, ou escutando em uma porta do servidor os pedidos
dos computadores dos usuários que precisam das informações e enviando-as
mediante XML ou JSON para ser consumida corretamente. Esses processos não são
controlados diretamente por qualquer usuário mediante uma interface do usuário.
Pelo contrário, depois de serem postos em execução, eles completarão seu trabalho
até sua conclusão ou sua interrupção.
• Há formas diferentes de realizar um processo batch. Alguns deles envolvem a geração
de um programa e a notificação ao sistema operacional de que ele é uma tarefa que
deve ser executada a cada certo tempo, ou somente em momentos determinados.
• Uma outra forma é a através de nosso programa, como parte dele, o qual se executará
enquanto continuamos com outras tarefas. Para tanto, os passos em ASP.NET são:
– Adicionar um elemento a HttpRuntime.Cache com um vencimento fixo, no início de nosso
código.
– Quando o cachê expirar, realizar o trabalho, como WebRequest ou de outra maneira.
– Adicionar novamente o elemento ao cachê, com um vencimento fixo.
 Processo batch - exemplo
private static CacheItemRemovedCallback OnCacheRemove = null; 
protected void Application_Start(object sender, EventArgs e)
{
AddTask("Fazeralgumacoisa",60)
}
 
private void AddTask(string name, int seconds)
{
OnCacheRemove = new CacheItemRemovedCallback(CacheItemRemoved);
HttpRuntime.Cache.Insert(name, seconds, null,
DateTime.Now.AddSeconds(seconds), Cache.NoSlidingExpiration,
CacheItemPriority.NotRemovable, OnCacheRemove);
}
 
public void CacheItemRemoved(string k, object v, CacheItemRemovedReason r)
{
AddTask(k, Convert.ToInt32(v));
}
 Processo batch - exemplo
• Esse código executa-se cada 60 segundos, e
executa nossas tarefas. No entanto, é provável
que não seja a melhor das opções devido ao
uso não ótimo dos recursos, em especial, da
memória cachê (uma das memórias do
computador).
• Há soluções diferentes que excedem o escopo
deste curso, mas recomendamos pesquisar.
• http://msdn.microsoft.com/en-us/magazine/cc
163854.aspx