Ajax (aquela maneira genial de atualizar conteúdo em uma página) tem sido a sensação nos últimos anos de desenvolvimento WEB. Lembro das minhas primeiras investidas na área em 2005, naquela época ainda um terreno desconhecido (pra mim) e bastante pedregoso. Anos mais tarde temos diversas ferramentas prontas e gratuitas para desenvolver tarefas em Ajax.
Mas nem só para atualizar conteúdo na página serve o famigerado recurso, pois Ajax é como um portal na quarta dimensão que pode ser aberto no browser e que permite tráfego de dados nas duas direções [servidor > cliente] e [cliente > servidor]. No presente artigo vamos tratar do último caso: “como enviar dados de um formulário para o servidor sem recarregar a página toda após o envio?”

Nas minhas primeiras empreitadas nesta área vi que o terreno era árduo e acabei desistindo, mas a biblioteca dojo oferece uma solução com estilo.

Se vc ainda não conhece a biblioteca Javascript Dojo, recomendo uma olhada no artigo “Como funciona a biblioteca Javascript Dojo”, será de grande valia

Um pouco de Teoria

Vejamos o que ocorre em uma situação de envio tradicional. Na figura 1, podemos identificar 2 arquivos principais, o da página index, ao qual foi incluso um formulário, e o arquivo que recebe os dados. Nestas circunstâncias o envio dos dados é definido simplesmente pelo atributo “action” da tag <form> e o método de envio (geralmente ”post”) é definido no atributo “method” da mesma tag. A tarefa é acionada quando o usuário clicar no botão definido pela tag <submit>.

No protocolo HTTP, o browser envia alguma informação ao servidor, e este precisa retornar uma resposta ao browser.

No momento do envio, a página toda sai de cena, e o browser envia uma requisição via HTTP ao servidor, para que o arquivo recebe_dados.php entre em ação.

Figura 1 - Envio de dados via post pelo método tradicional

Este arquivo efetua as tarefas subseqüentes como gravar as informações no Banco de Dados, e após envia um cabeçalho (header) ao browser, com uma diretiva para que o browser peça ao servidor novamente o carregamento de index.php. A URL desta diretiva pode conter uma variável com a resposta dizendo “Ok tudo ocorreu bem!”, ou “Heitaaa, deu problema!”.

Ex do código:

<?
//tarefas
…
//retorno
header(“location:index.php?resposta=”.$resposta);
?>

Bom, este é o cenário tradicional que todo WEB designer com experiência de formulários conhece.

A proposta deste post (aqui post significa artigo do blog hahaha), como dito anteriormente, é utilizar Ajax para que a página não saia de cena enquanto os dados são enviados para recebe_dados.php.

Tenha em mente que Ajax é um método de transferência de dados todo manipulado via Javascript.

A figura 2 ilustra o esquema que vamos utilizar com a API do Dojo, o xhrPost.

Figura 2 - Envio de dados com dojo xhrPost

Nesta figura procurei deixar claro que os dados contidos no Formulário agora pegam outro trajeto. Veja que agora, o xhrPost, dentro da própria página index.php é quem captura os dados contidos no formulário, e os envia para recebe_dados.php. Ele é uma espécie de agente atravessador que negocia a transferência dos dados, digamos… por debaixo dos panos, e ninguém vê que algo está indo para o servidor, pois index.php não sai de cena.

Assim, se faz necessário também uma modificação na forma do envio da resposta que recebe_dados.php deseja devolver a index.php. Veja que quem está em contado com o servidor neste momento não é o browser todo, mas apenas o objeto xhrPost, ele mesmo fica aguardando a resposta, a qual pode ser um outro HTML, ou um TEXTO qualquer. Mas não desejamos um simples texto, porém uma variável contendo um texto de resposta. Quando vc quer codificar variáveis com valores em um meio textual, geralmente se utiliza XML, JSON, CSV ou coisa parecida. Neste caso, o dojo oferece uma ferramenta simples para codificar as variáveis em JSON.

Quando o xhrPost recebe a resposta, ele a pode entregar para funções Javascript específicas que vão decodificar o resultado em JSON e por fim apresentar a mensagem na tela do usuário.

Enfim este é o efeito que desejamos. Vamos ás instruções?

Material necessário:

Básico:

1. Arquivo HTML com formulário básico ( index.php )
2. Arquivo para receber os dados e devolver uma resposta (recebe_dados.php)
3. Biblioteca Javascript Dojo (veja como instalar aqui mesmo no Ahã… Programando…:  instalacao-da-biblioteca-dojo)

Ferramentas pertencentes ao dojo:

1. dijit.dijit (layouts dojo)

2. dijit.form.Button (widget button)

3. dojo.parser (farejador que procura widgets no meio do HTML para ativar)

4. xhrPost (Api dojo para envio de dados via Ajax pelo método Post)

5. tundra.css (folha padrão da biblioteca dojo)

6. classe de conversão Json PHP (já vem de brinde com o Dojo)

7. alguns scripts adicionais pra organizar as coisas

Mãos á obra:

Nosso maior trabalho será com o arquivo index.php no qual precisamos adicionar as devidas funcionalidades do dojo.

Abaixo o código de index.php, desculpem a endentação que não é das melhores, por que foi adequada à largura disponível de área para textos do blog.

<?php
//charset
header(“Content-Type: text/html; charset=ISO-8859-1″,true);

//modifique aqui o caminho da url do dojo
//em seu servidor
$DOJO_URL=“http://localhost/dojo-release-1.3.0-src/”;

?>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
_<title>TESTE xhrPost</title>
_<link
__id=“themeStyles”
__rel=“stylesheet”
__href=“<?=$DOJO_URL;?>dijit/themes/tundra/tundra.css”>
_<script type=“text/javascript”
_________src=“<?=$DOJO_URL; ?>dojo/dojo.js”
_________djConfig=“isDebug:false, parseOnLoad: true”
_________charset=“utf-8″></script>
_<script type=“text/javascript” charset=“utf-8″>

__//carrega layer dijit para interfaces
__dojo.require(“dijit.dijit”);

__//botao do dojo p engatilhar o xhrPost
__dojo.require(“dijit.form.Button”);

__//varre o HTML em busca de widgets dojo__
__dojo.require(“dojo.parser”);

__//função [sendForm] para estabelecer o envio
__//dos dados via xhrPost. Esta função é executada
__//uma única vez quando a página é carregada, para
__//que seja estabelecida a comunicação entre o
__//FORM e o xhrPost, bem como colocar o gatilho
__//do xhrPost no botão “botao_submit_dojo” que é um
__//widget Dojo. Não funfa com botões tradicionais.

__function sendForm() {
___var button = dijit.byId(“botao_submit_dojo”);
___dojo.connect(
____button,
____“onClick”,
____function(event){
_____//para (stop) o evento submit original
_____event.preventDefault();
_____event.stopPropagation();
_____var deferred = dojo.xhrPost({
______//”form_teste” – id do formulário HTML
______//por este id o dojo localiza o FORM
______form: dojo.byId(“form_teste”),
______handleAs: “text”,
______load:resJsonOk,
______error:resJsonError
_____});//xhrPost
____});//function(event)
__}//function sendForm()

