javascript - 当从网络服务器提供服务时，写入 .innerHTML 不起作用，但当作为文件浏览时，写入 .innerHTML 不起作用，这可能是什么原因造成的？

Question

我正在使用 mootool 的 Request.JSON 从 Twitter 检索推文。收到它后，我将写入目标 div 的 .innerHTML 属性。当我在本地将其作为文件进行测试时，即 file://位于 URL 中，我会在网页上看到格式化的推文。当我从本地网络服务器(即 http://)提供此服务时，格式化的推文不会显示在我的 div 中。

这可能是什么原因造成的？ (我已经在 OSX 上的 Safari 和 Chrome 中测试了这一点...相同的行为)我已包含来自页面 HEAD 部分的代码。另外，当我在 Safari 中调试 Javascript 时:

onComplete 回调函数声明出现“TypeError: Result of expression 'data' [undefined] is not an object”。

<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>

更新

好的。所以我找到了两个答案...一个用 mootools，一个用 jQuery...感谢大家的建议。

对于 mootools，确保您获得带有 Request.JSONP 类的“更多”.js 文件 http://mootools.net/more/(我很抓狂，因为我遇到了构造函数错误......我终于意识到我没有 Request.JSONP 类!!!)

然后只需将代码更改为:

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

对于 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。