ASP - AJAX e ASP

AJAX é usado para criar aplicações mais dinâmicas.

Exemplo AJAX ASP

O exemplo a seguir demonstra como o site se comunica com o servidor quando o usuário digita caracteres no campo de entrada:

Exemplo

Por favor, digite a letra (A - Z) no campo de entrada abaixo:

Nome:

Recomendação:

Experimente o código-fonte pessoalmente

Explicação de exemplo - Página HTML

Quando o usuário digita caracteres no campo de entrada acima, é executada a função "showHint()". A função é acionada pelo evento "onkeyup":

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  // Código para IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
senão
  // Código para IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<p><b>Por favor, insira caracteres em inglês na caixa de entrada:</b></p>
<form>
Primeiro nome: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>Sugestões: <span id="txtHint"></span></p>
</body>
</html>

Explicação do código-fonte:

Se a caixa de entrada estiver vazia (str.length==0), a função limpará o conteúdo do marcador de posição txtHint e sairá da função.

Se a caixa de entrada não estiver vazia, a função showHint() executará os seguintes passos:

  • Criar um objeto XMLHttpRequest
  • Criar uma função executada quando a resposta do servidor estiver pronta
  • Enviar uma solicitação para o arquivo no servidor
  • Atenção para o parâmetro adicionado ao final da URL (q) (que contém o conteúdo da caixa de entrada)

Arquivo ASP

Esta página do servidor chamada por JavaScript é um arquivo ASP chamado "gethint.asp".

O código-fonte em "gethint.asp" verificará o array de nomes e retornará o nome correspondente ao navegador:

<%
response.expires=-1
dim a(30)
preencha o array com nomes
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
obtenha o parâmetro q da URL
q=ucase(request.querystring("q"))
se o comprimento q>0, procure todas as sugestões no array
se len(q)>0 então
  hint=""
  para i=1 até 30
    se q=ucase(mid(a(i),1,len(q))) então
      se hint="" então
        hint=a(i)
      senão
        hint=hint & ", " & a(i)
      fim se
    fim se
  next
fim se
se não encontrar sugestões, exiba "sem sugestão"
ou exiba os valores corretos
se hint="" então
  response.write("sem sugestão")
senão
  response.write(hint)
fim se
%>

Explicação do código-fonte:

Se o JavaScript enviar qualquer texto (isto é, strlen($q) maior que 0), ocorrerá:

  • Procure correspondências de caracteres provenientes do JavaScript
  • Se não encontrar correspondências, configure a string de resposta como "sem sugestões"
  • Se encontrar um ou mais nomes correspondentes, configure a string de resposta com todos os nomes
  • Envie a resposta para o marcador "txtHint"