Writing to .innerHTML doesn't work when served from webserver but works when browsed as a file, what could be causing this?

Question

I'm using mootool's Request.JSON to retrieve tweets from Twitter. After I receive it, I write to the .innerHTML property for my target div. When I test this locally as a file, ie file:// is in the URL, I see my formatted tweets on the webpage. When I serve this from my local webserver, ie http://, the formatted tweets are not showing up in my div.

What could be causing this? (I've tested this in Safari and Chrome on OSX...same behavior) I've included the code that's from the HEAD section of my page. Also, when I debug the Javascript in Safari:

"TypeError: Result of expression 'data' [undefined] is not an object" appears for the onComplete callback function declaration.

<script type="text/javascript" src="js/mootools-1.3-full-compat.js"></script>
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"></script>
<script type="text/javascript">
    var jSonRequest = new Request.JSON(
    {
        url:'http://search.twitter.com/search.json?q=+nytimes+OR+TheEconomist',
        onSuccess: function(data) {
            var target = document.getElementById('twitter_content');
            target.innerHTML = ''; //clear the contents
            for(var i = 0; i < data.results.length ; i++) {
                var tweet = data.results[i];

                //process it and add html for hashtags and links
                var processed_tweet_text = tweet.text;

                //process HTTP urls first...otherwise we would get the added links for the hashtags
                var twre = /(http\:\/\/[a-zA-Z0-9.\/]+)/ig
                processed_tweet_text = processed_tweet_text.replace( twre, '<a href="$1">$1</a>' );

                //process hashtags and add link
                twre = /\@([a-zA-Z0-9_\-]+)/ig; //match twitter accounts starting with @ and includes and of these characters: a-z, A-Z, 0-9, "_" and "-" characters.
                processed_tweet_text = processed_tweet_text.replace( twre, '<a href="http://twitter.com/$1">@$1</a>' );

                target.innerHTML += '<div class="tweet"><a href="http://twitter.com/' + tweet.from_user + '">' + '<img src="' + tweet.profile_image_url + '"><div class="tweet_text"><div class="tweet_user"><a href="http://twitter.com/' + tweet.from_user + '">' + tweet.from_user + '</a></div><div class="tweet_message">' + processed_tweet_text + '</div></div></div>';
                //console.log(tweet.from_user); 
            }
        }
    }).send();
</script>

UPDATE

OK. So I've found two answers...one with mootools and one with jQuery...thanks to everyone's suggestions.

For mootools, make sure you get the "more" .js file with the Request.JSONP class http://mootools.net/more/ (I was pulling my hair out because I was getting a constructor error...and I finally realized that I didn't have the Request.JSONP class!!!)

Then just change code to this:

var jSonRequest = new Request.JSONP(
{...

For JQuery:

//adding callback=? forces a JSONP call...so no issues with AJAX cross-domain requests  
$.getJSON("http://search.twitter.com/search.json?q=+nytimes+OR+TheEconomist&callback=?",
  function(data) {...

Answer 1

尝试使用new Request.JSONP而不是new Request.JSON 。

Answer 2

I think you have to decode the data

var object = JSON.decode(data);

You can read this document

this is a sample

var jsonRequest = new Request.JSON({
    url: 'http://somesite.com/tellMeAge.php',
    onSuccess: function(person){
        alert(person.age);    // alerts "25 years".
    }
})

look onSuccess not onComplete