« Modelos Matemáticos | Webservices com PHP5 e SOAP » |
PHP com Ajax
O primeiro arquivo que criaremos será a página principal de nosso site. Na Listagem 1, encontra-se o fonte do arquivo index.html, que conterá a formatação do nosso site e os seus elementos. Observe que nenhum código PHP, propriamente dito, é necessário neste arquivo.
Listagem 1 – fonte arquivo index.html
HTML
<html> | |
<head> | |
<title>PHP com Ajax</title> | |
<!−− Adicionar o arquivo com os scripts JS −−> | |
<script type="text/javascript" src="ajax.js"></script> | |
</head> | |
| |
<body> | |
| |
<!−− Este é o div mais externo −−> | |
<div id="contorno" style="border:1px solid #000000; width:770px; margin:auto"> | |
| |
<!−− Este é o div que mantém o título da página −−> | |
<div id="header" style="position:relative; background: #dcdcdc; width:770px; height:35px; padding-top: 15px; text-align:center">Minha Home Page</div> | |
| |
<!−− Este div contém as opções do menu −−> | |
<div id="menu" style="height:25px; font-size:11px; background:#c0c0c0; padding-top: 5px; border:solid #000000; border-width:1px 0 1px 0;"> | |
<!−− Observe que cada link do menu possui uma ação javascript. Todas as ações chamam a função enviaRequisicao passando ação a ser executada −−> | |
<a href="#" onClick="enviaRequisicao('ajax.php?acao=home');">Home</a> | | |
<a href="#" onClick="enviaRequisicao('ajax.php?acao=fotos');">Fotos</a> | | |
<a href="#" onClick="enviaRequisicao('ajax.php?acao=livro');">Livro Visitas</a> | | |
<a href="#" onClick="enviaRequisicao('ajax.php?acao=inex');">Conteúdo Inexistente</a> | | |
<a href="#" onClick="enviaRequisicao('quebrado.php');">Link Quebrado</a> | |
</div> | |
| |
<!−− Div que receberá o retorno do servidor −−> | |
<div id="conteudo" style="background:#fff; padding-left: 5px;"> | |
<h3 align="center">Bem-vindo.</h3> | |
<p>Olá, seja bem-vindo à minha página pessoal.</p> | |
</div> | |
| |
<!−− div que exibirá as mensagens −−> | |
<div id="status" style="height:25px; background:#c0c0c0; border:solid #000000; border-width:1px 0 1px 0; font-size:11px;"> | |
</div> | |
| |
</body> | |
</html> |
Na Figura 3, abaixo, podemos observar um screenshot do nosso site.
Figura 3 – tela do site (Abrir imagem)
This entry was posted on 28 Sep 2007 at 11:20 by vilson and is filed under Programação, PHP, Ajax, Javascript.
Trackback address for this post
Trackback URL (right click and copy shortcut/link location)