Ajax e DHTML

Aê galera, caso tenha alguma dúvida referente aos assuntos aqui abordados mandem comentários, assim posso ajudar com o que for possível.
Se quiserem ver alguma matéria sobre algo mais especifico sugiram que eu vou procurar atender...

abraços

Já havia mencionado sobre Writely (Gerenciador de arquivos em Ajax), mas hoje fiquei sabendo que esta foi comprada pelo Google.
Google adora idéias e compra as empresas que as criam. Quisera eu de criar uma boa idéia para o Google comprar.

Vou explicar um pouco de como trabalhar com elementos SELECT do HTML de forma inâmica e com conteúdo atualizavel via AJAX.
Para isso é necessário que se tenha uma combo. Abaixo segue um exemplo em HTML:

<select name="cmbteste" id="cmbteste">
  <optgroup label="Grupo 1">
  <option>teste1</option>
  <option>teste2</option>
  <option>teste3</option>
  <option>teste4</option>
  </optgroup>
</select>

Esse combo fica assim:


teste1
teste2


teste3
teste4


O Elemento <optgroup></optgroup> gera um grupo dentro do combo. Para o elemento SELECT existem as seguintes propriedades diferentes dos demais:
Size: define o numero de elementos que irão aparecer, como nesse exemplo que foi informado com a propriedade size = 2:

teste1
teste2

Multiple: define se pode ser selecionado mais de um elemento. Exemplo: multiple="multiple"

teste1
teste2
teste3
teste4

Para selecionar mantenha pressionada a tecla CTRL e clique nos elementos
Vamos agora a um exemplo de uso da combo, mas de forma dinâmica. Vou criar 2 funções que farão a atualização da combo, uma vai enviar os dados via AJAX e outra vai receber o retorno da solicitação:

function Cidades(estado){
   url = "http://localhost/buscacidade.php";
   pars = "estado=" + estado;
   var myAjax = new Ajax.Request( url, {method: 'post',
    parameters: pars,
    onComplete: retCidade});
}

function retCidade(or1){
   total = $("cmbcidade").length;
   for(i=0;i<total;i++){
      $("cmbcidade").remove(0);
   }

   if (or1.responseText == ""){
      $("cmbcidade").options.add(
        new Option("Nada encontrado",0));
   }else{
      eval(or1.responseText);
      for(i=0;i<cidade.length;i++){
         $("cmbcidade").options.add(
           new Option(cidade[i].Nome,cidade[i].ID));
      }
   }
}

A função Cidade(estado) recebe como paramêtro o estado que ele realizará a consulta, fazendo essa pelo método Ajax.Request que já conhecemos de outro tutorial.
Fazemos 2 eventos na função retCidade(or1), a primeira é limpar a combo. Para isso é necessário fazer um loop que varra todos os elementos e os remova.

total = $("cmbcidade").length;
   for(i=0;i<total;i++){
      $("cmbcidade").remove(0);
   }

O método remove(index) do elemento select faz com que o item com index informado no parametro seja removido. Depois o que fazemos é transformar o retorno (caso haja retorno) em linguagem JavaScript com a função eval():

eval(or1.responseText);

Por fim incluimos um item utilizando o método add da collection options do elemento select. Complexo? É não, olha abaixo:

$("cmbcidade").options.add(
           new Option(cidade[i].Nome,cidade[i].ID));

Isso funcionaria também sem a ajuda da prototype:

document.forms[0].cmbcidade.options.add(
           new Option(cidade[i].Nome,cidade[i].ID));

Só para finalizar, esse é o código PHP:

<?
header("Content-type: text/html; charset=ISO-8859-1");
switch ($_REQUEST["estado"]){
  case "SP":
    cidades("Araraquara,Araras,Americana,Judiaí,Santos,
              São Carlos,São Paulo");
    break;
  case "RJ":
    cidades("Rio de Janeiro,Parati,Angra dos Reis");
    break;
  case "PR":
    cidades("Curitiba,Camboriú");
    break;
  case "SC":
    cidades("Florianópolis,Blumenau");
    break;
  case "RS":
    cidades("Porto Alegre,Gramado,Canela,Caxias do Sul");
    break;
}
function cidades($par1){
  $city = split(",",$par1);
  if (count($city)==0)
    return;
  echo "var cidade = new Array();\n";
  for ($i=0;$i<count($city);$i++){
    echo "cidade[$i] = new Object();\n";
    echo "cidade[$i].Nome='".$city[$i]."';\n";
    echo "cidade[$i].ID='".$i."';\n";
  }
}
?>

Como resultado de tudo isso temos o seguinte exemplo: Exemplo 1

Respondendo a uma duvida da comunidade no Orkut resolvi criar aqui um validador de login e senha em Ajax. Primeiro vamos criar
uma página de login:

<body>
<div id="loginDIV">
<h3>Login</h3>
<form name="frmLogin">
Login: <input type="text" name="login" id="login" />
Senha: <input type="password" name="senha" id="senha" />
<input type="button" value="login" onclick="Login()" />
</form>
</div>
</body>

Nada de mais só um simples formulário. Na verdade o que vária é que no lugar de um botão submit temos um simplesmente um botão com ação onclick definida para a função Login().
São 2 funções, uma que envia os dados de login e outra que recebe e determina o que fazer:

function Login(){
   login = $("login").value;
   senha = $("senha").value;
   url = "http://localhost/efetualogin.php";
   pars = "login=" + login + "&senha=" + senha;
   var myAjax = new Ajax.Request( url, {method: 'post',
    parameters: pars,
    onComplete: retLogin});
}

function retLogin(or1){
   if (or1.responseText == "OK"){
      //Login efetuado
      alert("login efetuado!");
      $("loginDIV").style.display="none";
   }else{
      alert(or1.responseText);
   }
}

Lembre-se de colocar a biblioteca prototype.js no arqivo. O que o método login faz é chamar a página que efetua o login passando os parametros e definindo como retLogin() como a função que será chamada quando a página retornar.
A página efetualogin.php simplesmente é uma sequência de validação com retorno de mensagem.

<?
header("Content-type: text/html; charset=ISO-8859-1");
$login = $_REQUEST["login"];
$senha = $_REQUEST["senha"];
if ($login == "teste"){
 if ($senha == "teste")
  echo "OK";
 else
  echo "Senha Inválida";
}else{
 echo "Login Inválido";
}
?> 

Eis como fica o resultado: Exemplo 1