My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Sunday, May 24, 2009

Basic Ajax Twitter Application

Yesterday I posted a work in progress of a Full PHP Ajax Proxy, today I would like to show you what you could do with that file.

Twitter API Directly via Ajax


Thanks to basic realm authentication support, it is extremely simple to create your own twitter app in your home page. Here the example:

<style type="text/css">
div.twit {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
width: 320px;
}
div.twit h3,
div.twit h4 {
margin: 0;
padding: 0;
}
div.twit h3 {
font-size: 10pt;
color: blue;
}
div.twit h4 {
font-size: 7pt;
font-weight: normal;
text-align: right;
color: #999;
}
div.twit span {
font-size: 8pt;
}
</style>
<script type="text/javascript" src="http://vice-versa.googlecode.com/svn/trunk/build/vice-versa.min.js"></script>
<script type="text/javascript">
function addIntoList(info, container){
var div = document.createElement('<div class="twit"></div>'),
h3 = div.appendChild(document.createElement("h3")),
span= div.appendChild(document.createElement("span")),
h4 = div.appendChild(document.createElement("h4"))
;
h3.innerText = info.user.screen_name;
h4.innerText = info.created_at.substring(0, 19);
span.innerHTML = info.text.replace(/([a-zA-Z]+:\/\/[^\s]+)/g, '<a href="$1">$1</a>');
container.insertBefore(div, container.firstChild);
};

onload = function(){
var xhr = new XMLHttpRequest;
xhr.open(
"GET", "proxy.php?url=" +
"http://twitter.com/statuses/friends_timeline.json" + "?_=" + Math.random(),
false,
"YOURNAME",
"YOURPASS"
);
xhr.send(null);
if(199 < xhr.status && xhr.status < 400){
document.body.innerHTML = "";
for(var
list = Function("return " + xhr.responseText)().reverse(),
length = list.length,
i = 0;
i < length; ++i
)
addIntoList(list[i], document.body);
};
setTimeout(onload, 10000); // again after 10 seconds
};
</script>


Be Careful!!!


First of all it is not a good idea to put user and password directly in your page source code, so try locally but do not put online. Secondly, I did not say anything yet about side effects and security problems related to this PHP proxy I am working on ....so, as I wrote in the other post source, "do not try at home"

3 comments:

DBJDBJ said...

vice-versa, is ergo not required in the code above ...

Andrea Giammarchi said...

InnerText plus XMLHttpRequest for IE ... do 4Kb matter that much? :)

DBJDBJ said...

What is stopping you to leave some equally "nasty" comment on x.dbjsystems.com/blog :)