javascript - 如何使用 JavaScript 在从外部文件加载广告列表的页面上轮播广告？

Question

我正在尝试使用 JavaScript 从文件加载变量。我找到了一些示例，但我似乎无法使其工作，并且确实需要一些帮助来使我的语法正确。

基本上，我想在页面上加载随机广告图像，但我希望从文件中提取广告列表。目前，我正在使用在互联网上找到的以下脚本加载图像:

    <script type="text/javascript">
     var picPaths = [
      '/images/ad-1.jpg',
      '/images/ad-2.jpg',
      '/images/ad-3.jpg',
      '/images/ad-4.jpg'
     ]
     var oPics = [];
     for(i=0; i < picPaths.length; i++){
      oPics[i] = new Image();
      oPics[i].src = picPaths[i];
     }
     curPic = Math.floor(Math.random()*oPics.length);
     window.onload=function(){
      document.getElementById('imgRotator').src = oPics[curPic].src;
     }
    </script>

我一直在尝试从文件中加载 picPath 变量值(而不是在代码中声明它)。我在 stackoverflow 上找到了一些代码，并尝试将其调整为以下内容:

    var picPaths = new XMLHttpRequest();
    picPaths.open('GET', '/images/liveimages.inc');
    picPaths.send();

我还创建了文件/images/liveimages.inc，其中包含以下内容:

     '/images/ad-1.jpg',
     '/images/ad-2.jpg',
     '/images/ad-3.jpg',
     '/images/ad-4.jpg'

但是，唉，它不起作用，而且我还不够程序员来修复它。 :-( 我认为我的语法不对，但我的代码也可能不对，因为我不是 JavaScript 专家。

如有任何帮助，我们将不胜感激，并感谢您花时间阅读(并回复)我的问题! :-D

Answer 1

如果您将数据文件存储为 JSON，则可以使用 AJAX/XMLHTTPRequest 来获取它，并使用 JSON.parse(在所有现代浏览器中可用)来读取它。

<小时/>

也许更简单的方法是使用一个仅包含数据的脚本，例如:

var picPaths = [
 '/images/ad-1.jpg',
 '/images/ad-2.jpg',
 '/images/ad-3.jpg',
 '/images/ad-4.jpg'
];

然后以正确的顺序包含您的脚本:

<script type="text/javascript" src="picpaths.js"></script>
<script type="text/javascript" src="ad_script.js"></script>

ad_script.js 将能够访问 picPaths。

您可以让一些服务器端脚本为您生成 picpaths.js，例如通过查看文件夹或数据库的内容并从中提取广告信息。