Jquery: Invocar dinamicamente JSONP

por | Oct 11, 2010 | AJAX, javascript | 1 Comentario

Hace poco encontré un interesante tutorial en nettuts que explica como usar jsonp para mostrar los último en twitter sin embargo este mismo script puede ser usado con cualquier origen de datos jsonp para ello basta con cambiar los nombres de las variables.

La estructura

Lo primero es crear nuestro esqueleto HTML donde vamos a mostrar los datos

1
2
<h2> Latest Tweets </h2>
    <ul id="tweets"> </ul>

AJAX para mostrar JSONP

Luego de incluir la librería jquery debemos buscar los últimos mensajes en twitter para esto usamos el siguiente script:

1
2
3
4
5
6
7
8
9
10
(function() {    
        var UpdatePanel = {
            init : function(options) {
                this.options = $.extend({
                    interval : 5000,
                    number : 3                 
                }, options);

                this.updater();
            },

Aqui vamos definiendo algunos parámetros como por ejemplo el tiempo para actualizarse (5000), la cantidad de elementos (3)

1
2
3
4
5
6
7
updater : function() {
                (function updateBox() {
                    this.timer = setTimeout(function() {
                        updateIt();
                        updateBox();
                    }, UpdatePanel.options.interval);
                })();

El sgte. paso es definir la función updater la cual a su vez va a invocar a updateIt y updateBox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
updateIt();

                function updateIt() {
                    $.ajax({
                                                /// tipo de llamada AJAX, url, y tipo JSONP
                        type : 'GET',
                        url : UpdatePanel.options.url,
                        dataType : 'jsonp',

                        error : function() {},
                                                // Si se consiguen los datos debe actualizar los resultados
                        success : function(results) {
                            var theTweets = '',
                                 elem = UpdatePanel.options.elem.empty();

                            $.each(results.results, function(index, tweet) {                       
                                if ( index === UpdatePanel.options.number ) {
                                    return false;
                                }
                                else {
                                                                        // Definimos lo que vamos a mostrar
                                    theTweets += '<li>' + tweet.text + '</li>';
                                }
                            });
                                                        // Finalmente añadimos los ultimos comentarios
                            elem.append(theTweets);
                        }
                    });

Aqui invocamos y definimos la función updateIt();

1
2
3
4
5
6
UpdatePanel.init({
        interval : 5000,
        number : 5,
        url : "http://search.twitter.com/search.json?q=batman",
        elem : $('#tweets')
    });

Finalmente vamos a inicializar nuestro objeto, definiendo los parámetros respectivos además del lugar donde se mostrarán los útimos mensajes

Pueden ver el código completo AQUI

Y el ejemplo funcionado AQUI

1 Comentario

  1. usuario
    usuario el abril 18, 2011 a las 10:54 pm

    Hola! una consulta, como podría a esto agregarle la foto y el nombre de la persona que twiteo eso?

    Gracias!