Web Sites com Ajax

JavaScript

Compreendendo o espírito da "coisa"

Esta unidade é a alma para o entendimento de todo o projeto. Ela explicará uma metodologia para "pegar dois tipos de usuários com uma página só". Um que tem o suporte ao JavaScript e poderá beneficar-se do Ajax e outro que não possue o mesmo recurso mas desempenhará as mesmas funções. Assim, todos serão atendidos com o nosso projeto.

Para entender melhor o que estou falando, observe o seguinte código presente na página index.php:

Exemplo do código de inserção do formulário de cadastro

Este código incluirá a página formulario.php - página que contém o formulário de cadastro - quando existir na URL a seguinte variável exibirFormulario. Dessa forma, utilizamos a condicional if e a função isset para verificar se tal variável existe. Sendo verdadeira essa condição, será inserido na página index.php o formulário de cadastro ou edição através da função include do php.

Ok, mas como essa varíavel aparecerá na URL? Certo, teremos o seguinte link/botão na página index.php "Cadastrar novo contato", o qual terá em sua marcação HTML o seguinte:

Marcação HTML do botão de cadastro

Bom, o "truque" para "pegar dois tipos de usuários com uma página só" está nessa marcação HTML.

Repare que definimos um atributo ID ao link e demos a ele o seguinte valor: btnNovoCadastro. E, no atributo href, criamos a variável exibirFormulario.

Agora compreenda o seguinte: se o usuário que estiver utilizando o aplicativo não tiver suporte ao JavaScript e clicar no referido link/botão, ele será redirecionado para a mesma página em que está, ou seja, index.php, mas agora com a variável - exibirFormulario - existente na URL.

Vejamos o exemplo:

Variável exibirFormulario na URL


Mas, se esse não for esse caso, e sim outro usuário que tiver suporte ao JavaScript, exibiremos a ele o formulário sobre a página através do Ajax sem que a página se carregue.

Vamos observar o exemplo:

Formulário de cadastro via Ajax

Resumindo, se o usuário tiver suporte ao JavaScript, exibiremos o formulário sobre a página através do Ajax e, se não, incluiremos o formulário na página.

O mesmo conceito será aplicado em outras partes da página.

Vamos observar este:

Marcação HTML da div conteúdo

O exemplo acima diferece-se um pouco do "truque" explicado anteriormente porque a página relatorio.php será incluida na página index.php sem ação alguma do usuário. Basta acessar a página que ela já terá o relatório dos cadastrados na agenda.

Mas, por que ela é inserida dessa forma? Porque quando for realizado um cadastro, edição ou exclusão de um registro, precisaremos exibir o relatório com tais modificações. Assim, quando algumas dessas ações forem executadas, iremos inserir a página relatorio.php com as respectivas modificações na div denominada como conteudo, em seu atributo ID.