Tema: Ejemplo de Ajax y ASP para principiantes
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/09/2009, 07:12
combuilder
 
Fecha de Ingreso: agosto-2009
Mensajes: 101
Antigüedad: 15 años, 8 meses
Puntos: 0
Ejemplo de Ajax y ASP para principiantes
Después de una semana trasteando con Ajax y ASP, y más o menos resolver las dudas gracias al foro, he decidido poner un breve ejemplo para principiantes, muy intuitovo (espero!).

En primer lugar, definimos el siguiente código HTML de demo.asp:
Código html: 
Ver original
  1. <!-- #include file="ajax.js" -->
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>Prueba Ajax</title>
  6. </head>
  7.  
  8. <body>
  9. <table width="728" height="167" border="1">
  10. <caption>
  11.     Prueba Ajax
  12.   </caption>
  13.   <tr>
  14.     <td width="108" height="44"><img src="shade.gif" width="83" height="45" onClick="cargaSolapa('panel','readme.html',0)" /></td>
  15.     <td width="604" onclick="cargaSolapa('panel','demo1.asp',0)">&nbsp;</td>
  16.   </tr>
  17.   <tr>
  18.     <td colspan="2">
  19.     <div id="panel">
  20.         Panel
  21.     </div>
  22.     </td>
  23.   </tr>
  24. </table>
  25. </body>
  26. </html>
En segundo lugar, procedemos a cargar el ajax.js:

Código JavaScript: 
Ver original
  1. <script language="javascript" type="text/javascript">
  2.  
  3.  
  4. function cargaSolapa(selectDestino,aspDestino,valor)
  5. {
  6.     // 
  7.         ajax=nuevoAjax();
  8.         // Envio al servidor a que lea la página 
  9.         ajax.open("GET", aspDestino, true);
  10.         ajax.onreadystatechange=function()
  11.         {
  12.             if (ajax.readyState==4)
  13.             {
  14.                 document.getElementById(selectDestino).innerHTML = ajax.responseText;
  15.                 }
  16.             }
  17.         ajax.send(null);
  18.     
  19. }
  20.  
  21.  
  22. function nuevoAjax()
  23. {
  24.     /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
  25.     lo que se puede copiar tal como esta aqui */
  26.     var xmlhttp=false;
  27.     try
  28.     {
  29.         // Creacion del objeto AJAX para navegadores no IE
  30.         xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  31.     }
  32.     catch(e)
  33.     {
  34.         try
  35.         {
  36.             // Creacion del objet AJAX para IE
  37.             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  38.         }
  39.         catch(E) { xmlhttp=false; }
  40.     }
  41.     if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp=new XMLHttpRequest(); }
  42.  
  43.     return xmlhttp;
  44. }
  45. </script>

Por último, solo nos falta modificar las páginas html que queremos mostrar al hacer "Click" sobre la tabla!

Espero os haya sido de utilidad!
Última edición por combuilder; 08/09/2009 a las 07:45