Uma delas é o "pseudo-ajax", que consiste em fazer requisições a outro arquivo sem sair da página atual, e tudo isso sem usar Javascript.
Vi vários post em foruns, blogs, etc. pessoas enfatizando o não uso de iframes alegando o obsoletismo dele.
Mas eu pergunto:
- Se é obsoleto, por que está nas especificações do HTML5?
- Se é obsoleto, por que foram introduzidos novos atributos?
- Se é obsoleto, por que diversos sites atuais usam?
Pessoalmente não uso iframe para exibir conteudo (nem recomendo), uso quase que exclusivamente para processar dados de formulario usando o tema deste post.
Aí vem a pergunta:
Qual a vantagem disso se tem AJAX de verdade?
E a reposta é: simplicidade.
Pois basta pouquissimas alterações no sistema atual para usar o pseudo-ajax.
É possível enviar arquivos de forma mais fácil, vários sistemas de upload de arquivos usam iframes.
O envio de anexo do GMail e o 4shared são um exemplo disso.
E isso é AJAX?
Não, pois não usa Javascript (lembra do "J" do AJAX?)
e o envio dos dados não é e forma assíncrona ja que envia os dados
para outra página e aguarda até que ela esteja carregada mesmo que voce não saia da página principal e/ou veja o iframe.
Mas vamos ao que interessa.
A tecnica do pseudo-ajax consiste em enviar dados à um iframe, este iframe processa os dados e retorna a infomação solicitada.
Este retorno pode ser no proprio iframe ou fazer a interação com a pagina pai usando Javascript.
Isso é muito fácil de implementar, pois basta colocar no "target" o nome do iframe
por ex:
<iframe name="meu-frame" id="meu-frame"></iframe>
<form method="post" action="cadastro.php" target="meu-frame">
vai fazer com que os dados do formulário sejam enviados para o iframe "meu-frame", sem sair da página atual.
Em nosso exemplo pratico usaremos dois arquivos, um para o formulario e outro para o processamento dos dados.
--------------------------------------[ form.html ]------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>teste pseudo-ajax</title>
</head>
<body>
<p>
digite alguma palavra chave para verificar a integração do iframe usando javascript.<br />
palavras chave:<br />
<ul>
<li>reset</li>
<li>hora</li>
</ul>
</p>
<form action="action.php" method="post" target="frm" name="dados" id="dados">
<input type="text" name="texto" id="texto" /> <input type="submit" value="testar" />
</form>
<iframe name="frm" id="frm" frameborder="1" marginheight="0" marginwidth="0" width="600px" height="150px" src="about:blank" ></iframe>
</body>
</html>
---------------------------------------------------------------------------------------------------------------<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>teste pseudo-ajax</title>
</head>
<body>
<p>
digite alguma palavra chave para verificar a integração do iframe usando javascript.<br />
palavras chave:<br />
<ul>
<li>reset</li>
<li>hora</li>
</ul>
</p>
<form action="action.php" method="post" target="frm" name="dados" id="dados">
<input type="text" name="texto" id="texto" /> <input type="submit" value="testar" />
</form>
<iframe name="frm" id="frm" frameborder="1" marginheight="0" marginwidth="0" width="600px" height="150px" src="about:blank" ></iframe>
</body>
</html>
---------------------------------------------------[ action.php ]--------------------------------------------
<?php
error_reporting(false);
$c=$_POST["texto"];
echo "valor digitado no formulario: <b>$c</b><br />";
switch($c){
case "reset":
echo "
o formulario foi resetado.
<script>
parent.document.getElementById('dados').reset();
</script>
";
break;
case "hora":
$hora=date("H:i:s");
echo "
o valor do input no formulario foi alterado.
<script>
parent.document.getElementById('texto').value='$hora';
</script>
";
break;
}// fim switch
?>
------------------------------------
error_reporting(false);
$c=$_POST["texto"];
echo "valor digitado no formulario: <b>$c</b><br />";
switch($c){
case "reset":
echo "
o formulario foi resetado.
<script>
parent.document.getElementById('dados').reset();
</script>
";
break;
case "hora":
$hora=date("H:i:s");
echo "
o valor do input no formulario foi alterado.
<script>
parent.document.getElementById('texto').value='$hora';
</script>
";
break;
}// fim switch
?>
