Question

这是我到目前为止的代码，目前使用javascript根据需要加载xml文件中的信息。我已将其设置为循环4次以选择4个图像，但这些显然只是xml文件中的前4个。

有没有人知道从xml文件中随机选择4个无重复图像的最佳方法。

<script>
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","include/photoLibrary.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;

var x=xmlDoc.getElementsByTagName("photo");
    for (i=0; i<4; i++)
    { 
    document.write('<a href="');
    document.write(x[i].getElementsByTagName('path')[0].childNodes[0].nodeValue);
    document.write('" class="lytebox" data-lyte-options="group:vacation" data-title="');
    document.write(x[i].getElementsByTagName('description')[0].childNodes[0].nodeValue);
    document.write('"><img src="');
    document.write(x[i].getElementsByTagName('thumb')[0].childNodes[0].nodeValue);
    document.write('" alt"');
    document.write(x[i].getElementsByTagName('title')[0].childNodes[0].nodeValue);
    document.write('"/></a>');                      
    }
</script>

如果它有任何帮助，这是xml的一个例子，你会看到照片有一个属性给它一个唯一的id。

<gallery>

<photo id="p0001">
<title>Pergola</title>
<path>photos/Pergola.jpg</path>
<thumb>photos/thumbs/Pergola.jpg</thumb>
<description>Please write something here!</description>
<date>
    <day>04</day>
    <month>04</month>
    <year>2006</year>
</date>
</photo>

</gallery>

我愿意使用php作为javascript的替代品。

Answer 1

你可以添加

x = Array.prototype.slice.call(x).sort( function () {
    return Math.random() > 0.5 ? 1 : -1 
} );

直接

var x = xmlDoc.getElementsByTagName("photo");

这将创建一个随机排列的元素数组，其中前四个将由for循环迭代。

修改

请注意，此方法不会产生适当的随机数组，请参阅Is it correct to use JavaScript Array.sort() method for shuffling?，我不推荐它。

Answer 2

首先要做的事情。尽量不要使用document.write，因为当DOM准备就绪并且仍处于初始化状态时，此方法会不时发挥作用。它被认为是一种不好的做法。

我还建议使用函数来分解代码的复杂性并使其更具可读性。

您应该知道XHR对象不是同步的。您需要等待通过readystatechange事件检索xml数据。

最后，您不必在浏览器中构建html字符串。 DOM API允许您将锚点和图像标记创建为可以附加到DOM树的适当节点。

希望有所帮助。

(function() {

    //fetch the gallery photos
    getXML('include/photoLibrary.xml', function(xml) {
        var photos, pI, photo, anchor, image, anchors = [];

        //pick four photos at random
        photos = getRandom(makeArray(xml.getElementsByTagName('photo')), 4);

        //build out each photo thumb
        for(pI = 0; pI < photos.length; pI += 1) {
            photo = photos[pI];

            //create the anchor
            anchor = document.createElement('a');
            anchor.setAttribute('href', photo.getElementsByTagName('path')[0].childNodes[0].nodeValue);
            anchor.setAttribute('class', 'lytebox');
            anchor.setAttribute('data-lyte-options', 'group:vacation');
            anchor.setAttribute('data-title', photo.getElementsByTagName('description')[0].childNodes[0].nodeValue);

            //create the image
            image = document.createElement('img');
            image.setAttribute('src', photo.getElementsByTagName('thumb')[0].childNodes[0].nodeValue);
            image.setAttribute('alt', photo.getElementsByTagName('title')[0].childNodes[0].nodeValue);

            //insert the image into the anchor
            anchor.appendChild(image);

            //insert the anchor into the body (change this to place the anchors else were)
            anchors.push(anchor);
        }

        //when the DOM is loaded insert each photo thumb
        bind(window, 'load', function() {
            var aI;

            for(aI = 0; aI < anchors.length; aI += 1) {
                //replace document.body with whatever container you wish to use
                document.body.appendChild(anchors[aI]);
            }
        });
    });

    /**
     * Fetches an xml document via HTTP method GET. Fires a callback when the xml data
     * Arrives.
     */
    function getXML(url, callback) {
        var xhr;

        if(window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else if(window.ActiveXObject) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            throw new Error('Browser does not support XML HTTP Requests.');
        }

        //attach the ready state hander and send the request
        xhr.onreadystatechange = readyStateHandler;
        xhr.open("GET","photos.xml",false);
        xhr.send();

        function readyStateHandler() {

            //exit on all states except for 4 (complete)
            if(xhr.readyState !== 4) { return; }

            //fire the callback passing the response xml data
            callback(xhr.responseXML);
        }
    }

    /**
     * Takes array likes (node lists and arguments objects) and converts them
     * into proper arrays.
     */
    function makeArray(arrayLike) {
        return Array.prototype.slice.apply(arrayLike);
    }

    /**
     * Extracts a given number of items from an array at random.
     * Does not modify the orignal array.
     */
    function getRandom(array, count) {
        var index, randoms = [];

        //clone the original array to prevent side effects
        array = [].concat(array);

        //pull random items until the count is satisfied
        while(randoms.length < count) {
            index = Math.round(Math.random() * (array.length - 1));
            randoms.push(array.splice(index, 1)[0]);
        }

        return randoms;
    }

    function bind(element, eventName, callback) {
        if(typeof element.addEventListener === 'function') {
            return element.addEventListener(eventName, callback, false);
        } else if(typeof element.attachEvent === 'function') {
            return element.attachEvent('on' + eventName, callback);
        }
    }
})();

编辑：修正了三个错误。在插入节点之前需要加载DOM。 XML节点没有innerHTML属性。 Array.concat不会将DOM NodeList对象视为Arrays。

Answer 3

在PHP中，这是解析文件的方式：

的index.php

<?php
$doc = new DOMDocument();
  $doc->load( 'book.xml' );

  $books = $doc->getElementsByTagName( "book" );
  foreach( $books as $book )
  {
  $authors = $book->getElementsByTagName( "author" );
  $author = $authors->item(0)->nodeValue;

  $publishers = $book->getElementsByTagName( "publisher" );
  $publisher = $publishers->item(0)->nodeValue;

  $titles = $book->getElementsByTagName( "title" );
  $title = $titles->item(0)->nodeValue;

  echo "$title - $author - $publisher\n";
  }?>

是book.xml

<books>
  <book>
  <author>Jack Herrington</author>
  <title>PHP Hacks</title>
  <publisher>O'Reilly</publisher>
  </book>
  <book>
  <author>Jack Herrington</author>
  <title>Podcasting Hacks</title>
  <publisher>O'Reilly</publisher>
  </book>
  </books>

Answer 4

在php中你随机选择这样的东西

<?php

$xml_string = 
'<gallery>
<photo id="p0001">
<title>t1</title>
<path>photos/Pergola.jpg</path>
</photo>
<photo id="p0002">
<title>t2</title>
<path>photos/Pergola.jpg</path>
</photo>
<photo id="p0003">
<title>t3</title>
<path>photos/Pergola.jpg</path>
</photo>
</gallery>';

$xml  = simplexml_load_string($xml_string);
$arr = (array) $xml;
shuffle($arr['photo']);
for($i =0; $i < 2; $i++){
  $picture = array_pop($arr['photo']);
  print_r($picture);
}

使用javascript从xml文件加载一系列随机图像

4 个答案: