Question

我通过创建用于在网页上显示外部RSS订阅源的脚本来自学javascript。

我修补的代码在本地运行很好。这是代码的屏幕抓取，产生完全所需的行为。该代码填充了“Blog：Shades of Grey”部分中的所有信息，除了我用硬编码的“tagged”：

但是当我将站点文件上传到我的服务器时，代码根本不起作用。这是我网站上代码的屏幕抓取，没有产生所需的行为......

alt text

这感觉就像我没有得到关于javascript如何在本地与服务器上运行的真正基本的东西。我做了半小时的谷歌搜索，没有看起来很有希望。所以我非常感谢你的帮助。

这是我的网站（正在建设中）http://jonathangcohen.com

以下是代码，也可以在http://jonathangcohen.com/grabFeeds.js找到。

/*Javascript for Displaying an External RSS Feed on a Webpage
Wrote some code that’ll grab attributes from an rss feed and assign IDs for displaying on a webpage. The code references my Tumblr blog but it’ll extend to any RSS feed.*/

window.onload = writeRSS;

function writeRSS(){
    writeBlog();
}

function writeBlog(){
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.open("GET","http://blog.jonathangcohen.com/rss.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 
    var x=xmlDoc.getElementsByTagName("item");
    //append category to link
    for (i=0;i<3;i++)
      {     
      if (i == 0){
          //print category
          var blogTumblrCategory = x[i].getElementsByTagName("category")[0].childNodes[0].nodeValue
          document.getElementById("getBlogCategory1").innerHTML =  
         '<a class="BlogTitleLinkStyle" href="http://blog.jonathangcohen.com/tagged/'+blogTumblrCategory+'">'+blogTumblrCategory+'</a>';
          //print date
          var k = x[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue
          thisDate = new Date();
          thisDate = formatTumblrDate(k);
          document.getElementById("getBlogPublishDate1").innerHTML = thisDate;
          //print title
          var blogTumblrTitle = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue
          var blogTumblrLink = x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue
          document.getElementById("getBlogTitle1").innerHTML =
          '<a class="BlogTitleLinkStyle" href="'+blogTumblrLink+'">'+blogTumblrTitle+'</a>';
          }
     if (i == 1){
        //print category
        var blogTumblrCategory = x[i].getElementsByTagName("category")[0].childNodes[0].nodeValue
        document.getElementById("getBlogCategory2").innerHTML = 
        '<a class="BlogTitleLinkStyle" href="http://blog.jonathangcohen.com/tagged/'+blogTumblrCategory+'">'+blogTumblrCategory+'</a>';
        //print date
        var k = x[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue
        thisDate = new Date();
        thisDate = formatTumblrDate(k);
        document.getElementById("getBlogPublishDate2").innerHTML = thisDate;
        //print title
        var blogTumblrTitle = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue
        var blogTumblrLink = x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue
        document.getElementById("getBlogTitle2").innerHTML =
        '<a class="BlogTitleLinkStyle" href="'+blogTumblrLink+'">'+blogTumblrTitle+'</a>';
        }
     if (i == 2){
        //print category
        var blogTumblrCategory = x[i].getElementsByTagName("category")[0].childNodes[0].nodeValue
        document.getElementById("getBlogCategory3").innerHTML = 
        '<a class="BlogTitleLinkStyle" href="http://blog.jonathangcohen.com/tagged/'+blogTumblrCategory+'">'+blogTumblrCategory+'</a>';
        //print date
        var k = x[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue
        thisDate = new Date();
        thisDate = formatTumblrDate(k);
        document.getElementById("getBlogPublishDate3").innerHTML = thisDate;
        //print title
        var blogTumblrTitle = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue
        var blogTumblrLink = x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue
        document.getElementById("getBlogTitle3").innerHTML =
        '<a class="BlogTitleLinkStyle" href="'+blogTumblrLink+'">'+blogTumblrTitle+'</a>';
        }
      }
}

function formatTumblrDate(k){
    d = new Date(k);
    var curr_date = d.getDate();
    var curr_month = d.getMonth();
    curr_month++;
    var curr_year = d.getFullYear();
    printDate = (curr_month + "/" + curr_date + "/" + curr_year);
    return printDate;
}

谢谢！

Answer 1

您正在遇到same origin policy，其中有been discussed many times on Stack Overflow。

Answer 2

AJAX在同源策略上运行，即您只能调用自己的服务器。

修复将调用您的服务器，而服务器又调用目标服务器。

这是如何（给你一般情况;））

alt text

Answer 3

您正在对另一个域执行XmlHttpRequest，跨越安全沙箱并违反同源策略，这意味着对blog.jonathangcohen.com/rss.xml的请求失败，并且您什么也得不到。< / p>

唯一可行的解决方案是在您的jonathangcohen.com域上使用jsonp或代理，例如只包含以下内容的简单php脚本可以解决问题：

<?php
header('Content-Type: text/xml');
echo file_get_contents('http://blog.jonathangcohen.com/rss.xml');

然后您从http://jonathangcohen.com/rss-proxy.php

请求数据

Answer 4

这似乎是权限的事情。跨站点脚本和所有。浏览器在本地页面上可能更宽松（可能）但不允许您在实际服务器上执行此操作。您需要在服务器上获取该数据，然后将其提供给您的javascript。

Answer 5

这是一个跨域政策的事情，你可以在这里阅读更多信息：http://arunranga.com/examples/access-control/

为了让mydomain.com上的javascript从blog.mydomain.com获取资源，blog.mydomain.com需要发送响应头Access-Control-Allow-Origin: http://mydomain.com

我知道的另一种方法是在blog.mydomain.com上设置脚本，例如blog.mydomain.com/feed.php，它将返回有效的JSONP响应。为了使用它，您可以创建<script>元素，而不是使用XMLHttpRequest，并将源设置为http://blog.mydomain.com/feed.php。 feed.php的输出应该调用javascript函数并传入XML feed的实际内容，如果这是有道理的。

编辑：其他答案显然也会起作用，关于在您的网站上使用代理脚本（读入并吐出Feed内容）的具体答案将更加容易，只需要更改网址在你现有的javascript中。

Javascript在本地运行良好，但不在我的服务器上

5 个答案: