Ok... le pongo el código sencillito, ya lo hice en Dreamweaver, lo pueden copiar y pegar para que vean. Son 4 documentos... el index.php, el procesador_ajax.js, y los documentos que llama el ajax que son dos, Procesador_1.php y Procesador_2.php
index.php
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="ajax_javascrtipt.js"></script>
</head>
<body>
<div id="contenedor" style="background-color:#CCCCCC; border:2px solid #000000; position:relative; height: 50px; width: 100px"></div>
<p>
Haciendo Click aqui verán el Primer dato en el DIV Contenedor
<input type="submit" name="button2" id="button2" value="DATO 1" onclick="dato_1(1)" />
( El resultado es "1" )
</p>
<p>
Haciendo Click aqui verán el Segundo Dato en el DIV Contenedor
<input type="submit" name="button" id="button" value="DATO 2" onclick="dato_2(2)" />
(Este deberia adjuntarse al dato anterior, pero como verán lo que hace es sustituir el primero) El resultado es "2", mientras que debería ser "12"
</p>
</body>
</html>
procesador_ajax.js
Código:
function conectar_XMLHTTPRequest()
{
try
{req = new XMLHttpRequest();}
catch(err1)
{
try
{req = new ActiveXObject("Msxml2.XMLHTTP");}
catch (err2)
{
try
{req = new ActiveXObject("Microsoft.XMLHTTP");}
catch (err3)
{
req = false;
}
}
}
return req;
}
var conexion = conectar_XMLHTTPRequest();
function dato_1(valor)
{
var valores = 'valor='+valor;
var url = 'Procesador_1.php';
conexion.open("POST", url, true);
conexion.onreadystatechange = function () {
if (conexion.readyState == 4)
{
if(conexion.status == 200)
{
var contenedor = document.getElementById('contenedor');
contenedor.innerHTML = conexion.responseText;
}
}
}
conexion.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
conexion.send(valores);
}
function dato_2(valor)
{
var valores = 'valor='+valor;
var url = 'Procesador_2.php';
conexion.open("POST", url, true);
conexion.onreadystatechange = function () {
if (conexion.readyState == 4)
{
if(conexion.status == 200)
{
var contenedor = document.getElementById('contenedor');
contenedor.innerHTML = conexion.responseText;
}
}
}
conexion.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
conexion.send(valores);
}
Procesador_1.php
Código PHP:
<?
$valor = $_POST['valor'];
echo $valor;
?>
Procesador_2.php
Código PHP:
<?
$valor = $_POST['valor'];
echo $valor;
?>
Como verán el resultado de la respuesta AJAX número 2, no se acumula al lado de la primera respuesta, sino que la sustituye, y bien como el amigo
emiliodeg lo dice, lo que quisiera es acumular respuestas en un mismo DIV o Contenedor, y no que una me sustituya la otra... !!
Gracias por su ayuda.