如何在使用JavaScript从外部文件加载广告列表的页面上旋转广告？

Question

I'm trying to load a variable from a file using javascript. I've found some examples but I can't seem to make it work and could really use some help on getting my syntax right.

Basically, I want to load a random ad image on a page, but I would like the list of ads to be pulled from a file. Currently I'm loading the images using the following script which I found on the internet:

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

I have been trying to get the picPath variable value to load from a file (instead of stating it in the code). I found some code here on stackoverflow and tried adjusted it to the following:

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

I also created the file /images/liveimages.inc which containts the following:

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

But, alas, it's not working and I'm not programmer enough to fix it. :-( I'm thinking my syntax is off but my code could be off too since I am not a JavaScript guy.

Any help would be appreciated and thanks for taking the time to read (and respond) to my question! :-D

Answer 1

If you store the data file as JSON you can use AJAX/XMLHTTPRequest to fetch it, and JSON.parse (available in all modern browsers) to read it.

---

An easier way perhaps is just to have a script that contains just the data, like:

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

And then include your scripts in the correct order:

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

ad_script.js will be able to access picPaths .

You could have some server-side script generate picpaths.js for you, for instance by looking at the contents of a folder or a database and pulling the ad info from that.