+3

Programando com Prototype (JavaScript) e PHP

criado por Marcio Muzi em 22/12/2006 8:55am
Ao realizar uma busca utilizando, por exemplo, o termo “ajax”, deverá retornar uma tela como a da Figura 1.2.



Figura 1.2 Tela HTML com retorno da pesquisa realizada pela palavra-chave “ajax”.

Na figura 1.3 temos o código-fonte do arquivo request.js:



Figura 1.3 Arquivo request.js, com todas as funções Javascript construídas pelo desenvolvedor, necessárias para a comunicação entre a tela HTML e o script de busca.

Examinando o arquivo request.js:

Linha 1: início da função responsável pelo processo de chamada do arquivo de busca que realizará a pesquisa no banco de dados.
Linha 2: informamos qual o nome da página responsável por ir ao banco de dados e trazer as informações.
Linha 3: é declarada a variável “termo” onde será armazenado o que foi digitado pelo usuário no campo de busca. A função $F() do Prototype que captura o valor do elemento identificado na linha 15 da página index.html.
Linha 4: é declarada a variável contendo o parâmetro que será enviado para a página debusca (busca.php).
Linhas 5 a 7: aqui instanciamos a classe Ajax.Request. O método de envio é post. Quando a requisição terminar (onComplete) é chamada a função listaLivros().
Linha 8: função $() do Prototype, faz o papel do document.getElementById(). O innerHtml Insere a mensagem “Buscando livros...” no div “divResultados”, mensagem que será posteriormente sobrescrita quando o script chegar na Linha 10.
Linha 10: Função responsável em inserir no div “divResultados” o retorno HTML da página busca.php, armazenado em responseText.
Linhas 14 a 16: função observadora Init() contendo o Event.observe do Prototype, cujo papel é observar o elemento “btnBusca” (linha 16 do arquivo index.html). Quanto acionado o botão de busca, será chamada a função buscaLivros(). Aqui é aplicado o conceito do Javascript não-obstrutivo, citado anteriormente.
Linha 17: Dessa vez o Event.observe tem como objetivo chamar a função Init() ao término do carregamento da página (window, load). É importante a compreensão desse trecho, pois os elementos da página index.html, identificados pelos seus respectivos id’s, passam a existir apenas depois que a página é totalmente carregada. Pesquise sobre o padrão Observer do Javascript para melhor entendimento.

Comentários:

Mostrando 1 - 10 de 15 comentários
Marcio Muzi disse:
Neto, talvez resolva colocando sua string que está retornando da requisição dentro da função utf8_decode()

Para saber mais, veja os exemplos no manual do PHP:
http://br.php.net/manual/pt_BR/function.utf8-decode.php

[]s
01/03/2007 2:46pm (~15 anos atrás)

josé M. Neto disse:
É isso mesmo Marcio Muzi!
Só que na hora de enviar pelo form.php eu não consigo fazer com que
<?header("Content-type: application/xml; charset=iso-8859-1");?> que coloquei como a primeria linha da página funcione, ele envia para a página em php que faz o processamento e que também coloquei o header e nesta funcionou. Exemplo no form digito Brasília e ele envia brasília para a página em php que faz o processamento. E se eu no form.php digito Brasilia, sem o acento, aí ele manda para o php que faz o processamento e retorna somente os resultados que também não tem acentos no caso Brasilia sem acento.
01/03/2007 11:41am (~15 anos atrás)

Marcio Muzi disse:
Neto, faltou na página de busca a linha abaixo:

header("Content-type: application/xml; charset=iso-8859-1");

A forma correta de renderizar nosso português é simplesmente usando o charset ISO-8859-1 e não o UTF-8. Você deve enviar cabeçalhos do servidor para o navegador, informando que você usará ISO-8859-1.

[]s
Marcio
www.marciomuzi.eti.br
01/03/2007 6:43am (~15 anos atrás)

josé M. Neto disse:
Gostaria primeiro de parabenizar pelo artigo.
Implemetei com uma página com o form e outra com o php mas sem DB. só que o retorna o código no browser IE vem com problema nos caracteres acentuação exemplo Brasília retorna Bras?a. Como resolver ? Sereia no Prototype
01/03/2007 5:51am (~15 anos atrás)

Parabéns pelo artigo!
21/02/2007 7:46pm (~15 anos atrás)

Leandro Lages disse:
você sabe como esta biblioteca se comporta ao usar UPLOAD de arquivos em Ajax? Tem suporte?
05/02/2007 7:07am (~15 anos atrás)

Marcio Muzi disse:
Olá nelsOn, obrigado pelo elegio.

O código fonte está disponível no iMasters:
http://conteudo.imasters.com.br/5231/scripts_artigo_marciomuzi.rar

Sobre o navegar estar configurado para não aceitar Javascript, além de ser raro, o usuário simplesmente não vai conseguir fazer nada na internet se fizer isso.
Quer um exemplo? Imagine um infeliz que não habilita o javascript no navegador, nem o GMail vai consegue utilizar!

Abraços
04/02/2007 9:55am (~15 anos atrás)

Sinceramente, o melhor tutorial que eu li aqui na phpbrasil.

Muito boa as ilustrações. Não forneceu o código, ou seja quem quiser ter o código terá que digitar letra por letra(aquela coisa de ctrl+c ctrl+v não é bom).
Uma coisa é que no caso, se o navegador não suportar JS, não vai acontecer nada (o que é muito ruim).

Porém parabéns. Espero que coloque mais artigos/tutoriais nesse estilo. :-)
03/02/2007 8:01am (~15 anos atrás)

Muito bom, parabéns pelo artigo.
11/01/2007 9:36am (~15 anos atrás)

Marcio Muzi disse:
Cau,

Quando li sobre o conceito do JS não obstrutivo em alguns lugares na internet, dizia que era apenas não ter JS no código HTML.
Pelo visto as pessoas não conhecem bem esse conceito. Se você tiver alguma referência confiável sobre esse assunto, pode enviar para meu e-mail? (marcio.muzzi@gmail.com)

Obrigado pela contribuição!

Abraços,
Marcio
10/01/2007 10:37am (~15 anos atrás)

Novo Comentário:

(Você pode usar tags como <b>, <i> ou <code>. URLs serão convertidas para links automaticamente.)