Tema: Ajax con ASP
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 22/12/2009, 05:32
Avatar de Adler
Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 18 años, 3 meses
Puntos: 126
Respuesta: Ajax con ASP
Hola

Hace un par de meses monté, a ver si es lo que estás buscando

SelecUsuariosAjax.html

Código Javascript: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
  3. <head>
  4. <meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
  5. <STYLE TYPE="text/css">
  6. #contenedor div.seleccionado {font-weight:bold; background:#F0F0F0; color:#FF6600;}
  7. #contenedor div.deseleccionado {background:#FFFFFF; color:#000000;}
  8. #contenedor div{font:11px verdana; color:#000000; cursor:pointer; text-align:left; padding:2px 5px;}
  9.  
  10. .capa {
  11. background: #FFFFFF;
  12. border:1px solid rgb(120,120,120);
  13. width: 144px;
  14. _width: 146px;
  15. text-align: left;
  16. position: absolute;
  17. top: 30px;
  18. _top:38px;
  19. left: 117px;
  20. _left: 119px;
  21. }
  22. </STYLE>
  23. <script type="text/javascript">
  24. var SelUsuario = {
  25.  
  26. Evento: function (elemento,nomevento,funcion) {
  27.   if (elemento.attachEvent)
  28.   {
  29.       var f=function(){
  30.         funcion.call(elemento,window.event);
  31.     }
  32.     elemento.attachEvent('on'+nomevento,f);
  33.     return true;
  34.   }
  35.   else  
  36.     if (elemento.addEventListener)
  37.     {
  38.       elemento.addEventListener(nomevento,funcion,false);
  39.       return true;
  40.     }
  41.     else
  42.       return false;
  43. },
  44.  
  45.  
  46.  
  47. init: function(){
  48. var elem1 = document.getElementById("txt");
  49. var elem2 = document.getElementById("contenedor");
  50.         SelUsuario.Evento(elem1, 'keyup', SelUsuario.Empieza);
  51.         SelUsuario.Evento(elem2, 'mouseover', SelUsuario.Seleccionar);
  52.         SelUsuario.Evento(elem1, 'keydown', SelUsuario.Pegar2);
  53.         SelUsuario.Evento(window, 'click', SelUsuario.Cerrar);
  54.     },
  55.  
  56.  
  57.  
  58.  
  59. creaAjax: function (){
  60.     var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
  61.     var ajax = false;
  62.     for(var i=0 ; !ajax && i<ajaxs.length ; i++){
  63.         try{ 
  64.             ajax = new ActiveXObject(ajaxs[i]);   // Internet Explorer
  65.         }
  66.         catch(e) { 
  67.             ajax = false; 
  68.         }
  69.     }
  70.     if(!ajax && typeof XMLHttpRequest!='undefined') {
  71.         ajax = new XMLHttpRequest();  // Firefox, Opera 8.0+, Safari
  72.     }
  73.     return ajax;
  74. },
  75.  
  76.  
  77.  
  78. Empieza: function (ev) {
  79. var str = document.getElementById(this.id).value;
  80. var obj = document.getElementById("contenedor");
  81. var ref = obj.getElementsByTagName('DIV');
  82. var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0;
  83.  
  84.  if (keyCode == 40) {
  85. //alert("flecha abajo")
  86.     SelUsuario.BajaOpt ()
  87.  } else if (keyCode == 38) {
  88. //alert("flecha arriba")
  89.     SelUsuario.SubeOpt ()
  90.  
  91.  
  92.  
  93.  
  94. } else if (keyCode == 13) {
  95.  
  96. for (var i = 0; i <= ref.length-1; i++) {
  97. if (ref[i].className == "seleccionado") { 
  98.  
  99.         document.getElementById("txt").value = ref[i].id;
  100.         if (obj.style.display == "block"); obj.style.display= "none";
  101.         break;
  102.         }
  103.  
  104.     }
  105.  
  106.     try{ // DOM;
  107.         ev.preventDefault();
  108.         }catch(e){ // iexplore;
  109.         ev.returnValue = false;
  110.         }
  111.  
  112. } else {
  113.  
  114.     if (str.length < 2) { 
  115.         //obj.innerHTML = "";
  116.         if (obj.style.display == "none")  obj.style.display= "none";
  117.                 else obj.style.display= "none"; 
  118.         return;
  119.     }
  120.     ajax = SelUsuario.creaAjax()
  121.     if (ajax==null) {
  122.         alert ("Tu navegador no soporta Ajax");
  123.         return;
  124.      } 
  125. var url="SelecUsuarios.asp?q="+escape(str);
  126.     ajax.open("GET",url,true);
  127.     ajax.onreadystatechange = SelUsuario.Despliega;
  128.     //ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  129.             ajax.send(null);
  130.             return
  131. }
  132. },
  133.  
  134.  
  135. Despliega: function () { 
  136. var obj = document.getElementById("contenedor");
  137.     
  138.         if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
  139.                                         obj.innerHTML = "<p align='center'><img src='precarga.gif' border='0px' widht='15px' height='15px'/></p>";
  140.             obj.style.display= "block";
  141.                 }
  142.  
  143.                 else if (ajax.readyState==4) {
  144.             if (ajax.status==200) {
  145.             obj.innerHTML = unescape(ajax.responseText);
  146.  
  147.             }else {
  148.                                     obj.innerHTML = "<p>Se ha producido un error</p>";
  149.             }
  150.  
  151.         if (obj.style.display == "none")  obj.style.display= "block";
  152.         }
  153. },
  154.  
  155.  
  156.  
  157. Seleccionar: function () {
  158. var ref = document.getElementById(this.id).getElementsByTagName('DIV');
  159. //alert(ref);
  160. for (var i = 0; i < ref.length; i++) {
  161.  
  162. SelUsuario.Evento(ref[i], 'click', function() {
  163. SelUsuario.Pegar(this.id);
  164. //alert(this.id);
  165. })   
  166.  
  167.  
  168. SelUsuario.Evento(ref[i], 'mouseover',  function() {
  169. SelUsuario.Marcar(this.id);
  170. })
  171.  
  172. //SelUsuario.Evento(ref[i], 'mouseout',  function() {
  173. //SelUsuario.DesMarcar(this.id);
  174. //})
  175. }
  176. },
  177.  
  178.  
  179.  
  180. Pegar: function (valor) {
  181. //alert("el val " +valor);
  182. var obj = document.getElementById("contenedor")
  183.         document.getElementById("txt").value = valor;
  184.                 if (obj.style.display == "block"); obj.style.display= "none";       
  185. },
  186.  
  187.  
  188. Pegar2: function (ev) {
  189. var obj = document.getElementById("contenedor")
  190. var ref = obj.getElementsByTagName('DIV');
  191. var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0;
  192.  
  193. // enter 13 tab 9
  194. if ((keyCode == 13) || (keyCode == 9)) {
  195. //alert("enter")
  196.  
  197. for (var i = 0; i <= ref.length-1; i++) {
  198. if (ref[i].className == "seleccionado") { 
  199.  
  200.         document.getElementById("txt").value = ref[i].id;
  201.         //window.focus();
  202.         if (obj.style.display == "block"); obj.style.display= "none";
  203. break;
  204. //alert(ref[i].id);
  205.  
  206.  
  207. }
  208. }
  209.  
  210. if (keyCode == 13) {
  211.     try{ // DOM;
  212.         ev.preventDefault();
  213.         }catch(e){ // iexplore;
  214.         ev.returnValue = false;
  215.         }
  216. }
  217.  
  218.  
  219. }   
  220. },
  221.  
  222.  
  223.  
  224.  
  225.  
  226. BajaOpt: function() {
  227. var ref = document.getElementById("contenedor").getElementsByTagName('DIV');
  228. for (var i = 0; i <= ref.length-1; i++) {
  229. if (ref[i].className == "seleccionado") { 
  230. ref[i].className = "deseleccionado";
  231. if (i < ref.length-1){
  232. i++;
  233. }else{
  234. i = 0;
  235. }
  236. //alert("Largo: " +(ref.length-1)+ " Valor: " +i);
  237. ref[i].className = "seleccionado"
  238. }
  239. }
  240. },
  241.  
  242.  
  243. SubeOpt: function() {
  244. var ref = document.getElementById("contenedor").getElementsByTagName('DIV');
  245. for (var i = 0; i <= ref.length-1; i++) {
  246. if (ref[i].className == "seleccionado") { 
  247. ref[i].className = "deseleccionado";
  248. if (i < ref.length && i > 0){
  249. i--;
  250. }else{
  251. i = ref.length-1;
  252. }
  253. //alert("Largo: " +(ref.length-1)+ " Valor: " +i);
  254. ref[i].className = "seleccionado"
  255. }
  256. }
  257. },
  258.  
  259.  
  260.  
  261. Marcar: function (id) {
  262. var selecionado = document.getElementById(id);
  263. var ref = document.getElementById("contenedor").getElementsByTagName('DIV');
  264. for (var i = 0; i <= ref.length-1; i++) {
  265. if (ref[i].id != id) { 
  266. ref[i].className = "deseleccionado";
  267. selecionado.className = "seleccionado";
  268. } 
  269. }
  270. },
  271.  
  272. //DesMarcar: function (id) {
  273. //var ref = document.getElementById(id);
  274. //alert(ref);
  275. //ref.className = "deseleccionado"
  276. //alert("el " +id);         
  277. //},
  278.  
  279.  
  280. Cerrar: function () {   
  281. var obj = document.getElementById("contenedor")
  282.             if (obj.style.display == "block"); obj.style.display= "none";   
  283.     
  284. }
  285. }
  286.  
  287. SelUsuario.Evento(window, 'load', SelUsuario.init); 
  288. </script> 
  289. </head>
  290. <body>
  291. <form method="post" action=""> 
  292. Nombre Usuario: <input type="text" name="txt" id="txt" value="" autocomplete="off" tabindex="1" />
  293. <div class="vink" style="margin:5px 0px 0px 10px">
  294. <div id="contenedor" class="capa" style="display:none;"></div>
  295. </div> 
  296. Otro campo: <input type="text" name="otro" id="otro" value="" tabindex="2" /><br />
  297. <input type="submit" value="Enviar">
  298. </form>
  299. Resto de la p&aacute;gina
  300. </body>
  301. </html>

