Sscripts: Ejemplo AJAX (Exemple AJAX)

AJAX es una técnica de desarrollo para webs que nos permite ejecutar aplicaciones capaces de mantener una comunicación asíncrona, en segundo plano, con el servidor. Aquí tenéis un ejemplo de su funcionamiento.

- La función "XHConn" es la que nos crea el objeto y permite la conexión.

- "cargar_contenido" se llama al clicar al botón y es la que cargará el contenido de la capa que se encuentra en "request.php". Lo realmente interesante es que el archivo "request.php" también puede contener consultas a bases de datos, la cual cosa permitirá tener dinamismo en la página.

AJAX és una tècnica de desenvolupament per webs que ens permet executar aplicacions capaces de mantenir una comunicación asíncrona, en segon plà, amb el servidor. Aquí teniu un exemple del seu funcionament.

- La funció "XHConn" és la que ens crea l'objecte i permet la conexió.

- "cargar_contenido" es crida al clicar el botó i és la que carregarà el contingut de la capa que es troba a l'arxiu "request.php". Lo realment interessant és que l'arxiu "request.php" també pot contenir consultes a bases de dades, la qual cosa permetrà tenir dinamisme a la pàgina.

index.php Código (Codi)
<html>
<head>
<script>
function XHConn()
{
    var xmlhttp, bComplete = false;
    try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
    catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
    catch (e) { try { xmlhttp = new XMLHttpRequest(); }
    catch (e) { xmlhttp = false; }}}
    if (!xmlhttp) return null;
    this.connect = function(sURL, sMethod, sVars, fnDone)
    {
        if (!xmlhttp) return false;
        bComplete = false;
        sMethod = sMethod.toUpperCase();

        try {
            if (sMethod == "GET")
            {
                xmlhttp.open(sMethod, sURL+"?"+sVars, true);
                sVars = "";
            }
            else
            {
                xmlhttp.open(sMethod, sURL, true);
                xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
                xmlhttp.setRequestHeader("Content-Type",
                    "application/x-www-form-urlencoded");
            }
            xmlhttp.onreadystatechange = function(){
                if (xmlhttp.readyState == 4 && !bComplete)
                {
                    bComplete = true;
                    fnDone(xmlhttp);
                }};
            xmlhttp.send(sVars);
        }
        catch(z) { return false; }
        return true;
    };
    return this;
}

function cargar_contenido()
{
    var myConn = new XHConn();
    if (!myConn) alert("XMLHTTP no esta disponible. Inténtalo con un navegador más actual.");
    var peticion = function (oXML) { document.getElementById('capa').innerHTML = oXML.responseText; };
    myConn.connect("request.php", "GET", "", peticion);
}
</script>
</head>
<body>
<a href="javascript:cargar_contenido();">Test</a>
<div id="capa" style="position:absolute; width:100px; height:100px; left:0px; top:80px;">
</div>
</body>

request.php Código (Codi)
<?php
echo "1234567890";
?>

Sscripts

dijous, 11 d’octubre del 2007

Ejemplo AJAX (Exemple AJAX)

2 comentaris:

scripts

secciones