Ajax sem Ajax

Primeiramente gostaria de agradecer todos os elogios e criticas relevantes ao meu ultimo artigo e dizer que elas são bem vindas. Nesse artigo eu vou demonstrar como apagar, inserir e atualizar arquivos usando uma tecnologia parecida com Ajax, que eu chamo de Aiframe (Atualização por iframe), mas se você conhece outro nome para essa tecnologia, me mande um e-mail!

Há alguns anos me deparei com o seguinte problema: Estava desenvolvendo um banco de dados de imagem, sendo que, na opção de “visualizar para apagar” era necessário exibir as fotos em miniaturas. O ponto negativo é que, toda vez que se apagava uma imagem, era necessário recarregar a página. A primeira solução foi usar Ajax, mas ainda existia muita discussão sobre a utilização do mesmo, foi aí que me veio a idéia de usar ifame para atualizar.

A idéia é a quase a mesma que a do Ajax. Utilizamos dois arquivos: o primeiro é o conteúdo e o segundo é o atualizador. Mas usamos somente iframes e javaScripts.

Essa tecnologia se baseia basicamente em mudar a target dos forms para um iframe. Porém, ao fazer isso, alguns navegadores não reconhecem na atualização do mesmo form, pois ele abre em uma nova janela. Para resolvermos isso, devemos criar uma função em javascript para poder atualizar o iframe limpando sua propriedade src.

Muitas pessoas vão falar que o javascript é outro problema, mas ao longo do artigo você vai perceber quer nós vamos usar somente o básico dele e que não é necessário muito conhecimento do mesmo.

Iremos trabalhar com 6 arquivos:

java.js: onde vai estar todo o nosso javascript
default.asp: é a página que faz a interface com o usuário
deletar.asp: a página usada para deletar uma linha do arquivo e apagar da default.asp
insere.asp: a página usada para inserir um conteúdo no arquivo e addicionar essa linha na default.asp
muda.asp: página usada para mudar um conteúdo do arquivo
bd.txt: é o arquivo que vai guardar todo o conteúdo inserido

default.asp

Linha 2: é onde criamos o objeto que vai nos proporcionar trabalhar com arquivos, lembrando que esse obj é nativo e todos os servidores possuem.

Linha 3: Onde nós atribuímos a variável “caminho” o caminho físico no qual nos estamos trabalhando

Linha 5: O if verifica se o arquivo existe. Caso contrário, ele cria (Linha 7) e adiciona os conteúdos (Linha 8 a Linha 15)

Linha 19: Depois do if a cima, é certeza que o arquivo existe. Logo, abrimos ele.

Agora vem o código HTML do site. Não existem segredos. Na imagem abaixo, repare na linha 35 as propriedades onSubmit e target estão alteradas, isto se faz necessário para poder executar a função que burla o “bug” mencionado a cima e para direcionar o request para o iframe, respectivamente. O restante dessa imagem creio que você consegue entender.

Nessa outra imagem é onde está a principal “manobra” do trabalho. Inicialmente nos vamos fazer um loop (Linha 41) para varrer todo o arquivo e mostrar seu conteúdo.

Linha 45: essa div é onde estará todo o conteúdo que vai ser atualizado. Repare na propriedade id que nos vamos utilizar para poder trabalhar com essa div no javascript, mas não vamos entrar em detalhes agora. Quando eu explicar o arquivo Java.js eu falo mais sobre ela. Agora você só tem que saber que ela é o identificador das tags no html e que seu valor não pode ser duplicado. Funciona igual a uma chave primária em um banco de dados.

Linha 46: repare que, nesse form, as propriedades onSubmit e Target estão alteradas de forma semelhante à imagem anterior e pelo mesmo motivo.

Linha 49: acho que isso não precisaria ser comentando mas... é o input aonde fica armazenado o código do texto.

Linha 54: um botão que vai disparar a ação de apagar o registro em questão, passando por parâmetro o cd do registro.

Linha 61: a div onde serão adicionados os conteúdos inseridos através do primeiro form de cima.

Linha 62: a div onde vai ser adicionado dinamicamente o iframe para o processo de atualização.

Agora nós destruíremos os objetos criados:

Esse é todo o conteúdo do arquivo default.asp. Agora passamos para o arquivo bd.txt

bd.txt

Esse arquivo é o mais simples e fácil de entender. A primeira linha é o cd do conteúdo e a linha seguinte é o conteúdo em si. Depois outro código e outro conteúdo, continuando assim até o fim do arquivo.

Java.js

deleta(codigo)

Essa função é usada para deletar todo o conteúdo com o código passado por parâmetro. Observe que está usando o getElementById para alterar a cor de fundo da div. Isso serve apenas para poder mostrar para o usuário o que ele está apagando.

Logo depois é aberta uma janela de confirmação. Se ele confirmar a operação é disparada a função envia (explicada a seguir). Caso contrário, a cor de fundo da div para a cor normal.

