Avaliação: | Publicado em: 29/08/2006

Preenchendo uma lista usando ajax com asp

Rafael Martin Tem grande experiência com web usando as seguintes linguagens: asp, javascript, css, html, ajax, xml, dhtml, vb6, asp.net (c# e vb.net). Atualmente trabalha como Analista Desenvolvedor numa fábrica de sites, trabalhando em padrão Microsoft. Possui Certificado CCNA da Cisco, Dreamweaver MX 2004 e Segunça de Redes da Intel Genaration. É graduado em Sistema de Informação pela UNIb

Preenchendo uma lista usando ajax com asp

Pessoal, vou começar esse meu primeiro artigo aqui no plugmasters mostrando como se utiliza asp + ajax, com um exemplo prático.

Primeiro de tudo vamos fazer a conexão com o banco. Crie o arquivo conexao.asp

<%
 set objRS = Server.CreateObject("ADODB.Recordset")
 Set Conn = server.createobject("adodb.connection")
 DSNtest = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("ajax.mdb")
 Conn.Open DSNtest

'Nenhum segredo não é mesmo?
%>

Agora vamos criar a função que vai fazer o ajax trabalhar. rsrsrs Crie o arquivo ajax.js

 // a funcao abaixo funciona em qualquer
 // browser ou versão. 
 function createXMLHTTP()
 {
  var ajax;
  try
  {
   ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }
  catch(e)
  {
   try
   {
    ajax = new ActiveXObject("Msxml2.XMLHTTP");
    alert(ajax);
   }
   catch(ex)
   {
    try
    {
     ajax = new XMLHttpRequest();
    }
    catch(exc)
    {
      alert("Esse browser não tem recursos para uso do Ajax");
      ajax = null;
    }
   }
   return ajax;
  }
 
 
     var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
           "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
           "Microsoft.XMLHTTP"];
     for (var i=0; i < arrSignatures.length; i++)
     {
    try
    {
     var oRequest = new ActiveXObject(arrSignatures[i]);
     return oRequest;
    }
    catch (oError)
    {
       }
     }
 
      throw new Error("MSXML is not installed on your system.");
 }

Vamos comrçar a criar a tela index.asp. Veja os comentários em verde.

<!-- chamamos o arquivo que vaoi fazer a função preenchelista funcionar. Essa função é padrão
Se você usar métodos ajax use essa função  -->

<script language="javascript" src="ajax.js"></script>

<!-- aqui criamos uma tabela e campos sem nenhum segredo -->
<form method="post" name="frm1" id="frm1">
<table border="0" cellpadding="0" cellspacing="0">
 <tr height="33">
  <td>
   <input type="text" name="txtBusca" id="txtBusca" size="35">
   <input type="button" name="btnBuscar" value=" Buscar " onClick="preenchelista();">
  </td>
 </tr>
 <tr>
  <td>
   <!-- essa div trará a lista preenchida.
   Lembra? É a página que preenche a lista. -->
   <span id='divCliente'>
    <select size="6" style="width:315" id="lista" name="lista">
        <option value="0"></option>
    </select>
   </span>
  </td>
 </tr>
</table>
</form>

<!-- aqui é o grande segredo. Essa função -->
<script>
 //função em ajax que vai buscar a página que preenche a lista
 function preenchelista()
 {
  /*----------------------------------------------------------------------------------------------*/
     // criacao do objeto XMLHTTP do arquivo ajax.js
     var oHTTPRequest = createXMLHTTP();
     oHTTPRequest.open("post", "objcliente.asp", true); //enviamos para a página que faz o select do que foi digitado e traz a lista preenchida.
   // para solicitacoes utilizando o metodo post deve ser acrescentado
   // este cabecalho HTTP
     oHTTPRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   // a funcao abaixo e executada sempre que o estado do objeto muda (onreadystatechange)
     oHTTPRequest.onreadystatechange=function(){
     // o valor 4 significa que o objeto ja completou a solicitacao
      if (oHTTPRequest.readyState==4){// abaixo o texto gerado no arquivo executa.asp e colocado no div
         document.all.divCliente.innerHTML = oHTTPRequest.responseText;}}
       oHTTPRequest.send("txtBusca=" + frm1.txtBusca.value);
  /*---------------------------------------------------------------*/
 }
</script>

Agora vamos fazer a página que preenche a lista, objcliente.asp

<!-- faz a conexão com o banco -->
<!--#include file="conexao.asp"-->
<%
'resgata o que foi digitado no campo de busca
txtBusca = request("txtBusca")

'aqui você pode fazer dois tipos de select's. Sendo um trazendo um nome especifico ou trazendo todos que contenham o que foi digitado
'no campo de busca.
sql = "select id, nome, telefone, email from TAB_Cliente where nome = '" & txtBusca & "' "
sql = "select id, nome, telefone, email from TAB_Cliente where nome like '%" & txtBusca & "%' "
set objRS = conn.execute(sql) 'executa a cláusula sql
%>

<!-- começamos a montagem da nossa lista -->
<select size="6" style="width:315" id="lista" name="lista">
<%
'verifica e/ou varremos todas as linhas do banco, para preencher a lista com todos os registros.
'Depois trazemos todos os registros da coluna nome ou apenas o nome digitado no campo de busca. Como pode ser visto abaixo.
while not objRS.EOF
%>
<option value="0"><%=objRS("nome")%></option>
<%
 'partimos para o próximo registro. Até chegar o último e terminar o loop.
 objRS.MoveNext
  wend

  'fechamos e esvaziamos nosso recordset  
  objRS.close
  set objRS = nothing  
%>
</select>

Bom pessoal, é isso aí. Até a próxima.

• artigo_plug.txt