Ajax, BlogBabel API e mostrare alcune statistiche sul proprio blog (o almeno tentare di)
Monday, July 23rd, 2007Siccome oggi era giunta l’ora di iniziare a capire perché tutti considerano sto Web2.0 così ficco, mi sono messo a studiare Ajax (mattone fondamentale di tutto quello che è 2.0). Incidentalmente ho anche scoperto che BlogBabel ha rilasciato non molto tempo fa delle API (no, non gli insetti) pubbliche.
Fondendo i due task assieme e raschiando dal fondo del barile le mie (poche) capacità di programmazione ho deciso di aggiungere delle statistiche (una a dire il vero) di BlogBabel in questo blog (se apri la sidebar dovresti trovarla).
Ipotizzando che mi interessi solo la posizione generale nella classifica di BlogBabel (e voglia il risultato in formato testo) mi basta usare un URL del tipo http://it.blogbabel.com/api/v1/blog/dat;a=rank&f=txt/.
La mia vena divulgativa si è appena esaurita e quindi vi sparo tra capo e collo tutto il codice javascript da mettere all’interno del campo <head> del vostro blog.
<script type="text/javascript">
//mi creo il mio bell'oggetto
HttpRequestvar receiveReq = getXmlHttpRequestObject();
//da dove prendo i dati (questo te lo spiego più avanti nel post)
var url = "http://dat.perdomani.net/dat.txt";
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); // Se sei uno bravo che non usa IE
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); // Se non sei bravo
} else {
document.getElementById("blogbabel").innerHTML = "(passa a firefox se vuoi saperlo)"; //Se sei vecchio
}
}
function myBlogBabelPosition() {
//Se l'XmlHttpRequest si degna di darci attenzione
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
//Voglio una get asincrona dove ti dico io
receiveReq.open("GET", url, true);
//Appena sei pronto avvertimi che ti dico cosa fare
receiveReq.onreadystatechange = handleRequest;
//Speriamo non si perda per strada
receiveReq.send(null);
}
}
function handleRequest(){ if(receiveReq.readyState == 4){
if(receiveReq.status == 200){
//Scrivo la posizione
document.getElementById("blogbabel").innerHTML = receiveReq.responseText;
}
}
}
A quanti, leggendo il codice, hanno subito storto il naso e mi avranno, con gran probabilità dato del deficiente, vorrei puntualizzare che le mie conoscenze di javascript sono evidentemente limitatissime e che, essendo io persona gentile e dotata di buone maniere, scarico la statistica blogbabel sul mio server (con un cronjob del tipo 0 */6 * * * wget -O dovelometto dadoveloprendo) ogni 6 ore. Evito così che OGNI pagina servita dal mio blog vada a fare una richiesta al server di BlogBabel (spero apprezzino la gentilezza) per una statistica che in fin dei conti cambia una volta al giorno.
Gli ultimi passi per far funzionare l’accrocchio sono quello di aggiungere l’attributo onload=”myBlogBabelPosition();” al tag body e, da qualche parte nella pagina, uno span con id “blogbabel” e senza testo tra il tag di apertura e chiusura.
Chissà se quello che ho fatto è il modo corretto di pensare Ajax e, ancor più importante, se non espongo il blog a problemi di sicurezza …
Chiaramente se vi interessa avere le statistiche nel vostro blog vi consiglio di usare il plugin di undolog o il nuovissimo di P|xeL o quello più nuovissimo ancora di undolog (ragazzi adesso basta però 
(i plugins sono per wordpress ma facilmente portabili ad altre piattaforme, credo).
UPDATE: certo, sono cosciente del fatto che essendo le informazioni statiche e per giunta salvate sul mio server non serviva proprio scomodare ajax, però mi piaceva fare così e così ho fatto =) (che poi, a dire il vero, non ho neanche idea di come aprire un file da php …)
UPDATE2: se non volete usare il mio bel metodo con il crontab e volete, invece,
rompere i coglioni al server di BlogBabeli dati aggiornati ad OGNI caricamento di OGNI pagina per OGNI visitatore del vostro blog allora usate codice tipo questo:<span id="bb"></span> <script type="text/javascript"> function show_rank(o){ document.getElementById("bb").innerHTML = o.rank; } </script> <script type="text/javascript" src="http://it.blogbabel.com/api/v1/blog/dat;a=rank&f=js&c=show_rank/"></script>sparso come il prezzemolo un po’ qua e un po’ là nella pagina.