__//mensagem erro de comunicação com o servidor
__function resJsonError(data,ioArgs){
___var msg = ‘Nenhuma resposta do servidor.’;
___if(data)
____msg += ‘Ocorreram os seguintes erros em ‘;
____msg += ‘<b>recebe_dados.php:</b><br> ‘ + data;
___dojo.byId(“ct_msgs”).innerHTML = msg;

__}//function resJsonError(…)
__//recepção da MSG de retorno OK, recebe o conteúdo
__//JSON devolvido do recebe_dados.php, e extrai as
__//variáveis (status e msg) com seus respectivos valores

__function resJsonOk(data,ioArgs) {
___if(data){
____var d = dojo.fromJson(data),
____conteudo_msg = “STATUS: ["+d.status+"] <br>”;
____conteudo_msg += d.msg + “<br>”;
____dojo.byId(“ct_msgs”).innerHTML = conteudo_msg;
___}//if
__}//function resJsonOk(…)

__//executa sendForm quando a página for carregada
___dojo.addOnLoad(sendForm);
_</script>
</head>
<body class=“tundra”>
_<div id=“ct_msgs”></div>
_<div id=“ct_geral”>
__<!–Abaixo um formulário simplório com… –>
__<!–as configurações tradicionais –>
__<form id=“form_teste” method=“post”
___action=“recebe_dados.php”>
__ <!–Tags de entrada de dados… –>
__ <!–também tradicionais –>
___<label>Nome:</label>&nbsp;
___<input type=“text” name=“txt_nome” />&nbsp;
___<label>Endere&ccedil;o:</label>&nbsp;
___<input type=“text” name=“txt_endereco” />&nbsp;
___<!–botão especial, que é um WIDGET dojo –>
___<button dojoType=“dijit.form.Button”
____id=“submitButton”>Enviar</button>
__</form>
_</div>
</body>
</html>

Abaixo o código para recebe_dados.php que será utilizado em nosso teste. O código está bem comentado, dispensando maiores… comentários hehehe.

<?php

//endereço dojo no File System
$DFS=“c:/apache2.2/htdocs/dojo-release-1.3.0-src”;

//classe JSON PHP do dojo
require($DFS.“/dojo/tests/resources/JSON.php”);

/*
* Neste espaço poderiam haver tarefas para
* salvar os dados em BD
*
*/

//monta uma string com os dados recebidos
$dr =“Dados recebidos:”;
$dr.=” ['nome': ".$_POST["txt_nome"].“, “;
$dr.=“‘endere&ccedil;o’: “.$_POST["txt_endereco"];
$dr.=“]<br>”;

//Prepara a resposta de retorno em JSON, para
//cada variável a + adicionar um item no array
//com o nome da variável e seu respectivo valor

$ar = array(’status’ => “ok”,
____________‘msg’ => $dr);

//cria o objeto manipulador de JSON
$json = new Services_JSON();

//gera uma string com o conteúdo do vetor
//codificado em JSON
echo $json->encode($ar);
?>

Podemos observar que recebe_dados.php, efetua a simples tarefa de receber os dados enviados, e devolvê-los através de variáveis codificadas em Json. É claro que recebe_dados.php poderia efetuar muitas outras tarefas, como por exemplo: verificar a validade dos dados recebidos, gravá-los no banco de dados, analisar o status da gravação no banco e gerar uma resposta e devolver. Porém vamos primar pela simplicidade por que o foco de nosso estudo é o funcionamento do xhrPost. Uma vez efetuadas as tarefas, o array PHP com as variáveis de resposta é lançado para o método encode do objeto $json, o qual retorna uma string JSON. Sempre que um browser roda um arquivo no servidor, e este possui um echo ou equivalente, uma strig de texto é devolvida para o browser automaticamente, e esta é exibida na tela. Porém em nosso caso o solicitante não foi diretamente o browser, porém o agente xhrPost que o fez enviando dados para o arquivo recebe_dados.php, naturalmente xhrPost aguarda alguma string de retorno vinda deste arquivo, pelo protocolo HTTP (veja novamente a figura 2). Juntando tudo isto, a resposta recebida virá em JSON, como no exemplo abaixo:

Variáveis:

“status” = ok,
“msg” = Dados recebidos: ['nome': Leonir, 'endereço': Rua Ah\u002e002e. Programando...!]

String Json:

{“status”:”ok”,”msg”:”Dados recebidos: ['nome': Leonir, 'endereço': Rua Ah\u002e002e. Programando...!]“}

Salve index.php, e recebe_dados.php na mesma pasta, de forma que vc possa acessar index.php através de seu servidor local. Aí é só colocar para rodar, estes códigos estão funcionando perfeitamente, foram testados, e copiados diretamente do editor PHP e Javascript que utilizo o APTANA.

Observação Importante: Ao copiar o código, e colar em seu editor substitua todas as aspas redigitando-as, ou através do search replace do editor. Isto devido ao fato que o wordpress substitui as aspas normais por umas mais bonitinhas porém inúteis, os interpretadores de código PHP e Javascript não as reconhecem.

É isto, experimente e deixe seu comentário.

Abraço e até o próximo post.

Como frequentemente tenho escrito algum post direcionado a utilização das ferramentas dojo, decidi criar um tutorial enxuto dedicado apenas a instalação e testes do dojo. Posso adiantar que trata-se de uma tarefa muito simples!

O Dojo é um conjunto de ferramentas javascript (dojo toolkit – por conveniência em português gosto de chamar biblioteca dojo) cheio de recursos para enriquecer a experiência do usuário. Sei que já falei sobre o assunto em outro post, mas vale a pena reforçar. Para encontrar o Dojo Toolkit acesse:

http://www.dojotoolkit.org/downloads

localize o link “All Downloads” e acesse-o, a seguir escolha (bem no topo) o link “Download latest Stable Releaze x.x.x” (atualmente na versão 1.3.0, a qual adotaremos neste exemplo). Neste ponto vc irá se deparar com uma página abarrotada de links para download, que são diversas versões da biblioteca em compactações tar, zip, com os arquivos fontes já compactados pelo shrinksafe, outras com toda a bilbioteca com os arquivos fontes (abertos e comentados). Nos interessam apenas 2 downloads, a saber:

dojo-release-1.3.0-src.zip – versão totalmente aberta, na qual vem exemplos junto, e vc pode acessar o código fonte. É a ideal para suas experiências na máquina local onde vc desenvolve seus projetos. Tamanho: 22 M.Bytes (43 MBytes descompactado)

dojo-release-1.3.0.zip – versão enxuta, sem exemplos e sem os comentários nos códigos. Ideal para fazer upload ao servidor. Tamanho: 3.4 MBytes ( 8,67  MBytes descompactado)

Baixe sua versão para desenvolvimento, e descompacte-a para a pasta do localhost (no meu servidor Apache a pasta fica em c:\Apache2.2\htdocs\, de forma que ao ter baixado e descompactado fica: C:\Apache2.2\htdocs\dojo-release-1.3.0-src.

Testando 1…2…3…

A partir daí vc pode se divertir com os exemplos que acompanham a biblioteca. É um show, tem até arte de computação gráfica direto no browser sem usar Flash. Puxa… se não fosse uma ferramenta gratuita eu cobraria do Dojo por frases como esta hahaha.

Para encontrar os exemplos, abra com o windows explorer a pasta raiz do dojo (dojo-release-1.3.0-src) e faça uma pesquisa por “test_*.html”. Uma lista com mais de 350 exemplos é apresentada nesta versão. Basta abrir o arquivo HTML.

Figura 1 - Pesquisando arquivos de teste

Para abrir um deles clique (ex: test_Tooltip.html) e abra com o browser, o endereço: file:///C:/Apache2.2/htdocs/dojo-release-1.3.0-src/dijit/tests/test_Tooltip.html será apresentado. Substitua o caminho até htdocs pelo endereço do servidor http://localhost/dojo-release-1.3.0-src/dijit/tests/test_Tooltip.html e pronto o exemplo estará rodando certinho.

]]> http://ahaprogramando.wordpress.com/2009/04/26/instalacao-da-biblioteca-dojo/feed/ 1 leonirz pesquisa_arquivos_test_dojo http://ahaprogramando.wordpress.com/2008/11/29/passar-array-de-php-para-javascript-e-de-javascript-para-php/ http://ahaprogramando.wordpress.com/2008/11/29/passar-array-de-php-para-javascript-e-de-javascript-para-php/#comments Sat, 29 Nov 2008 14:51:26 +0000 Leonir Zimmermann http://ahaprogramando.wordpress.com/?p=33 ]]>

