Johan de Bruin » AJAX http://www.johandebruin.com Programación en php, tutorial de api wordpress y posicionamiento en buscadores seo. Sun, 05 Feb 2012 15:18:06 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Actualizar tu feed de twitter con AJAX http://www.johandebruin.com/actualizar-tu-feed-de-twitter-con-ajax/ http://www.johandebruin.com/actualizar-tu-feed-de-twitter-con-ajax/#comments Tue, 05 Jan 2010 12:43:13 +0000 Johan de Bruin http://www.johandebruin.com/?p=183 Hoy con la nueva categoria AJAX os mostrare un código en AJAX que os permitira actualizar los mensajes de twitter sin tener que actualizar la página. Para ello, tendremos que dividir el código de programación en 2 archivos. el código de AJAX se mostrará en el archivo cliente, mientras que el código twitterfeed.php será de donde obtendrá los nuevos feed el código en AJAX.

Primero definiremos el código javascript necesario para poder actualizar el feed de twitter. Emplazaremos este código junto al resto de código javascript de la página (orden porfavor).

<script type="text/javascript">
//Primero creamos el objeto XMLHttpRequest que nos permite establecer conexiones HTTP
xmlhttp = new XMLHttpRequest();
//Con esta función actualizamos el contenido de cualquier div con el de algún archivo
function makerequest(serverPage, objID)
{
    var obj = document.getElementById(objID);
    xmlhttp.open("GET", serverPage);
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            obj.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null);
}
</script>

Ahora, debemos definir el código HTML, la primera vez que mostremos el feed de twitter lo haremos con PHP con tal de que los buscadores puedan rastrearlo, luego usaremos un botón para actualizar el feed usando AJAX y el usuario no tenga que estar refresando la página web.

<ul>
    <div id="twitterfeed">
        <?php include("twitterfeed.php"); ?>
    </div>
</ul>
<center><input type="button" onclick="makerequest('twitterfeed.php','twitterfeed')" value="Actualizar"></center>

Ahora solo nos queda crear twitterfeed.php, para ello usaremos una función que ya publique con anterioridad: Mostrar feed de busqueda en twitter

<?php twitterfeed('<li>','</li>','johandebruin','5'); ?>

Y con esto queda terminado el código, podeis verlo funcionando en esta página web: Blog nexus one.

]]> http://www.johandebruin.com/actualizar-tu-feed-de-twitter-con-ajax/feed/ 1