Javascript отлично работает локально, но не на моем сервере - PullRequest
Новая
       3

Javascript отлично работает локально, но не на моем сервере

2 голосов
/ 31 декабря 2010

Я учу себя javascript, создавая скрипт для отображения внешнего RSS-канала на веб-странице.

Код, который я исправил вместе, прекрасно работает локально. Это скриншот кода, производящий именно желаемое поведение. Код заполняет всю информацию внутри раздела «Блог: оттенки серого», за исключением «тегов», которые я жестко запрограммировал:

http://screencast.com/t/fNO5OPnmGPm2

Но когда я загружаю файлы сайта на свой сервер, код вообще не работает. Это скриншот кода на моем сайте, НЕ производящий желаемого поведения ...

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

Спасибо!

Ответы [ 5 ]

4 голосов
/ 31 декабря 2010
3 голосов
/ 31 декабря 2010

AJAX работает по политике того же источника, т. Е. Вы можете вызывать только свой собственный сервер.

Исправление будет означать вызов вашего сервера, который, в свою очередь, вызывает целевой сервер.

Вот как (чтобы дать вам общую картину;))

alt text

1 голос
/ 31 декабря 2010

Вы делаете XmlHttpRequest для другого домена, пересекаете изолированную программную среду безопасности и нарушаете политику того же источника, что означает, что запрос к blog.jonathangcohen.com/rss.xml не выполняется, и вы ничего не получаете от него.

Единственные жизнеспособные решения - это использовать jsonp или прокси на вашем домене jonathangcohen.com, например, простой скрипт php, который будет содержать только следующее, поможет: 

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

Затем вы запрашиваете данные у http://jonathangcohen.com/rss-proxy.php

0 голосов
/ 31 декабря 2010

Это политика перекрестного происхождения, о которой вы можете прочитать подробнее здесь: http://arunranga.com/examples/access-control/

Для того, чтобы javascript на mydomain.com мог получать ресурсы с blog.mydomain.com, blog.mydomain.com нужно будет отправить заголовок ответа Access-Control-Allow-Origin: <a href="http://mydomain.com" rel="nofollow">http://mydomain.com</a>

Единственный другой способ сделать это, о котором я знаю, это настроить скрипт на blog.mydomain.com, например blog.mydomain.com/feed..php, который вернет правильный ответ JSONP.Чтобы его использовать, вместо XMLHttpRequest вы должны создать элемент <script> и установить для источника значение http://blog.mydomain.com/feed.php.Вывод feed.php должен вызывать функцию javascript и передавать фактическое содержимое XML-канала, если это имеет смысл.

edit: Очевидно, что другие ответы также будут работать, и конкретный ответ об использованиипрокси-скрипт на вашем сайте (который читает и выдает содержимое канала) будет еще проще и потребует только изменения URL-адреса в вашем существующем javascript.

0 голосов
/ 31 декабря 2010

Это похоже на права доступа. Межсайтовый скриптинг и все. Браузер более снисходителен к локальным страницам (вероятно), но не позволит вам сделать это на реальном сервере. Вам нужно будет захватить эти данные на сервере и затем передать их в свой JavaScript.

...