Question

我有一个数据库，我使用php按ID随机化信息并通过xml发送出去。我的问题是我只想抓取一次xml并将其存储起来用于至少2个函数...一个运行onload的函数来获取xml的第一行，另一个函数在每次按下按钮时都会运行xml的下一行直到结束。我的2个函数是loadfirst（）和loadnext（）。 loadfirst（）工作正常，但我不知道如何将xml数据传递给loadnext（）。现在我只是在pageload上使用loadfirst（）并在按下按钮时使用loadfirst（），但我每次都会从数据库中创建新的xml，这会导致随机化问题并且非常低效。任何帮助将不胜感激。

var places;
var i = 0;

function loadXML(){

downloadUrl("places.php", function(data){
    places = data.responseXML;
        getFeatured(i);
});



}

function getFeatured(index){
   var id = places[index].getAttribute("id");
    var name = places[index].getAttribute("name");
    var location = places[index].getAttribute("location");
    var imgpath = places[index].getAttribute("imgpath");
    var tags = places[index].getAttribute("tags");

}


    function getPrev() {
    i--;
    getFeatured(i);
}

 function getNext() {
    i++;
         getFeatured(i);
    }


function downloadUrl(url, callback) {
     var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;
  request.onreadystatechange = function() {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
        }
     };
     request.open('GET', url, true);
     request.send(null);
   }

    function doNothing() {}

loadnext（）将与loadfirst（）非常相似，我只是遇到传递xml数据的问题，这样我就可以使用它而无需再次访问数据库。谢谢。

Answer 1

在公共范围内设置xml和i。然后，您所要做的就是递增/递减i并从XML重新读取数据。像这样：

var xml;
var xml_idx = 0; // replaces your i counter

function loadXML() {
    downloadUrl ("places.php", function(data) {
        xml = data.responseXML;
    )};
}

function loadItem(index) {
    var id = xml[index].getAttribute("id");
    var name = xml[index].getAttribute("name");
    var location = xml[index].getAttribute("location");
    var imgpath = xml[index].getAttribute("imgpath");
    var tags = xml[index].getAttribute("tags");
    // do something with this data
}

function loadCurrentItem() {
    loadItem(xml_idx);
}

function loadNextItem() {
    xml_idx++;
    loadItem(xml_idx);
}

function loadPreviousItem() {
    xml_idx--;
    loadItem(xml_idx);
}

// usage
loadXML();  // do this first to populate xml variable
loadItem(xml_idx); // loads first item (i=0)
loadCurrentItem(); // loads i=0
loadNextItem(); // loads i=1
loadNextItem(); // loads i=2
loadPreviousItem(); // loads i=1

如果你真的想要获得幻想（并保持全局命名空间更清晰），你可以轻松地将它变成一个类。

Answer 2

使用全局变量（items - items array，iterator - counter）来存储所有函数可用的数据尝试这样的事情：

items = false;
iterator = 0;

function loadfirst(){

downloadUrl ("places.php", function(data) {
    var i = 0;
    var xml = data.responseXML;
    var places = xml.documentElement.getElementsByTagName("place");
    var id = places[i].getAttribute("id");
    var name = places[i].getAttribute("name");
    var location = places[i].getAttribute("location");
    var imgpath = places[i].getAttribute("imgpath");
    var tags = places[i].getAttribute("tags");

    items = places;
    iterator++;
)};
}


function loadnext(){


    var i = iterator;
    var id = items[i].getAttribute("id");
    var name = items[i].getAttribute("name");
    var location = items[i].getAttribute("location");
    var imgpath = items[i].getAttribute("imgpath");
    var tags = items[i].getAttribute("tags");

    iterator++;

}

Answer 3

您应该将所有这些包装到单个对象中以控制范围和数据状态。（下面未经测试的代码，应该只是说明可能使用的模式和界面。）

function PlacesScroller(url, callback) {
    this.url = url;
    this.data = null;
    this._index = null;
    this.length = 0;
    var self = this;
    downloadURL(this.url, function(result, status) {
        if (Math.floor(status/100)===2) {
            self.setData(result);
        }
        if (callback) {
            callback(self, result);
        }
    });
}
PlacesScroller.prototype.setData(xmldom) {
    this._index = 0;
    // this may require changing; it depends on your xml structure
    this.data = [];
    var places = xmldom.getElementsByTagName('place');
    for (var i=0; i<places.length; i++) {
        this.data.push({
            id : places[i].getAttribute('id'),
            name : places[i].getAttribute('name')
            // etc
        });
    }
}
PlacesScroller.prototype.getPlaceByIndex = function(index) {
    if (this.data) {
        return this.data[index];
    } else {
        return null;
    }
}
PlacesScroller.prototype.getCurrentFeature = function() {
    return this.getPlaceByIndex(this._index);
}
PlacesScroller.prototype.addToIndex(i) {
   // This sets the index forward or back
   // being careful not to fall off the end of the data
   // You can change this to (e.g.) cycle instead
   if (this.data===null) {
        return null;
   }
   var newi = i+this._index;
   newi = Math.min(newi, this.data.length);
   newi = Math.max(0, newi);
   this._index = newi;
   return this._index;
}
PlacesScroller.prototype.getNextFeature = function() {
    this.addToIndex(1);
    return this.getCurrentFeature();
}
PlacesScroller.prototype.getPreviousFeature = function() {
    this.addToIndex(-1);
    return this.getCurrentFeature();
}

然后初始化它并像这样使用它：

var scroller = new PlacesScroller('places.php', function(scrollerobject, xmlresult){
   // put any initialization code for your HTML here, so it can build after
   // the scrollerobject gets its data.
   // You can also register event handlers here

   myNextButton.onclick = function(e){
        var placedata = scrollerobject.getNextFeature();
        myPictureDisplayingThing.update(placedata);
   }
   // etc
});

从数据库加载xml以在多个函数中使用

3 个答案: