O Objeto Session armazena informações a respeito da sessão. Um dos principais usos para o objeto session é armazenar e recuperar valores de atributos, a fim de transmitir as informações específicas de usuários entre as páginas.
No exemploSession01 do capítulo 8 do livro de treinamento iremos criar as seguintes telas abaixo:
AJAX = Asynchronous JavaScript and XML (JavaScript e XML Assíncrono) AJAX ficou popular com o Google em 2005 com o Google Suggest. Essa ferramenta do Google, usa o XMLHttpRequest para criar uma interface web muito dinâmica da seguinte forma: quando você começa a escrever na caixa de busca do Google, o Javascript envia o que foi escrito para um servidor e o servidor retorna uma lista de sugestões. Nem mesmo o Google, nem muito menos a Adaptive Path, inventaram o Ajax, que na verdade não possui nenhum proprietário. James Garret também não criou o Ajax, apenas criou uma abreviação, um "apelido", para a junção de novas tecnologias para facilitar a troca de informações entre seus amigos e clientes desenvolvedores. O que ocorre normalmente é que enquanto o servidor está processando as informações, o usuário não pode fazer nada além de esperar pela resposta. O AJAX faz o processamento assíncrono, diminuindo esse tempo de resposta entre servidor e usuário. No processamento síncrono, existe a espera do término de uma atividade para iniciar outra. Já no assíncrono (papel do ajax) as atividades podem ser executadas enquanto a primeira ainda está sendo processada. O objeto XMLHttpRequest presente no Javascript é a principal ferramenta utilizada pelo AJAX para determinar a comunicação assíncrona com o servidor.
A ferramenta mais importante quando utilizamos o AJAX é o Objeto XMLHttpRequest. Este apresenta 3 propriedades:
AJAX é uma abreviação para Asynchronous JavaScript and XML (JavaScript e XML Assíncrono). Não se trata de uma nova tecnologia, ao contrário do que parece ser, trata-se de uma forma de juntar as tecnologias já existentes.
O termo AJAX foi utilizado pela primeira vez por Jesse James Garrett em seu artigo “AJAX: A New Approach to Web Applications” (Ajax: Uma nova Aproximação para Aplicações Web) em 18 de Fevereiro de 2005. Esse termo é considerado o caminho inicial para quem pretende ingressar nos conhecimentos sobre AJAX.
No entanto, essa forma de juntar as tecnologias já utilizadas veio antes mesmo da criação do termo AJAX. Tal forma já era utilizada pelo Google, pioneiro nessa nova maneira de aplicação web. Não só o Google como a Adaptive Path, empresa americana, especializada em Web e em ferramentas e consultorias para tornar a experiência do usuário ao acessar um site ou aplicação Web mais agradável.
Nem mesmo o Google, nem muito menos a Adaptive Path, inventaram o Ajax, que na verdade não possui nenhum proprietário. James Garret também não criou o Ajax, apenas criou uma abreviação, um "apelido", para a junção de novas tecnologias para facilitar a troca de informações entre seus amigos e clientes desenvolvedores.
Logo depois do artigo de James Garret e os diversos exemplos passados pelo Google a respeito da junção de novas tecnologias, tais como: GMail, Google Suggest e Google Maps, a técnica por trás do Ajax ganhou força por todo o mundo e graças a isso, vemos novas aplicações,que anteriormente, eram impossíveis de ser implementadas na web.
COMO FUNCIONA
Uma aplicação Desktop possui uma riqueza de interfaces e tempos de resposta que estavam fora do alcance de uma aplicação Web, pela sua própria natureza de funcionamento. O Ajax entra em cena para quebrar esta barreira e abrir as portas de novas possibilidades para as aplicações Web [GARRET, 2005].
Para isso, o Ajax utiliza dos seguintes procedimentos:
* usa XHTML e CSS (Cascading Style Sheets) para camada de apresentação personalizada;
* usa DOM (Modelo de Objeto de Documento) para dinamismo e interatividade na interface gráfica;
* usa XML XSLT para troca e manipulação de dados;
* usa o objeto XMLHttpRequest para recuperação assíncrona de dados;
* usa Javascript para juntar todas as partes.
Normalmente, o modelo clássico de uma aplicação web, funciona da seguinte maneira:
* o usuário realiza uma ação na interface (como exemplo, o clique em um botão). Com isso uma requisição é enviada do HTTP de volta para o servidor web;
* com isso, ocorre a execução, por parte do servidor, tal como uma consulta a uma base de dados ou até mesmo um cálculo;
* após essa execução, o servidor retorna para o cliente uma resposta em HTML, a qual é interpretada pelo browser.
O que ocorre normalmente é que enquanto o servidor está processando as informações, o usuário não pode fazer nada além de esperar pela resposta. O AJAX faz o processamento assíncrono, diminuindo esse tempo de resposta entre servidor e usuário.
No processamento síncrono, existe a espera do término de uma atividade para iniciar outra. Já no assíncrono (papel do ajax) as atividades podem ser executadas enquanto a primeira ainda está sendo processada.
1) Ajax é uma nova tecnologia criada pelo James Garret no dia 18 de Fevereiro de 2005.
Antes de aprender o ajax, é necessário que você tenha o conhecimento básico de: HTML/XHTML, JAVASCRIPT e um pouco de PHP.
Não há nada de novo para aprender, o AJAX usa tecnologias já existentes. Tecnologias, essas que são usadas há muito tempo por vários desenvolvedores, como dito anteriormente.
Pedidos do HTTP do AJAX
Normalmente, em um código de Javascript, se você quer alguma informação de uma base de dados ou até mesmo de um arquivo de algum servidor, você terá que utilizar um GET ou POST do HTML. Para que seja feito isso, o usuário terá que clicar no botão "Submit" para enviar ou pegar a informação, esperar o sevidor responder para só então, uma página ser carregada com os resultados desejados pelo usuário.
Com o servidor retornando uma nova página cada vez que o usuário utiliza o "Submit", faz com que, tradicionais aplicações web execute a ação lentamente, tornando o processo não muito amigável com o usuário.
Com o AJAX, seu Javascript comunica-se direto com o servidor através do objeto do próprio Javascript XMLHttpRequest.
Com o pedido HTTP, a página web pode fazer um pedido e obter a resposta do servidor web sem mesmo recarregar a pagina. O usuário permanecerá na mesma página.
O Objeto XMLHttpRequest
Com o XMLHttpRequest, o desenvolvedor pode atualizar a página, com dados do servidor, mesmo depois dela ter sido carregada.
AJAX ficou popular com o Google em 2005 com o Google Suggest. Essa ferramenta do Google, usa o XMLHttpRequest para criar uma interface web muito dinâmica da seguinte forma: quando você começa a escrever na caixa de busca do Google, o Javascript envia o que foi escrito para um servidor e o servidor retorna uma lista de sugestões.
O objeto XMLHttpRequest é suportado na Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.
Exemplos em AJAX
Para entendermos como o AJAX funciona, vamos criar uma pequena aplicação AJAX.
Primeiro vamos fazer um formulário HMTL padrão com dois campos: Nome e Hora. Feito isso, salve o arquivo criado como "Ajax.htm".
Ex.1:
<html>
<body>
<form name = "Formulario">
Nome: <input type = "text" name = "NomeUsuario" /> Hora: <input type = "text" name = "hora" />
</form>
</body>
</html>
Seu browser suporta AJAX?
A chave do AJAX é o objeto XMLHttpRequest. No entanto, diferentes browsers utilizam diferentes métodos para cria-lo.
A Internet Explorer utiliza o ActiveXObject. Já os demais browsers utilizam o XMLHttpRequest, objeto este presente no Javascript.
Para criar esse objeto, em acordo com os diferentes browsers, vamos utilizar o "try and cash" do Javascript. Para isso, vamos dá uma melhorada no arquivo "Ajax.htm" criado anteriormente.
Ex.2:
<html>
<body>
<script type="text/javascript">
function FuncaoAjax()
{
var xmlHttp;
try
{
// Opera 8.0+, Safari,Firefox
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Seu browser não suporta AJAX!");
return false;
}
}
}
}
</script>
<form name="Formulario">
Nome: <input type = "text" name = "NomeUsuario" />
Hora: <input type = "text" name = "hora" />
</form>
</body>
</html>
Vamos explicar agora o que foi feito nesse código:
-em primeiro lugar, em cada "try" atribuímos à variável xmlHttp criada para armazenar o objeto XMLHttpRequest;
-depois disso, tentamos criar o objeto "xmlHttp = new XMLHttpRequest()" para os browsers: Opera 8.0+, Safari ou Firefox. Caso haja alguma falha para criar esse objeto nesses browsers, tentamos criar na Internet Explorer com "xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")" que será compatível com a Internet Explorer 6.0+. Se mesmo assim falhar a tentativa da criação, utilizamos o xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") que dará certo, se utilizarmos o Explorer 5.5+;
-Se, ainda depois de todas essas tentativas, não der certo, é porque o usuário utiliza um browser muito ultrapassado. Logo, mostra-se uma mensagem de erro, falando que o browser não suporta o AJAX.
Obs1: É claro que os browser modernos utilizados atualmente suportam essa tecnologia fazendo com que a parte do código "alert("Seu browser não suporta AJAX!");" dificilmente será mostrada.
Obs2: Esse codigo, pode parecer longo e complexo, no entanto, ele será usado diversas vezes quando você quiser criar o objeto XMLHttpRequest. Logo, basta utilizar esse mesmo código utilizando o "copiar e colar" toda vez que você quiser criar esse objeto, pois esse código será compatível com qualquer browser popular, tais como: Internet Explorer, Opera, Firefox e Safari.
Exercícios:
2) O objeto XMLHttpRequest presente no Javascript é a principal ferramenta utilizada pelo AJAX para determinar a comunicação assíncrona com o servidor.
Objeto XMLHttpRequest Cont.
Antes de continuarmos a falar sobre esse objeto e de enviar determinados dados, utilizando o mesmo, você tem que saber três propriedades do XMLHttpRequest.
Primeira propriedade
Depois de pedir ao servidor, será necessário uma função que possa receber um dado que é retornado pelo servidor. A propriedade "onreadystatechange" armazena a funcão que irá processar a resposta vinda do servidor.
Ex.:
xmlHttp.onreadystatechange=function()
{
// Algum codigo
}
Segunda propriedade
A propriedade "readyState" segura o status da resposta do servidor. Cada vez que essa propriedade muda, ocorre a execução da propriedade onreadystatechange.
Listaremos agora alguns valores que podem ser usado nessa propriedade:
Estado '0' => O pedido não é inicializado Estado '1' => Houve um set up do pedido Estado '2' => O pedido foi enviado Estado '3' => O pedido está em processo Estado '4' => O pedido está completo
Exemplo dessa propriedade:
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
// Apanha o dado da resposta do servidor
}
}
Obs.: Veja que a propriedade "readyState" está sendo usada em conjunto com a onreadystatechange, para saber se o dado vindo do servidor é completo.
Terceira propriedade
Os dados enviados para o servidor pode ser recuperado utilizando a propriedade "responseText". No código feito no início da lição, vamos escolher um valor para o campo "sobrenome" igual a "responseText".
Para enviarmos um pedido para o servidor, é necessário que utilizemos dois métodos: open() e o send(). O primeiro método recebe três argumentos.
O primeiro argumento define qual método devemos usar quando formos enviar o pedido (GET ou POST). O segundo argumento especifica a URL da parte do programa do servidor. E o terceiro argumento especifica que o pedido deve ser assíncrono.
O método "send()" envia o pedido para o servidor.
O código para esses métodos seria o seguinte:
xmlHttp.open("GET","hora.php",true);
xmlHttp.send(null);
Obs: Suponha que o arquivo HTML e PHP esteja no mesmo diretório.
Agora, é necessário saber quando vamos utilizar a função AJAX, ou seja, quando ela será executada. Deixaremos essa função rodando "por trás da cena" no momento que o usuário estiver digitando no campo nome do nosso código criado no início do curso.
Criaremos agora um script que mostrará a hora atual do sevidor. A propriedadade responseText, explicada anteriormente irá armazenar os dados enviados pelo servidor. Vamos mostrar agora o tempo atual. O código hora.php seria esse:
<?php echo date('h:i:s A');
?>
Basicamente é isso que precisamos saber sobre o Ajax, a próxima lição será a montagem de algum código mais complexo, utilizando como exemplo o Javascript.
Exercícios:
3) A ferramenta mais importante quando utilizamos o AJAX é o Objeto XMLHttpRequest. Este apresenta 3 propriedades:
O que faremos a seguir é o seguinte: Pediremos para o usuário digitar alguma letra em um campo. Com isso ele terá como resposta algumas sugestões do que ele esteja querendo. No Exemplo, usaremos nome de música. O usuário digitará uma letra no campo "Banda" e embaixo será listado algumas opções.
Antes de prosseguirmos com a lição, vamos mostrar algumas funções que serão úteis para a aplicação de Ajax em um código de Javascript.
Começaremos com a função: "MostraOpcao()". Tal função é em Javascript, onde o lugar dela é na tag "<head></head>" do html.
Como pode ser observado, trata-se de um código html com um campo de entrada chamado "txt1".
O parágrafo (<p> </p>) abaixo é um span chamado "txthint". Esse span é utilizado para guardar dados recuperados do servidor web.
Quando o usuário insere um dado, a função "MostraOpcao" é executada. A execução dessa função é provocada pelo evento onkeyup. Isto é, toda vez que o usuário escreve alguma coisa no campo "Banda", a função "MostraOpcao" é chamada.
function MostraOpcao(str) {
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Seu Browser não suporta AJAX!");
return;
}
var url="Opcao.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
A função é executada toda vez que uma letra (caractere) é escrito no campo "Banda:", Caso o campo for vazio (str == 0) a função simplesmente limpa o índice guardado dos dados recuperados do servidor web do txtHint.
Seguindo a condição imposta para que ocorra a execução da função (str > 0), mostraremos agora o que a função faz:
1) define a url que será enviada para o servidor;
2) adiciona um parâmetro "q" para a url com o índice do campo de entrada;
3) adiciona um número aleatório para impedir que o usuário use um arquivo fechado;
4) cria um objeto XMLHTTP, e diz para o objeto executar uma função chamada stateChanged quando uma mudança é provocada;
5) abre uma URL, esta função possui três parâmetros:
- método: indica se a passagem de parâmetros para a URL será via POST ou GET, neste caso é o GET;
- URL: endereço que será acessado;
- assíncrono: se verdadeiro, executa assíncrono, ou seja, não espera pelo retorno da URL para continuar executando o script. Se falso o browser ficará “travado” enquanto o script é executado.
6) envia uma resposta HTTP para o servidor.
Como já foi mencionado, a função "GetXmlHttpObject()" é utilizada para testar se o Objeto xmlHttp poderá ser criado em diferentes browsers.
Código da função "GetXmlHttpObject()"
function GetXmlHttpObject() { var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
A função stateChange() também está presente nesse código, sua utilização se dá quando ocorre alguma mudança no estado do objeto xmlhttp e o código dela é esse:
Obs: Quando o estado muda para quatro (Pedido completo) o índice do que está armazenado é preenchido pela propriedade responseText, que como foi mecionado na lição anterior, tem como função recuperar os dados enviados para o servidor.
//confere se as opções do array têm tamanho q>0 if (strlen($q) > 0) {
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($opcao=="")
{
$opcao=$a[$i];
}
else
{
$opcao=$opcao." , ".$a[$i];
}
}
}
}
// Se nenhuma opção for encontrada ou algo foi digitado de forma incorreta // Ocorrerá a mensagem "sem sugestões". if ($opcao== "") {$OpcaoEscolhida="Sem sugestões!"; } else { $OpcaoEscolhida=$opcao; }
//saida da resposta echo $OpcaoEscolhida; ?>
Com isso encerramos o curso de AJAX. Agora basta usar a criatividade e criar diversas páginas otimizidas e com rápida resposta. Aprofunde mais utilizando PHP, ASP, CSS, entre outras linguagens para aplicação web.
Exercício:
5) Ao fazer uma página web, para deixá-la melhor, com rápida resposta, entre servidor e usuário, utilizamos o javacript para essa finalidade. Pois, essa linguagem de aplicação web trabalha assincronamente na relação servidor/usuário.
a) verdadeiro
b) falso
Gabaritos: 1) B 2) B 3) verdadeiro 4) Verdadeiro 5) B
