views:

917

answers:

3

I'm trying to write my first ever bit of AJAX, reading the public tmeline from Twitter.

I have the following bits of code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Javascript Twitter client</title>
<script src="library/jquery-1.4.1.js" type="text/javascript"></script>
<script src="twitter.js" type="text/javascript"></script> 
</head>
<body>
<div id="twitter"><p>Blank text</p>
</div>
</body>
</html>

and

/* twitter.js */
TwitterURL = 'http://twitter.com/statuses/public_timeline.xml';

$(document).ready(function() {
  $.get(TwitterURL, function(data, textStatus) {
       $('#twitter').empty().text(textStatus);
      }
    );
  }
)

When I actually try to run it, I get a textStatus of "success", but I don't appear to be getting any data.

In Firebug, I get "XML Parsing Error: no element found Location: moz-nullprincipal:{82e4c9e5-0335-4fd8-b295-bfb8e10a6b18} Line Number 1, Column 1:" in the XML decode window.

If I use curl to download the URL, I get the XML that I'm expecting.

What am I doing wrong here?

Edited to add:

It appears that I'm actually getting data from twitter, the HTTP request appears to take about 5.5s, and firebug displays the following in the console. If it was the same origin policay causing problems, I would expect a totallyu different display.

Request headers:

Host: twitter.com
User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1.7) Gecko/20100106 Ubuntu/9.04 (jaunty) Shiretoko/3.5.7
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Origin: null

Http Response headers:

Date: Wed, 17 Feb 2010 22:49:32 GMT
Server: hi
X-RateLimit-Limit: 150
X-Transaction:  1266446972-35253-14922
Status: 200 OK
Etag: "4f77a9ba7d3794163fbe9561e4e829f4"-gzip
Last-Modified: Wed, 17 Feb 2010 22:49:32 GMT
X-RateLimit-Remaining: 149
X-Runtime: 0.23618
Content-Type: application/xml; charset=utf-8
Pragma: no-cache
X-RateLimit-Class: api
Cache-Control: no-cache, no-store, must-revalidate, pre-check=0, post-check=0
Expires: Tue, 31 Mar 1981 05:00:00 GMT
X-Revision: DEV
X-RateLimit-Reset: 1266450572
Set-Cookie: _twitter_sess=BAh7CDoRdHJhbnNfcHJvbXB0MDoHaWQiJWNlODVlYTQwNWQ0NWIxM2UzODNm%250AN2FhYzBhY2JkZGNlIgpmbGFzaElDOidBY3Rpb25Db250cm9sbGVyOjpGbGFz%250AaDo6Rmxhc2hIYXNoewAGOgpAdXNlZHsA--e866ff422f342146a298acbce26872cf6c04b7e8; domain=.twitter.com; path=/
Vary: Accept-Encoding
Content-Encoding: gzip
Connection: close
Transfer-Encoding: chunked
+2  A: 

Same origin policy, I'd guess.

Hmm. If you're actually getting data back, but Firefox isn't parsing it properly... have you tried doing this in JSON rather than XML (by requesting http://twitter.com/statuses/public_timeline.json)? Or specifying to jQuery that you expect XML back (by passing a third argument of "xml" to jQuery.get()?

Sixten Otto
It seems to be getting the data from twitter, so I'm not sure that is the problem.
Simon Callan
A: 

Check out JSONP http://jquery-howto.blogspot.com/2009/04/twitter-jsonjsonp-api-url.html

If you just want to disply your wteets on you blog for eg you can use http://twitter.com/goodies/widgets

Jason Roberts
+1  A: 

Hey Simon,

Using the code below should solve the issue.

/* Twitter.js - Code gets and displays the latest tweet from Twitter */
TwitterURL = 'http://twitter.com/statuses/public_timeline.json';
$(document).ready(function() {
  $.get(TwitterURL, function(json) {    
    $('#twitter').empty().text(json[0].text); // Subscript k of json object between 0 and 19 (inclusive)
  }, 'jsonp');
});

But I am still not sure why the GET request to the XML doesn't work.

Amar Ravikumar