Search code examples
jqueryxmlinfinite

Jquery infinite scroll and XML

I have seen a few plugins that load more content when you scroll to the bottom of the page, but most of these are linked to a column in a database with an autoincremented id. I need to do this only with an XML file.

Any ideas?

Much appreciated.

Solution

  • The xml file is on the server but it could be parsed with jQuery I suppose? I could use ajax and parse the whole XML file but that would defeat the infinite scroll/lazy load?

    If you send your XML down to the client, this will cause that the browser parses it and builds a DOM. Depending on how large it is (A few kilobytes? Megabytes?) this can be fast, or it can take a while. Sending all of if to the browser by default also hogs your bandwidth and yes, somehow defeats the purpose of lazy loading.

    Infinite scroll however is a UI paradigm and as such you can implement it even though you always send the entire XML file to the browser. Again it depends on what you want to achieve - conserve bandwidth or just create content "on the fly".

    Supposing you leave the file on the server because it is so large:

    • Have the server load it into a thread-safe (!) DOM object. Do not destroy the object in the application lifetime, re-use it for every request by storing in the application (or the session). In fact, this creates the "database".
    • Build a proxy page that accesses the XML and returns part of it to the browser. You can use XPath to retrieve the requested bits from the XML DOM object.
    • Use your favorite infinite scroll jQuery plugin and adapt the proxy page to accept its request parameters.

    A hypothetical request from an infinite scroll plugin could look like

    http://server.name/path/data.aspx?start=516&count=10

    And your data.aspx would then use an XPath query to retrieve 10 XML elements from 516th element on:

    /root/data[position() >= 516 and position() < 516 + 10]

    You would then either construct HTML from that or send it as raw XML and evaluate that via jQuery on the client.

    There are probably tailored frameworks that do all this, but if I were to implement such a system, the above is roughly what I would do.