AJAX PHP sencillo: una función para múltiples elementos

mrgubu · #1 (**permalink**) 29/11/2008, 06:58

Hola, estoy empezando con AJAX y a partir de las funciones XMLHttpRequest de quirksmode consigo cargar texto en un <div> haciendo una llamada a un archivo php. Gracias a la función handleRequest() cuando hago click en el 'div1' se carga el contenido dinámico en el 'div1reciberespuesta'.

Lo que quiero hacer es modificar dicha función handleRequest para que me permita ejecutar la función sendRequest() desde cualquier div de la página, que se llamarían div2, div3, etc, y recibir la respuesta en 'div2reciberespuesta', 'div3reciberespuesta', etc.

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es"> 
 
<head> 
 
<title> quircksmode</title> 
 
<script type="text/javascript"> 
<!-- 
function sendRequest(url,callback,postData) { 
    var req = createXMLHTTPObject(); 
    if (!req) return; 
    var method = (postData) ? "POST" : "GET"; 
    req.open(method,url,true); 
    req.setRequestHeader('User-Agent','XMLHTTP/1.0'); 
    if (postData) 
        req.setRequestHeader('Content-type','application/x-www-form-urlencoded'); 
    req.onreadystatechange = function () { 
        if (req.readyState != 4) return; 
        if (req.status != 200 && req.status != 304) { 
//            alert('HTTP error ' + req.status); 
            return; 
        } 
        callback(req); 
    } 
    if (req.readyState == 4) return; 
    req.send(postData); 
} 
 
var XMLHttpFactories = [ 
    function () {return new XMLHttpRequest()}, 
    function () {return new ActiveXObject("Msxml2.XMLHTTP")}, 
    function () {return new ActiveXObject("Msxml3.XMLHTTP")}, 
    function () {return new ActiveXObject("Microsoft.XMLHTTP")} 
]; 
 
function createXMLHTTPObject() { 
    var xmlhttp = false; 
    for (var i=0;i<XMLHttpFactories.length;i++) { 
        try { 
            xmlhttp = XMLHttpFactories[i](); 
        } 
        catch (e) { 
            continue; 
        } 
        break; 
    } 
    return xmlhttp; 
} 
 
 
function handleRequest(req) { 
    var writeroot = document.getElementById('div1reciberespuesta'); 
    writeroot.innerHTML = req.responseText; 
} 
 
 
//--> 
</script> 
</head> 
 
<body> 
 
 
<div id="div1" onclick='sendRequest("php.php?q=menu1",handleRequest)'>click here (funciona)</div> 
<div id="div1reciberespuesta"></div> 
 
 
.... 
<!-- el resto de la página estaría llena de divs como estos con sus correspondientes onclicks en div2, div3, etc--> 
<div id="div2">click here</div> 
<div id="div2reciberespuesta"></div> 
 
<div id="div3">click here</div> 
<div id="div3reciberespuesta"></div> 
 
 
</body> 
 
</html>

Sé que puedo detectar de dónde viene el evento con:

if (!e) var e = window.event;
elemento = (e.target) ? e.target.id : e.srcElement.id;

Pero me lío y no consigo aplicarlo en la práctica.
Gracias por adelantado.

David · #2 (**permalink**) 29/11/2008, 21:00

Puedes hacer que tu función handleRequest reciba como parámetro el id del div, y luego le envías ese parámetro desde la función sendRequest de la forma como ya comentaste. Saludos

.

mrgubu · #3 (**permalink**) 30/11/2008, 04:10

Gracias David pero no consigo hacer lo que dices en la práctica, necesito un ejemplo más concreto.