Nenhum post deste blog fez tanto sucesso quanto: “Como passar valores do PHP para o Javascript e vice versa?”. Porém tenho recebido solicitações para informar como efetuar esta tarefa com um array de valores. Demorou mas a hora chegou!

Em primeiro lugar precisamos ter em mente que array consta de uma coleção de dados em uma única variável. E o acesso ao seu conteúdo é gerenciado pela ENGINE da linguagem, associando um endereço a cada item na memória do computador.  Não adianta em PHP por exemplo, dar um echo $array_dados e esperar que todas as posições desta variável sejam mostradas, pois estamos falando de uma variável complexa, que possui um endereço específico para cada informação nela contida. Neste caso, para ver o conteúdo da variável, ou se faz uso de uma tradicional varredura com looping’s, ou de um recurso muito útil para debug quando há arrays envolvidos, o print_r($array_dados).

Enviando um Array do PHP para um código JavaScript presente na página:

Não vou me deter aqui nos fundamentos sobre PHP e Javascript, já que este assunto foi exaustivamente abordado em outros posts. Todavia para quem deseja conhecer mais sobre o comportamento destas linguagens em servidores e browsers visite estes posts:

PHP ou Javascript? Qual a diferença?

Como passar valores do PHP para o Javascript e vice versa?

Continuando…

Não podemos esquecer portanto, que o trafego de dados via protocolo HTTP entre browser e servidor é sempre textual, e que enquanto o PHP está trabalhando no lado do servidor, o Javascript faz suas tarefas no cliente (browser). Logo se desejamos enviar o conteúdo de um array que está presente em um arquivo PHP, para um código em Javascript, este conteúdo precisa trafegar do servidor ao browser junto com o HTML e códigos javascript. Sendo assim é  necessário transformar o conteúdo deste array em uma string (lembre-se: via protocolo HTTP só trafega texto). Então, se o array possuir 10 itens endereçados de 0 a 9, basta construir uma string separando os elementos por algum caractere que nunca vá ser usado no conteúdo dos ítens. Por exemplo: se meu array tem 2 posições com o conteudo: 0=>“tic-tac”,1=>“bla-bla-bla”, fica claro que não convém criar uma string com os 2 elementos separando-os por ífem “-”. Geralmente os desenvolvedores usam vírgula com o fim de separar os elementos. Particularmente prefiro o caractere pipe “|”, devido ao fato que este não consta nas regras da língua portuguesa para qualquer função, ocasionando que não estará presente em textos normais. Assim o resultado da string com elementos delimitados para um array com o conteúdo de 2 itens (0=>“tic-tac”,1=>“bla-bla-bla”) seria transformado em uma simples string:
“tic-tac|bla-bla-bla”.

Ok, qual a melhor maneira de fazer isto ?

No manual do PHP encontramos:
implode
(PHP 4, PHP 5)

implode — Junta elementos de uma matriz em uma string

Descrição
string implode ( string $agrupador, array $elementos )

Retorna uma string contendo os elementos da matriz na mesma ordem com uma ligação entre cada elemento.

Beleza já sabemos como fazer o trabalho no PHP. Então mãos à obra: Suponhamos que nossa página pertence a uma loja (que por sinal oferece produtos bastante diversificados), e de alguma forma temos em PHP um array com a lista de produtos. E precisamos dispor esta lista em uma variável javascript, para que alguma tarefa seja feita em Javascript, poderia ser o preenchimento de um list por exemplo.

<?php
//array com a lista de produtos
$produtos = array(0 =>“relogio digital”,
1 =>“mouse”,
2 =>“arame para cerca”,
3 =>“bateria de celular”,
4 =>“doce de abobora”,
5 =>“tv de plasma”,
6 =>“pacote de pregos”,
7 =>“peneu de caminhao”,
8 =>“polvora”,
9 =>“prato de porcelana”);

//criando a string com a versátil função php implode
$string_array = implode(“|”, $produtos);
?>

A essa altura um simples echo $string_array mostraria o resultado. Agora precisamos fazer que a string seja recebida em uma variável javascript, muito simples, basta um <?php echo $string_array; ?> no meio do código Javascript. Ora, este é o mesmo método para enviar valores do PHP para o meio do HTML.

Depois disto esta string deve ser convertida em um array  Javascript. Uma consulta rápida:

Em JavaScript Bilbe 5th (Danny Goodman with Michael Morrison) encontramos a função:

string.split(“delimiterCharacter” [, limitInteger])
Returns: Array of delimited items.
Compatibility: WinIE4+, MacIE4+, NN3+, Moz1+, Safari1+, testei também no Chrome e funfa!!!

Aplicar é fácil (perceba que o código PHP de linhas atrás  e o que vem a seguir estão presentes no mesmo arquivo) :

<script>
//variáveis
var i, array_produtos, string_array;
//recebe a string com elementos separados, vindos do PHP
string_array = “<?php echo $string_array; ?>“;
//transforma esta string em um array próprio do Javascript
array_produtos = string_array.split(“|”);

//varre o array só pra mostrar que tá tudo ok
for (i in array_produtos)
alert(array_produtos[i]);

</script>

Uma beleza não? E vice-versa também é possível? Vejamos:

Agora se vc possui um array que está no código JavaScript e deseja enviar para o PHP a fins de salvamento em banco de dados e tal, segue a mesma forma: transformar array em string, e para envio segue a via ilustrada no post sobre troca de dados entre JavaScript e PHP.

Mais um Help na bíblia do Javascript:

array.join(separatorString)
Returns: String of entries from the array delimited by the separatorString value.
Compatibility: WinIE4+, MacIE4+, NN3+, Moz1+, Safari1+, no Chrome testei e tá blz!!

<form method=“post” action=“recebe.php” >
<input type=“hidden” id=”send_string_array” name=“send_string_array” value=“” />
<input type=“submit” value=“Enviar” />
</form>
<script>
document.getElementById(“send_string_array”).value = array_produtos.join(“|”);
</script>

Agora basta receber a string que será enviada via POST, e transformá-la em array:

No manual do PHP:

(PHP 4, PHP 5)

explode — Divide uma string em strings

Descrição
array explode ( string $separator, string $string [, int $limit] )

Retorna uma matriz de strings, cada uma como substring de string formada pela divisão dela a partir de fronteiras presentes nela separator. Se limit está definido, a matriz retornada conterá o máximo de limit elementos com o último elemento contendo o resto da string.

Note que o código a seguir está em um arquivo separado, destinado a receber dados enviados por um fomulário, ou seja este é o recebe.php:

<?

