Ejemplo de Ajax y ASP para principiantes

combuilder · #1 (**permalink**) 08/09/2009, 07:12

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<!-- #include file="ajax.js" -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Prueba Ajax</title>
</head>
 
<body>
<table width="728" height="167" border="1">
<caption>
    Prueba Ajax
  </caption>
  <tr>
    <td width="108" height="44"><img src="shade.gif" width="83" height="45" onClick="cargaSolapa('panel','readme.html',0)" /></td>
    <td width="604" onclick="cargaSolapa('panel','demo1.asp',0)">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">
    <div id="panel">
        Panel
    </div>
    </td>
  </tr>
</table>
</body>
</html>

En segundo lugar, procedemos a cargar el ajax.js:

Código JavaScript:

Ver original<script language="javascript" type="text/javascript">
 
 
function cargaSolapa(selectDestino,aspDestino,valor)
{
    // 
        ajax=nuevoAjax();
        // Envio al servidor a que lea la página 
        ajax.open("GET", aspDestino, true);
        ajax.onreadystatechange=function()
        {
            if (ajax.readyState==4)
            {
                document.getElementById(selectDestino).innerHTML = ajax.responseText;
                }
            }
        ajax.send(null);
    
}
 
 
function nuevoAjax()
{
    /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
    lo que se puede copiar tal como esta aqui */
    var xmlhttp=false;
    try
    {
        // Creacion del objeto AJAX para navegadores no IE
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
        try
        {
            // Creacion del objet AJAX para IE
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(E) { xmlhttp=false; }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp=new XMLHttpRequest(); }
 
    return xmlhttp;
}
</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!