SelectUsuarios.asp

Código ASP: 
Ver original
  1. <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
  2. <% Option Explicit %>
  3. <% Response.Buffer=True %>
  4. <% On Error Resume Next  %>
  5. <%Response.charset="utf-8"%>
  6. <%
  7. Response.addHeader "pragma", "no-cache"
  8. Response.CacheControl = "Private"
  9. Response.Expires = -1000
  10. %>
  11. <%
  12. Dim SQL, rs, oConn, registros, i
  13. Dim usuario
  14. Dim nombre
  15. nombre = 0
  16. usuario = CStr(Request.QueryString("q"))
  17.  
  18.  
  19. IF Len(usuario) >= 2 then
  20. ' CONEXIÓN
  21. SQL="Select nombre FROM Usuarios WHERE nombre LIKE '"&usuario&"%' ORDER BY nombre asc"
  22. set rs = oConn.Execute(SQL)
  23. If not rs.eof then
  24. registros = rs.getrows()
  25. Else 
  26. Response.Write "<p class=""deseleccionado""><strong>Sin resultados</strong></p>"
  27. Response.End ()
  28. End If
  29. rs.Close
  30. set rs = nothing
  31. oConn.Close
  32. set oConn = nothing
  33. END IF
  34.  
  35. For i = 0 to Ubound(registros,2)
  36. If i = 0 then
  37. Response.Write "<div id="""& registros(nombre,i) &""" class=""seleccionado"">"& ResaltarSubStr(registros(nombre,i)) & "</div>"
  38. Else
  39. Response.Write "<div id="""& registros(nombre,i) &""" class="""">" & ResaltarSubStr(registros(nombre,i)) & "</div>"
  40. End If
  41. Next
  42.  
  43.  
  44. ' ========= Funciones ===========
  45. Function ResaltarSubStr(texto)
  46. Dim objRegExp
  47.  
  48.     Set objRegExp= New RegExp 
  49. objRegExp.IgnoreCase = True
  50. 'objRegExp.Global = True
  51.  
  52. objRegExp.Pattern = "\b("&usuario&")+(\w)"
  53. texto = objRegExp.Replace(texto, "<strong>$1</strong>$2") 
  54.  
  55.     Set objRegExp = Nothing
  56.  
  57.     ResaltarSubStr = texto
  58.  
  59. End Function
  60. ' ========= Fin Funciones ===========
  61. %>

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />