Refrescar div en ajax con javascript

Zack78 · #1 (**permalink**) 28/07/2009, 13:28

Hola todos de foros del web, tengo un chat que está hecho en php con ajax y mysql, justamente me han colaborado los usuarios de foros del web, estoy muy agradecido por su apoyo muchas gracias todos.

El chat ya esta funcionado, pero hay problema al momento de refrescar los divs : div de la sala de chat, div de lista de usuarios que están en el chat
Al comienzo todo anda bien, pero cuando empiezan a conversar varias personas se cuelga la ventana emergente o el navegador o se hace muy lento
En la sala se muestra 255 caracteres de conversación máximo
Por favor ayúdenme a solucionar este problema de que se cuelga el explorador o se pone muy lento

Aquí les paso la dirección donde está el chat, para que ustedes mismo prueben, se darán cuenta del problema.
Muchas gracias
http://www.elsitiodenegocios.com

Aquí les paso el script AJAX

Código HTML:

function objetoAjax(){
	var xmlhttp=false;
	try{
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	}catch(e){
		try{
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}catch(E){
			xmlhttp = false;
  		}
	}

	if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}

function ActualizarEstadoUser()
{
		divContenido = document.getElementById("actualizar_estado_user");
		var ajax=objetoAjax();
		ajax.open("POST", "../clientes/actualizar_estado_user.php", true);
		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax.send(null);
		ajax.onreadystatechange=function()
		{
			if (ajax.readyState==4)
			{  
				divContenido.innerHTML=ajax.responseText;
			}
		}
}
function enviarMensaje()
{
	var usu=document.getElementById('idusuario');
	var usu=usu.value;
	var men=document.getElementById('texto');
	var men=men.value;
	
	ajax=objetoAjax();
	ajax.open("POST", "chat.php",true);
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			consultaMensajes();
			LimpiarCampoTexto();
		}
	}
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	ajax.send("usuario="+usu+"&mensaje="+men)
}

function consultaMensajes()
{
	
		divContenido = document.getElementById('chatList');	
		var usu=document.getElementById('idusuario');
		var nusuario=document.getElementById('nusuario');
		var usu=usu.value;
		var nusuario=nusuario.value;
		
		var ajax=objetoAjax();
		
		ajax.open("POST", "consulta.php", true);
		
		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax.send("usuario="+usu);
		ajax.onreadystatechange=function()
		{
			if (ajax.readyState==4)
			{  
				divContenido.innerHTML=ajax.responseText;
			}
		}
	//cada 3 segundos consulta por nuevos mensajes
	setTimeout('consultaMensajes();',3000);
	
}
//Actualiza el la conversación
window.onload = function (){
	consultaMensajes();
	ListaUserSesion();
}


function ListaUserSesion()
{
	    divlist_usuarios = document.getElementById('list_usuarios');			
		var ajax=objetoAjax();
		
		ajax.open("POST", "lista_user_activo_sesion.php", true);
		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax.send("v="+1);
		ajax.onreadystatechange=function()
		{
			if (ajax.readyState==4)
			{  
				divlist_usuarios.innerHTML=ajax.responseText;
			}
		}
	//cada 3 segundos consulta por nuevos mensajes
	setTimeout('ListaUserSesion();',3000);
}

//Al pulsar tecla ENTER envia el mensaje
function pulsar(e)
{
		var evento=e.keyCode || e.wich;
		if(evento==13)
		{
			enviarMensaje();
			//scrol();
			ListaUserSesion();
			return false;
		}
		return true;
}

function LimpiarCampoTexto()
{
	var men=document.getElementById('texto');
	var men=men.value="";
	document.getElementById('texto').focus(); return;
}

//Control de scroll
//function scrol()
onload=function(){
	//ListaUserSesion();//function para actualizar usuarios de la lista
	setInterval(function(){if(window.parar)return;document.getElementById('chatList').scrollTop=document.getElementById('chatList').scrollHeight},30);
}

SCRIPT HTML

Código HTML:

<body onunload="ActualizarEstadoUser()">
<div id="contenidoweb">
	<div id="cabecera">
		<div id="publicidad"></div>
		<div id="barramenu">
			<div id="logo">
				  <img src="../images/logo.gif" border="0" width="340" height="63" alt="El Sitio de Negocios"/>
			</div>
		</div>
	</div>

<div style="padding-left:10px; padding-left:10px; padding-top:5px;">
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center" >
  <tr>
    <td style="padding-left:0px; padding-top:0px;">
	<div id="chatList" style="overflow:auto; width:600px; height:354px; padding-left:3px; padding-right:3px; border:2px solid; color:#CCCCCC;"  onMouseOver="parar=1" onMouseOut="parar=0"><?php require_once('consulta.php');?>
	</div>
	<div>
			<textarea name="texto" id="texto" rows="1" cols="50" style="width:608px; height:42px;" onKeyPress="pulsar(event);" class="TextoContenido"></textarea>
	
		    <input type="submit" name="Submit" value="Enviar" onClick="javascript:enviarMensaje();">
			  <input name="idusuario" type="hidden" id="idusuario" value="<?php echo $_SESSION['idcliente'];?>">
		  <input name="nusuario" type="hidden" id="nusuario" value="<?php echo $_SESSION['login'];?>">
</div>
	</td>
    <td valign="top" style="padding-top:0px; padding-left:1px; padding-right:0px;">
	
<div id="list_usuarios" style="overflow:auto; width:200px; height:354px; padding-left:3px; padding-right:3px; border:2px solid; color:#CCCCCC;"><?php require_once('lista_user_activo_sesion.php');?></div>
	
	</td>
  </tr>
</table>
<div id="actualizar_estado_user"></div>
</div>
</body>

rifarca · #2 (**permalink**) 30/10/2009, 14:45

hoal amigo, bueno viendo a simple vista tu ajax tine un probelma en cuando envias la findo al http ajax.send(null ) debe ser al valro que envias los que debes colocar ahi en este caso esta como para funcionar bien via el metodo get