Envia(link)

Essa função é usada sempre que você quiser postar os dados via Java. Repare que antes de fazer qualquer coisa, ela chama a função atualiza (explicada a seguir) depois ela pega o frame usando o getElementById  e muda o src para o link passado via parâmetro

Atualiza()

Linha 17: document.getElementById varre todo o documento a procura de um id passado via parâmetro. Quando ele encontra, retorna o elemento instanciado com esse id, lhe dando a possibilidade de acessar facilmente todas as propriedades o mesmo. Nós usamos aqui a innerHTML onde está  todo o conteúdo html do bloco retornado, sendo muito usada por causa de sua facilidade na edição.

Usando o getElementById nós pegamos a div de id wend e adicionamos um iframe com a src vazia de nome frameWend, de id igual ao nome, de tamanho 0 sem bordas para não aparecer na pagina.

muda.asp

Nesse arquivo creio que não há nenhuma novidade. Ele é exatamente o arquivo que você está acostumado a criar. Apesar de não ser o objetivo desse artigo eu também vou explicar o processo de atualização de um arquivo.

Resumindo o arquivo a baixo; inicialmente você varre todo o arquivo colocando todo o conteúdo em uma matriz, depois você sobrescreve o arquivo citado com um outro em branco, bastando você varrer a matriz e guardar no arquivo, lembrando de atualizar quando o código for igual ao código passado por parâmetro.

Agora linha por linha:

Linha 2: é onde criamos o objeto que vai nos proporcionar trabalhar com arquivos, lembrando que esse obj é nativo e todos os servidores possuem.

Linha 3: Onde nós atribuímos a variável “caminho” o caminho físico no qual nos estamos trabalhando

Linha 5: cria nossa matriz que vai guardar as linhas do arquivo.

Linha 11: abre o arquivo bd.txt

Linha 13: é a estrutura de repetição responsável por varrer o arquivo e guardar as linhas em nossa matriz. Lembre-se: o Redim Preserve na linha 15 redimensiona nossa matriz e preserva os valores que la já guardou.

Linha 21: nós recriamos o arquivo para poder inserir o novo conteúdo.

Linha 23 até Linha 42: Nós guardamos na variável i o valor da primeira posição da matriz, depois fazemos uma estrutura de repetição que irá varrer nossa matriz da primeira à ultima posição, verificando se o cd da posição é diferente do código recebido do nosso formulário. Caso positivo, ele vai adicionar em nosso arquivo o valor contido na matriz. Caso contrário, ele vai adicionar no arquivo o valor passado via formulário. Depois da operação concluída, nós informamos ao usuário que está atualizado.

deletar.asp

Esse arquivo é idêntico ao outro, se diferenciando por pequenos pontos, os quais eu explico aqui:

Linha 32: repare que nessa estrutura de repetição, a única diferença é que, quando ele acha o código igual, ele pula e vai para o próximo registro, pois no arquivo anterior ele adicionava o que vinha via request..

linha 38: repare bem nessa linha pois esse é todo o código java usado parar apagar p registro da default .asp. Repare que possui um nome diferente que ainda não foi usado. O parent funciona igual ao parent do objeto target no html, subindo um nível do documento. Ou seja, se você estiver em um iframe dentro de uma página (que é nosso caso), para poder acessar os dados ou funções da pagina principal fora do iframe você usa o parent.

Esse parent, em conjunto com o document.getElementById, é usado para varrer o default.asp procurando uma div com o id igual ao cd, usando o display = none.

insere.asp

Note que esse arquivo também é muito parecido com os anteriores.

Linha 23: esse loop é usado para varrer a matriz (que contém todo o conteúdo do arquivo), e guardar através do if o maior valor do código para poder posteriormente salvar o texto recebido via request no arquivo.

Linha 37 e 38: adiciona ao final do arquivo o texto digitado e também o código encontrado.

Após ter adicionado no fim do arquivo o valor digitado, devemos adicionar ao nosso default.asp o novo registro. Para isso guardamos toda a tag html dentro da variável temp. O html que você deve colocar deve ser igual ao html que está na estrutura de repetição da default (linha 45 a 58 da default.asp explicada no começo do artigo) para não ter diferença na hora de aparecer os registros.

Observe que, na linha 57, nós usamos novamente o parent pois essa página estará dentro de um iframe e queremos adicionar os registros na página principal.

Considerações finais

Sem dúvida esse código pode ser melhorado, mas meu objetivo foi mostrar mais uma possível solução, e da forma mais simples possível, para facilitar o entendimento. Lembre-se que tudo o que você for pesquisar na Web, deve ser muito testado e viabilizado para poder ser implantado. Testei esses códigos no IE e Firefox, e utilizo essa tecnologia há muito tempo. Espero que você goste e comece a usá-la também.