¿Cargar asincrónicamente múltiples divs desde la base de datos?

Usando ajax y jQuery, me gustaría actualizar automáticamente algunos divs cada 5 minutos usando valores de una base de datos.

Por ejemplo:

<div id="1">One</div>

<div id="2">Two</div>

<div id="3">Three</div>

<div id="4">Four</div>

id="1" es el valor de identificación de la clave principal de la base de datos correspondiente. Me gustaría comparar esa clave con la base de datos y si One ha cambiado, el div mostrará el nuevo texto en su lugar.

¿Cuál sería la mejor manera de actualizar masivamente estos valores de forma asincrónica?

preguntado el 16 de mayo de 11 a las 16:05

¿Cambiaría el número de divs, se recargaría cada página o cambiarían cada llamada asíncrona ajax? -

La cantidad de divs podría cambiar con cada llamada. -

Solo para su información, las identificaciones solo numéricas no son técnicamente legales. Deben comenzar con un valor alfa. Sin embargo, muchos navegadores lo perdonan. -

@onteria_ wow, no lo sabía, gracias. -

2 Respuestas

Haga que su secuencia de comandos del lado del cliente cree una lista de ID para verificar y envíelas al servidor. El servidor puede realizar su consulta mediante un WHERE id IN (1,2,3,4) AND date_changed > $last_checked tipo consulta. Cree una matriz codificada con esos ID:

$array[] = array('id' => 1, 'txt' => "new text for div #1");
$array[] = array('id' => 4, 'txt' => "new text for div #4");

echo json_encode($array);

Cuando el cliente recibe la respuesta del servidor, simplemente itera sobre esa matriz y actualiza los divs correspondientes.

De esta manera, está haciendo solo una llamada AJAX, ejecutando solo una consulta, y una invocación de script maneja la actualización de todos los divs cambiados. Esto es especialmente útil si está utilizando sesiones predeterminadas basadas en archivos de PHP. Si dispara 4 llamadas ajax en poco tiempo, deberán procesarse en serie, ya que PHP bloquea el archivo de sesión mientras lo usa un script. El tiempo de respuesta se reduciría ya que cada solicitud ajax solo podría procesarse en secuencia en lugar de en paralelo. También hay menos sobrecarga de HTTP, ya que solo realiza una solicitud en lugar de 4 por separado.

contestado el 16 de mayo de 11 a las 20:05

Siguiendo la idea de Marc B, para el procesamiento de jQuery puede hacer algo como lo siguiente:

jQuery

var postString = 'check_ids=1,2,3,4';

$.get('/check-for-update', postString, function(response) {
  $(response).each(function() {
    $('div#' + this.id).html(this.txt);
  });
}, 'json');

Como nota al margen, no se recomienda usar solo números como ID. Considere prefijarlos con algo significativo como entry_1 entry_2 etc.

Respondido el 20 de junio de 20 a las 12:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.