//transforma a string de itens separados em array
$array_produtos = explode(“|”, $_POST['send_string_array']);
//mostra o conteúdo do array
print_r($array_produtos);

?>

É isto, todo este código foi testado antes de escrever o POST.
Grande Abraço.

[15/01/2009 - Edição]  - Ao copiar trechos de código, dos posts do Ahã Programando, substitua todas as aspas redigitando-as. Pois o WordPress substitui as aspas originais por algumas que são inúteis em programação. E os testes acabam não funcionando, deixando os entusiastas da programação web frustrados.  Não desista! Tente novamente

Tenho estado um pouco afastado dos desenvolvimentos WEB, por que em fevereiro deste ano mudei o foco do meu trabalho ao entrar na área de TI de uma empresa, mas agora tenho um laboratório de experiências para incrementar e colocar coisinhas “Jasvascriptáveis”, trata-se da página www.ligazimmermann.com.br . Como o próprio nome pode informar, o intuito do site é ser um informativo sobre a liga da família Zimmermann. Ok continuando com WEB development… Se eu sonhasse a alguns anos atrás que um dia seria tão fácil colocar efeitos legais em um página de internet. Vibrava com o resultado de semanas de programação Javascript para adicionar um menu-pop up, ou fazer um sistema de ordenar fotos. Pois bem… hoje existe um recurso poderoso para fazer coisas “fantáhhhdicas” sem sequer escrever uma linha de Javascript. Volto (é claro…) a bater na tecla do Dojo, pois nesta semana adicionei na página de eventos (http://www.ligazimmermann.com.br/?imnu=2) do site uma galeria de fotos usando uma das ferramentas presentes no Dojo: o widget LightBox . LightBox é uma forma de apresentar imagens em um quadro modal, ou seja, ele toma conta de toda a tela do browser e não permite que as demais áreas do site estejam acessíveis, e já incorpora controles de avanço e retrocesso do grupo de imagens.

O efeito é legal, porém não é o que mais me impressiona, o que causa realmente impacto para o WEB designer é a facilidade de adicionar este recurso. Precisamos lembrar que o Dojo é uma biblioteca Javascript gratuíta que tem como principal vantagem não precisar programar recursos básicos. Basta configurar os requisitos mínimos e adicionar tag’s HTML marcadas como pertencentes a algum utilitário (widget) Dojo, e ele fará o restante do trabalho encima destas tags.

No caso em questão, eu já tinha efetuado todas as configurações para que funcionassem os “Tooltips” na página. E para adicionar o widget “LightBox” basicamente precisei incluir 2 linhas, uma invocando o arquivo: Javascript “dojox/image/Lightbox.js” e outra para adicionar o CSS que deixa no LightBox tudo em seu lugar: “dojox/image/resources/image.css”. Vamos ver aqui na íntegra todas as configurações que estão na página em questão.

Analisando os ítens da receita…

Na linha abaixo invoca o núcleo da biblioteca “dojo.js”, e configura pra não mostrar o debug na página (isDebug:false), e para que o Dojo procure por tag’s com Wigets ao carregar toda a página (parseOnLoad: true)

<script type=“text/javascript”
src=“/dojo-release-1.1.1/dojo/dojo.js”
djConfig=“isDebug:false, parseOnLoad: true”></script>

Agora devem ser especificadas configurações como os includes necessários e configuração da classe css que será utilizada, o Dojo possui algumas “skins” que vc pode escolher para modificar a aparência de seus widgets. No caso ficamos com “tundra”.

<script type=“text/javascript”>
//aplica classe CSS “tundra” na TAG body do site
dojo.addOnLoad(function(){dojo.addClass(dojo.body(),“tundra”);});
dojo.require(“dijit.Tooltip”);//include para o Tooltip
dojo.require(“dojo.parser”);//este deve estar sempre
</script>

E como estamos falando do LightBox, aqui se adiciona o javascript da biblioteca que é responsável pelo recurso:

<script type=“text/javascript”
src=“/dojo-release-1.1.1/dojox/image/Lightbox.js”></script>

No que tange a Javascript até aqui tá concluído, agora vamos aos arquivos css básicos da página mais os que que pertencem ao dojo. Ah e já falei sobre @import usado para linkar o arquivos css em outro artigo do Ahã… Programando…, é uma forma de carregar os arquivos CSS com um código mais limpo .

<style type=“text/css”>
@import url(“/css/style.css”);
@import url(“/dojo-release-1.1.1/dijit/themes/tundra/tundra.css”);
@import url(“/dojo-release-1.1.1/dojo/resources/dojo.css”);
@import url(“/dojo-release-1.1.1/dojox/image/resources/image.css”);
</style>

O último @import feito é para o CSS utilizado pelo widget LightBox.

Feitooo, agora temos todos os recursos prontos para serem utilizados, quantas linhas de código Javascript serão necessárias para adicionar as fotos? Nenhuma! Pera aê… não tem que criar os eventos onclick ou coisa parecida para navegar entre as fotos? Nope! Como escrevi em linhas atrás, o Dojo fará tudo por vc se ele encontrar um tag HTML que pertenca a um brinquedo dele (Widget). Assim fica fácil incluir quantas fotos forem necessárias e com um código HTML limpíssimo:

<a href=“fotos_ev2004/z2004f1.jpg”
dojoType=“dojox.image.Lightbox”
group=“group1″
title=“Entrada no Ginasi&atilde;o”>Foto 1</a>

Tudo explicadinho nos mínimos detalhes…

A tag <a> é básica para links, o atributo href de um link tradicional recebe o endereço URL para o qual vc quer apontar. Mas aqui o novo atributo: dojoType, define que esta tag <a> deixa de ser uma tag tradicional para se tornar um widget Dojo, que em nosso caso será o da classe “dojox.image.Lightbox“.

O atributo group serve para indicar que a foto representada pela tag <a> pertence a um grupo, de forma que todas as fotos que pertencem a este devem ser identificadas com o mesmo nome de grupo. Assim se existirem na página 20 fotos em 2 grupos, ou seja 10 fotos para cada grupo, o LightBox saberá que quando estiver navegando nas fotos do primeiro grupo não deverá invadir a lista de fotos do segundo grupo.

E por fim o atributo title onde deve ser especificado um comentário sobre a foto. Se quiser dá pra incrementar o visual e entre <a> e </a> colocar um <img> com um thumb da foto, fica massa!

É isso… se quiser ver o LlightBox funcionando visite o link: http://www.ligazimmermann.com.br/?imnu=2

Reforcei aqui a idéia de que não precisa nem programar para usar a maioria dos widgets Dojo, mas quero deixar claro que não ignoro o fato de que o Dojo ofereça suporte a programação de recursos avançados. O que é ótimo para quem quer tornar as coisas mais dinâmicas, tratando eventos, ligando widgets com outras funcionalidades… etc. Basta investigar e ver que o Dojo é forte nesta parte também, inclusive existe uma lista das classes da API Dojo que pode ser conhecida no link: http://api.dojotoolkit.org/jsdoc/dojo.

Abraço e até o próximo artigo!

[15/01/2009 - Edição problema grave no wordpress]  - Ao copiar trechos de código, dos posts do Ahã Programando, substitua todas as aspas redigitando-as. Pois o WordPress substitui as aspas originais por algumas que são inúteis em programação. E os testes acabam não funcionando, deixando os entusiastas da programação web frustrados.  Não desista! Tente novamente

Em primeiro lugar vc precisa sacar por que elas são necessárias. Quando um browser termina de carregar determinada página, a conexão entre ele e o servidor é desfeita. Não confunda conexão de internet com a conexão entre browser e servidor, esta última refere-se a comunicação entre eles.  Assim após o carregamento browser e servidor ficam separados, um não sabe o que o outro está fazendo. Então, quando vc solicitar outra página, o servidor não tem nem idéia mais do que vc fez na última conexão, pois para pedir esta nova página o browser se reconecta ao mesmo endereço do servidor e pede a outra página, detonando com a conexão assim que esta também carregar. Digo isto levando em consideração que as 2 páginas são do mesmo site e pertencem ao mesmo servidor.

A sessão não é uma coisa do PHP, mas do servidor. É uma área na memória do servidor que guarda o IP, da máquina que a acessou e qual browser que se conectou, a esta área de memória podem ser associadas outras informações que vc queira guardar, no estilo de variáveis. O PHP, é claro, possui uma ferramenta para manipular sessões do servidor. Assim, em um caso de login por exemplo, vc se loga e guarda numa sessão informações que indiquem aquele usuário está logado. Aí mesmo que a conexão seja desfeita, ao reconectar para carregar a próxima página, o servidor pode recorrer a sessão e ver que informações estão lá guardadas, como no caso, esta informação, pode dizer ao servidor: “sim ele está logado, e pode acessar esta página”.

Exemplo:

Para manipular sessoes no PHP:

arquivo1.php
<?
session_start();//inicializa o serviço da sessão

//cria uma variável do tipo sessão com a informação “sim”
$_SESSION['esta_logado'] = “sim”;
?>

arquivo2.php
<?
session_start();//inicializa o serviço da sessão
echo $_SESSION['esta_logado'];//vai imprimir: “sim”

?>
Isto gera a ilusão de que a variável “esta_logado” foi passada de uma página para a outra, porém ela foi buscada da sessão no servidor. Simples, fácil… mas uma ferramenta útil e poderosa!

Até a próxima!

Em perguntas que tenho recebido de leitores do Ahã… Programando… tenho percebido que alguns tem dificuldade de perceber a diferença de trabalho do PHP e do Javascript. Em linhas gerais quero tentar lançar alguma luz sobre o entendimento das funcionalidades destas ferramentas.

Em primeiro lugar vamos entender a internet:

O browser – Este tem as conexões com o servidor restritas ao momento de receber o conteúdo solicitado pelo usuário. Após a página ser carregada por completo a conexão é desfeita. Assim não há conhecimento por parte do servidor quanto ao que o usuário está fazendo com a página carregada no browser. E após o carregamento da página o servidor somente entrará em cena novamente quando o usuário clicar em um link, um botão de enviar ou coisa semelhante, aí novamente o browser irá localizar o servidor na web e solicitar a execução de algum serviço que traga outro conteúdo.

HTML – Hypertext Markup Language (linguagem de marcação de texto). Em sua essência o HTML é texto, só que com marcações denominadas TAG’s, delimitadas pelos caracteres “<” e “>”. Toda a página que for buscada no servidor deve trafegar pelo protocolo HTTP (Hypertext Transfer Protocol) que é o protocolo perfeito para transferência de HTML entre servidor e browser no cliente.

O interesse do browser por sua vez recai em interpretar estas tags, e classificar cada uma de acordo com sua serventia em um espaço reservado na memória do computador. Esta classificação se dá em estrutura de objetos. Nesta organização fica bem mais fácil de o browser “saber” o que é um botão, uma caixa de texto, saber dentro de quais tags estes componentes se encontram, monitorar seus eventos, renderizar os componentes na tela relacionando com CSS e tal.

Com o fim de que programadores WEB como nós pudéssemos acessar e manipular estes OBJETOS,  a netscape criou uma linguagem de script que por fim foi denominada Javascript (nossa amiga). Assim, no mesmo texto que provém do servidor e compõe o HTML podemos dar comandos Javascript para controlar os objetos criados a partir do HTML, e modificar a forma como estes são apresentados ou trabalhados. Vc já deve ter observado que Javascript não manipula as tags HTML como se fossem simples strings, mas objetos. Com propriedades, métodos e eventos.

Por exemplo, veja o HTML a seguir:

<html>
<body>
<div id=”coisa”></div>
</body>
</html>

Supondo que se queira adicionar um texto qualquer dentro da div coisa utilizando Javascript, utilizaríamos a seguinte sintaxe:

<script language=”javascript”>
var objeto_coisa = document.getElementById(“coisa”);
objeto_coisa.innerHTML = “um texto qualquer”;
</script>

Como isto funciona?

Primeiramente o objeto correspondente a id coisa precisa ser instanciado para uma variável através de getElementById. A instância (cópia, referência) é colocada na variável objeto_coisa. A partir desta variável podemos chamar métodos (funções) e propriedades (variáveis) do objeto. No caso apenas um texto foi lançado na propriedade innerHTML (Html interno) da tag referida pela variável objeto_coisa. Isto não modificou o HTML original colocando o texto no meio da tag. Mas modificou o objeto da div coisa que está na memória, e fez com que o browser apresentasse na tela o texto que foi atribuído para coisa.

Este teste pode ser reproduzido em sua máquina com a simples cópia dos 2 trechos de código anteriores, e a seguir colando em um arquvo “.html” e testar, eu testei e funciona hehehe.

E o PHP como funciona?

Já o PHP é executado no lado servidor. Este geralmente é utilizado para criar ou complementar o HTML que é enviado do servidor para o BROWSER de forma dinâmica. E no caso do PHP, como sua única função é criar o HTML sem monitorar eventos, ele trata o HTML puramente como string. Ou seja, ao utilizar um echo, ele está apenas acrescentando algo que será enviado através do protocolo HTTP para o browser. E é isto. Ao digitar uma url como: http://pagina.com.br/lista.php no browser, este receberá apenas texto (seja HTML, Javascript, CSS…). Ninguém jamais viu código PHP no fonte de uma página, pois este apenas é interpretado no servidor, e se não houver echo nada virá do servidor para o browser.

Veja como ficaria o problema anterior resolvido com PHP:

<html>
<body>
<div id=”coisa”><? echo “um texto qualquer”; ?></div>
</body>
</html>

Se o código HTML + PHP acima fosse acessado pelo browser, a única coisa que este receberia constaria do HTML já preenchido pela tarefa em PHP que foi interpretada e executada pelo servidor, assim:

<html>
<body>
<div id=”coisa”>um texto qualquer</div>
</body>
</html>

Em resumo:

Javascript:

1 – É interpretado e executado pelo browser, não pelo servidor.
2 – Não trata o HTML como string, mas cada tag individualmente como um objeto que pode possuir métodos, propriedades (ou atributos) e eventos.

É recomendado para tratar de assuntos que não devam consultar o servidor, mas que possam ser executados diretamente no browser sem perda de tempo, e também no caso de tratamento de eventos (onclick por exemplo).

PHP

1 – É executado no servidor, e nada “sabe” do que está acontecendo no browser. Somente responde quando o usuário solicitar através de links, botões, ou códigos AJAX que efetuem chamadas para tarefas no servidor.
2 – Trata o HTML puramente como string (texto).

É recomendado para fazer tarefas como buscar dados em banco de dados e complementar ou gerar HTML encima destes dados, ou para diversas outras tarefas que possam ser melhor tratadas no servidor.

É preciso ter em mente também que, quando um usuário solicitar algo do servidor uma conexão do browser com o servidor será estabelecida, e assim que o browser receber todo o HTML referente a esta página, a conexão é desfeita. Por isso não há como o servidor saber o que o usuário está fazendo com a página que recebeu. Pois o servidor apenas recebe ordens do browser, não podendo fazer nada além do solicitado pelo usuário. O Javascrript tem contribuído para o enriquecimento das aplicações web, por que pode ficar o tempo todo executando rotinas no browser e estar por dentro do que o usuário está fazendo. Então o programador da página pode fazer com que uma função detecte as necessidades do usuário e faça requisições ao servidor em momentos diferentes dos tradicionais, e mais, pode fazer isto escondido sem recarregar toda a página. Aí entra o AJAX, que pode fazer uma solicitação para o servidor digamos por debaixo dos panos (sem que o usuário tenha clicado nos tradicionais botões ou links). Mas uma tarefa pode ser escrita em Javascript para por exemplo monitorar objetos que estejam sendo arrastados na tela (Drag and Drop) e a medida que isto aconteça enviar ou buscar informações no servidor via AJAX.

É isto… ahhh e se ainda não entende AJAX leia o post “Desmistificando o Temível Ajax”

Graças a Deus pela criatividade dos Web Designers programadores neste mundo! E principalmente por aqueles que criam códigos reutilizáveis e os compartilham gratuitamente. É o caso da biblioteca Javascript DOJO que vem com uma montanha de utilitários (widgets) para que os web designers criativos não precisem gastar dias ou meses programando para adicionar funcionalidades Javascript nos seus projetos WEB. Não vou usar minha capacidade de ignorância para transmitir a idéia de que exista apenas o DOJO com esta finalidade, sei que paralelamente estão em atividade as bibliotecas MochiKit, YUI, JQuery, EXT, GWT… Porém apenas posso comentar e dizer que é boa aquela que conheço e utilizo .

Legal… mas o que o dojo faz?

Como dito anteriormente o dojo traz um cargamaço de widget’s (utilitários de interface) e funcionalidades que podem ser facilmente adicionados às páginas HTML. O melhor de tudo, com uma dúzia de linhas de código Javascript você pode instalar um widget à página, com um código limpo, nada de misturanga de scripts e HTML. A figura abaixo mostra um exemplo de widget que gera um quadro que pode ter o conteúdo dividido por Abas. Uma boa parte destes recursos são úteis em ferramentas da área administrativa, ou para a implementação de WEB services.

No que tange a funcionalidades, tenho utilizado o serviço de ajax do DOJO, que funciona muito bem e é compatível com os browsers que aceitam objetos xmlHttpRequest. Em outra oportunidade poderemos ver como utilizá-lo, particularmente achei muito prático poder enviar dados via POST com o ajax do dojo. Se você ainda não conhece AJAX e seus benefícios visite nesta página o link: Desmistificando o temível AJAX!.

Usar o DOJO requer:

Download da biblioteca, existem várias opções  em http://dojotoolkit.org/downloads

As principais são a versão compacta, e a versão com os fontes (src). Sempre opto pela opção src, assim posso dar uma olhada nos fontes quando tenho dúvidas. Mas na hora de colocar no servidor, aí é claro que convém utilizar a versão compacta. Localize a última versão  em:

downloads > All downloads > Download latest Stable Release (1.2.3) >

dojo-release-1.2.3-src.zip  [versão com fontes]

dojo-release-1.2.3.zip [versão sem fontes]

Nos exemplos acima considerei a versão 1.2.3, quando for atualizado óbviamente constará diferente disso.

A biblioteca pode ser descompactada em qualquer diretório do computador. Para quem já tem servidor instalado na máquina, recomendo extrair para htdocs ou www.

Uma vez “downloadeado”, pode-se acessar diretamente nas pastas os diversos testes de exemplo que estão previamente preparados para experimentos iniciais de quem pretende utilizar a biblioteca. Tais exemplos estão dispostos em arquivos HTML e distribuídos em uma série de diretórios dentro da pasta principal que contém os arquivos do dojo, quando de-zipada. A maneira mais prática de encontrá-los é através de uma pesquisa pelo sistema de arquivos, solicitando apenas aqueles com extensão “.html”, e com nome iniciado por “test_”. Veja na figura 2 um exemplo de pesquisa executada no windows vista que retornou os arquivos desejados. No resultado desta pesquisa bastaria um clique duplo sobre o arquivo test_Calendar.html para abrir no browser o exemplo de uma interface de calendário muito amigável gerada pelo DOJO.

Estes exemplos não somente proporcionam uma clara visão do resultado como permitem que o usuário abra o código fonte para entender a estrutura HTML e Javascript da interface.

Na prática… ô parte boa!

Para nosso estudo de um widget vou escolher o arquivo de exemplo “test_Tooltip.html”. Tooltip é o utilitário usado para criar aqueles balões estilosos que descrevem algum objeto presente na página. Na figura 3 é mostrado um tooltip em ação que traz comentários sobre a caixa de texto #1. Infelizmente a seta do mouse não foi capturada no printscreen, mas ela estava posicionada sobre a caixa de texto à esquerda do balão.

Examinando detalhadamente o arquivo “test_Tooltip.html” vamos encontrar no cabeçalho o seguinte script:

<script type=”text/javascript” src=”../../dojo/dojo.js“
djConfig=”parseOnLoad: true, isDebug: false“></script>
<script type=”text/javascript” src=”_testCommon.js“></script>

<script type=”text/javascript“>
dojo.require(“dijit.Tooltip”);
dojo.require(“dojo.parser”);// find widgets

dojo.addOnLoad(function(){
console.log(“on load func”);
var tt = new dijit.Tooltip({label:”programmatically created tooltip”,
connectId:["programmaticTest"]});
console.log(“created”, tt, tt.id);
});
</script>

Passo a passo:

<script type=”text/javascript” src=”../../dojo/dojo.js“

Inicia pela referência ao arquivo que é o núcleo da referida biblioteca. Se dojo.js não for encontrado, os widgets não irão funcionar.

djConfig=”parseOnLoad: true, isDebug: false“></script>

O atributo djConfig recebe configurações de comportamento que definem como o dojo vai interpretar este arquivo. O primeiro parâmetro parseOnLoad que é setado como true, informa que o dojo precisa “farejar” o HTML em busca de widgets. Ou seja, quando a página for carregada o dojo irá varrer todo o HTML da página, e identificar quais tags lhe pertencem, quais são as que contém widgets dojo. As tags identificadas precisam ser trabalhadas dinamicamente para que o comportamento delas se altere segundo as definições para o widget nela contido. O segundo parâmetro isDebug, se for setado como true irá acrescentar um console de erros a página para identificar possíveis problemas com os widgets. Este console é precioso para quem estiver trabalhando com Internet Explorer, pois até a versão 7 do IE as informações sobre erros de Javascript são bastante incompletas. Antes de publicar a página não esqueça de desativar o console do dojo (isDebug:false), para evitar que ele fique aparecendo inconvenientemente ao público geral.

<script type=”text/javascript” src=”_testCommon.js“></script>
Aqui trata-se de um script específico para o teste do tooltip.

<script type=”text/javascript“>
dojo.require(“dijit.Tooltip”);
dojo.require(“dojo.parser”);// find widgets

Carregamento dinâmico das ferramentas da biblioteca: de fato apenas dojo.js é essencial em todas as tarefas baseadas nesta biblioteca. As demais podem ser carregadas dinamicamente de acordo com a necessidade através de dojo.require. Isto colabora com a leveza do carregamento da página toda. Assim, no caso acima estão sendo invocadas as ferramentas para tooltip, e o parser, que é o farejador de widgets no meio do HTML. Nas linhas anteriores, em djConfig=”parseOnLoad: true foi configurado para que o parser atue quando a página for carregada, agora a ferramenta parser está sendo carregada através de require. Se não for carregada os widgets não funcionam (não será possível encontrar os coelhos na toca sem o cão farejador).

Até aqui foram vistos carregamentos de ferramentas básicas e suas configurações, agora começa um pouco de ação:

dojo.addOnLoad(function(){
console.log(“on load func”);
var tt = new dijit.Tooltip({label:”programmatically created tooltip”,
connectId:["programmaticTest"]});
console.log(“created”, tt, tt.id);
});
</script>

Acima é criada uma função javascript, que será executada quando a página estiver toda carregada. Esta função cria dinamicamente um tooltip e informa no console se a criação foi bem sucedida. O mais interessante de tudo aqui, é a ferramenta dojo.addOnLoad.  Com ela pode-se criar qualquer função dentro de addOnLoad que precise ser executada quando a página for carregada. Experimente algo assim:

dojo.addOnLoad(function(){ alert(“oii”); });

Isto faria que alert(“oii”) fosse executado assim que a página terminasse de ser carregada.

Agora o HTML dos WIDGET’S:

<input type=”input” id=”id1″ value=”#1″>
<span dojoType=”dijit.Tooltip” connectId=”id1″>tooltip para a caixa 1</span>

A primeira tag “<input…” é uma tag normal que, por exemplo, pode ser a entrada de dados para um formulário, observe que esta input é identificada pelo id “id1″. Logo abaixo a tag “<span” também é uma tag normal html, porém neste caso foi acrescido a ela o atributo dojType, este atributo indica que esta tag contém um widget dojo. Assim quando o parser encontrar esta tag detectará que trata-se de um widget dojo, e o dojo tomará as devidas providências para que este widget funcione. Basicamente este widget providencia o tooltip para a tag input. O texto contido na tag span (“tooltip para a caixa 1″) é o texto que irá aparecer dentro do balão tooltip, quando o mouse estiver sobre a caixa de texto id1. Por que as duas tags estão ligadas pela referência no atributo connectId da tag span. É importante perceber que aqui, no meio do html não foi requerido nenhum script especial, pois o dojo já efetua todas as tarefas de montagem quando a página for carregada, e depois fica aguardando apenas que os eventos (click, mouseover…) aconteçam. Assim, se fossem atribuídos 10 tooltip’s para outras 10 tag’s input, nenhuma nova linha de javascript seria requerida para isto.

Bom, por hoje é só.

O termo AJAX não provém do latim “Acessarium Javascriptum Atloren Xmelum”, não, mas da expressão da língua inglesa “Asynchronous JavaScript And XML” ou Javascript e XML assíncronos.

Um parêntesis teórico:

Esta questão de atividade assíncrona está para Javascript assim com THREAD’S estão para JAVA. Ou seja, a execução assíncrona ocorre em um tempo diferente da execução do script original. De modo que, se no meio de um looping for chamada a execução de uma tarefa assíncrona, o programa não irá aguardar a conclusão desta tarefa para então passar ao próximo passo do looping. Assim ao concluir a execução de um looping de 10 iterações, em que todas executam uma nova tarefa assíncrona, a nona tarefa pode estar sendo aberta e a primeira não ter sido concluída ainda, mas a terceira tarefa já pode ter retornado um resultado.

O que realmente interessa, prática!

Vamos partir de um layour HTML ultra básico:

<div id=“geral”>
<div id=“coluna_menu”></div>
<div id=“coluna_principal”></div>
</div>

Para incluir dados dinamicamente via PHP poderíamos proceder da maneira tradicional:

<div id=“geral”>
<div id=“coluna_menu”>
<a href=“index.php?arquivo=lista.php”>
</div>
<div id=“coluna_principal”>
<!– assim ao clicar no menu recarrega a página incluindo o arquivo que deve ser mostrado –>
<?php include($_GET['arquivo']); ?>
</div>
</div>

Tudo certo até aqui?

Bom, existe uma maneira de se carregar um conteúdo para dentro da div “coluna_principal”, sem usar frames ou recarregar a página utilizando includes.

Trata-se da técnica entitulada de AJAX (Asynchronous JavaScript And XML). Serve basicamente para carregar dados (xml, html, texto) em uma página, abrindo um portal no “espaço tempo” do browser e indo buscar novo conteúdo no servidor, sem desfazer todo o HTML  que já tinha sido previamente carregado no browser, ao acessar a página.

Um parêntesis de programação javascript:

Em primeiro lugar, gostaria de explicar como funciona o atributo innerHTML do javascript. Atenção innerHTML não é AJAX. Serve apenas para alterar dinamicamente o HTML contido dentro de uma tag. É preciso ter em mente que o Javascript vê as tags do browser de uma maneira diferente do PHP. Em Javascript, todas as tags HTML podem ser referenciadas como um objeto (com métodos e atributos), ligado ao objeto principal document. Em PHP, porém, todas as tag’s são tratadas puramente como texto, basta fazer echo de alguma coisa no meio do html e tá realizado. Claro, isto por que o PHP faz a sua parte lá no servidor, e o servidor apenas tem interesse em fornecer TAG’s HTML, e não em interpretá-las. Já o Javascript, é  executado no browser, juntamente com o HTML. Logo, estando o HTML interpretado pelo browser, este HTML fica na memória do computador, e o browser não mais o enxerga como um texto, mas como objetos que tem propriedades e comportamentos. Por exemplo, um botão não pode ser visto como um texto, mas deve ser visto como um programa, um objeto que reage ao click do usuário. Continuando:

var container = document.getElementById(‘coluna_principal’);
//getElementById localiza um objeto no meio do html,
//pelo seu ID, e retorna uma referência para este objeto.

Agora, a variável container se tornou um objeto com referência para a tag “coluna_principal”. E ele tem propriedades que podem ser acessadas a partir desta variável. Tipo, poderíamos descobrir que tag é esta:

alert(container.tagName); //isto mostraria “div” , pois div é o nome da tag

//que é identificada pelo id “coluna_principal”.

Aqui é que entra o innerHTML.

container.innerHTML = “<br> oi <br><br><br><br> bla bla bla”;

//com isto o texto e o HTML entre aspas foram adicionados dentro da tag div com id “coluna_principal”.

Bom esta é a maneira de escrever um HTML novo dentro de uma tag já existente, de forma dinâmica (DHTML – Dynamic HTML).

Então… como o Ajax funciona?

Ajax nada mais é do que a técnica para carregar conteúdo no browser, que utiliza funções javascript para buscar dados de um arquivo presente no servidor. Esta tarefa é executada por um componente do browser (XMLHttpRequest), que pode ser acessado através de funções Javascript para buscar no servidor um novo HTML ou XML.

<script>
//Tenta criar o objeto xmlhttp responsável por buscar os dados no servidor, são necessárias
// 3 tentativas de criação do objeto por conta das discrepâncias de browsers microsoft
try {
xmlhttp = new XMLHttpRequest();
} catch(ee) {
try{
xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch(e) {
try{
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch(E) {
xmlhttp = false;
}
}
}


//a função de carregamento, recebe como parâmetro
//_idConainer – id da tag onde será escrito o novo HTML que será buscado no servidor
//_endereco – endereço da página que será buscada no servidor
function carrega(_idContainer, _endereco){

xmlhttp.open(“GET”,_endereco,true);
xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4){

//pega o resultado e filtra alguns caracteres absurdos
retorno=xmlhttp.responseText;
//tag_container contem a referencia da tag que vai receber
var tag_container = document.getElementById(_idContainer);
//escreve dentro da tag o novo HTML
tag_container.innerHTML=retorno; //olha o inner html aí

}
}
//Executa
xmlhttp.send(null)
}
</script>

Pronto! Lembra daquele trecho básico de html?

<div id=“geral”>
<div id=“coluna_menu”></div>
<div id=“coluna_principal”></div>
</div>
Para inserir um conteúdo HTML, no div de id “coluna_principal”, basta invocar a função carrega passando como parâmetro o id da div, e o endereço da página que contém os dados que devem ser carregados via AJAX. Ex:

<script>
carrega(‘coluna_principal’, ‘dados.php’);

// ou se for o caso, a url completa:
carrega(‘coluna_principal’, ‘http://www.minhapagina.com/dados.php’);
</script>

Quando carrega for chamado com os devidos parâmetros é que ocorre a tarefa de carregamento que se dá assincronamente, ou seja, não há como prever o tempo que levará para ela ser concluída, uma vez que este tempo depende de diversos fatores como: a velocidade da conexão de rede naquele momento, a quantidade de dados que serão carregados, a disponibilidade do servidor de atender etc…

E como fazer para um link ativar o carregamento de uma página usando AJAX?

<div id=“geral”>
<div id=“coluna_menu”><a href=“javascript:carrega(‘coluna_principal’, ‘dados.php’);”>acessar dados</a></div>
<div id=“coluna_principal”></div>
</div>
Bom, como podemos ver, AJAX nada mais é do que uma técnica de carregamento de dados. O exemplo acima funciona, porém por tratar-se de um código exemplar de extrema simplicidade, não pode ser utilizado para aplicações sérias. Nele faltam diversos recursos, que talvez em outra análise sobre AJAX possamos aprofundar.

[15/01/2009 - Edição problema grave no wordpress]  - Ao copiar trechos de código, dos posts do Ahã Programando, substitua todas as aspas redigitando-as. Pois o WordPress substitui as aspas originais por algumas que são inúteis em programação. E os testes acabam não funcionando, deixando os entusiastas da programação web frustrados.  Não desista! Tente novamente

Por hoje é só! E como prometido, quero dedicar este pequeno artigo à minha amiga Web Designer Cristina Otto, abração Cris!!

O que não pode ser ignorado no casamento de Javascript com PHP é que os dois estão rodando em extremos diferentes. Os scripts de Javascript com suas variáveis estão no browser, carregados juntamente com o HTML, e os scripts PHP terão executado suas tarefas do outro lado da WEB, lá no servidor. A unica via de comunicação entre eles são os textos (html, javascript…) que transitam no protocolo HTTP. Isto  um paradoxo, uma vez que você encontrará PHP, HTML e Javascript no mesmo arquivo index.php (por exemplo). Porém, como dito anteriormente, cada um, PHP e Javascript atua em um ambiente diferente.Vamos começar com a prática! … ou melhor…. um pouco mais de teoria:

Bom… não é possível fazer um <? echo… ?> dentro de um arquivo “.js”, porque isto só funciona dentro de um arquivo .php. Mas é perfeitamente possível um <? echo… ?> dentro de um arquivo “.php” da página (index.php por exemplo…) . Levemos em consideração que esta página também irá carregar arquivos “.js”. Aproveitando se desta aparente reunião, basta criar variáveis (javascript) globais, as quais podem ser denominadas “variáveis de ambiente”. Pois irão permitir o trânsito de informações do ambiente HTML+PHP para o âmbito do Javascript. Bla bla bla bla… esclarecimentos práticos por favor:

<script>
//para não criar muitas variáveis dispersas, é interessante criar um array de variáveis
var VARS_AMBIENTE = new Array();
//em nosso exemplo vamos preencher a variável de ambiente “caminho_servidor”
// a qual terá seu conteúdo fornecido por um echo PHP
VARS_AMBIENTE['caminho_servidor'] = <? echo $caminho_server; ?>;
</script>

É importante ter em mente que quando a página HTML + PHP for carregada no browser, o código acima será visto como:

<script>
var VARS_AMBIENTE = new Array();
VARS_AMBIENTE['caminho_servidor'] = “algum valor fornecido pelo echo do PHP lá no servidor…”;
</script>

Pois o PHP já terá feito seu trabalho no servidor quando a página for carregada no browser. E então o código do script que estiver no meio do HTML virá do servidor com a variável previamente preenchida.

Continuando a página index.php… agora basta carregar o script que deve ter alguma referência a VARS_AMBIENTE['caminho_servidor'] para receber o valor contido nesta variável:

<script src=“meuscript.js”></script>

Pronto! Qualquer código contido dentro de meuscript.js que faça referência a VARS_AMBIENTE['caminho_servidor'] terá acesso ao camino do servidor.

E o caminho inverso?

Já do javascript para o PHP, como cada um estará sendo interpretado em uma ponta diferente da web (Javascript – cliente / PHP – servidor), a única forma de enviar dados continua sendo através de tráfego pela rede. Nesta hora uma tag “mágica” pode ajudar:

<form …>

<input type=“hidden” id=“dados” name=“dados_enviar” value=“” />

</form>

<!– Observe que na tag input acima o atributo value foi deixado em branco. Naturalmente se nenhum dado for setado para este atributo, nenhuma informação será recebido no servidor ao executar submit deste formulário.–>

<script>

//aqui a input hidden de id=”dados” recebe um valor dinâmicamente
//via código Javascript:

//cria um objeto de referência à tag input hidden
var objetoDados = document.getElementById(“dados”);
//altera o atributo value desta tag
objetoDados.value = “dados que vão para o servidor”;
</script>

No momento em que estes dados forem “submitados”, poderão ser adquiridos no servidor através de um script PHP que os capture via post por exemplo:
<?

echo $_POST[ 'dados_enviar'];

?>

É isto!

Veja também:

Passar array de PHP para Javascript, e de Javascript para PHP

A primeira dica é na área de CSS. Para atachar ao site arquivos de CSS externos, geralmente utilizamos a sintaxe do padrão HTML4 a seguir :

<link type=”text/css” rel=”stylesheet” href=”arquivo1.css” mce_href=”arquivo1.css”>
<link type=”text/css” rel=”stylesheet” href=”arquivo2.css” mce_href=”arquivo2.css”>
<link type=”text/css” rel=”stylesheet” href=”arquivo3.css” mce_href=”arquivo3.css”>
<link type=”text/css” rel=”stylesheet” href=”arquivo4.css” mce_href=”arquivo4.css”>

Se forem necessários diversos arquivos, repetidas vezes esta linha deve constar em meio ao HTML. Mas existe uma maneira mais ”clean” de se fazer isto:

<style type=”text/css”>
  @import url(“arquivo1.css”);
  @import url(“arquivo2.css”);
  @import url(“arquivo3.css”);
  @import url(“arquivo4.css”);
</style>

Vi alguns exemplos trabalhando desta forma, e investigando a compatibilidade, descobri que dá pra usar livre e tranquilamente, veja a tabela a seguir que mostra a compatibilidade do recurso com diversos browsers:

http://imfo.ru/csstest/css_hacks/import.php

É isto.