一个完整的显示wordpress的rss源的程序，当用户滚动到页面底部时载入下一页。
// A generic function for performming AJAX requests // It takes one argument, which is an object that contains a set of options // All of which are outline in the comments, below function ajax( options ) { // Load the options object with defaults, if no // values were provided by the user options = { // The type of HTTP Request type: options.type || "POST", // The URL the request will be made to url: options.url || "", // How long to wait before considering the request to be a timeout timeout: options.timeout || 50000, // Functions to call when the request fails, succeeds, // or completes (either fail or succeed) onComplete: options.onComplete || function(){}, onError: options.onError || function(){}, onSuccess: options.onSuccess || function(){}, // The data type that'll be returned from the server // the default is simply to determine what data was returned from the // and act accordingly. data: options.data || "" }; // Create the request object var xml = new XMLHttpRequest(); // Open the asynchronous POST request xml.open("GET",options.url, true); // We're going to wait for a request for 5 seconds, before giving up var timeoutLength = 5000; // Keep track of when the request has been succesfully completed var requestDone = false; // Initalize a callback which will fire 5 seconds from now, cancelling // the request (if it has not already occurred). setTimeout(function(){ requestDone = true; }, timeoutLength); // Watch for when the state of the document gets updated xml.onreadystatechange = function(){ // Wait until the data is fully loaded, // and make sure that the request hasn't already timed out if ( xml.readyState == 4 && !requestDone ) { // Check to see if the request was successful if ( httpSuccess( xml ) ) { // Execute the success callback with the data returned from the server options.onSuccess( httpData( xml, options.type ) ); // Otherwise, an error occurred, so execute the error callback } else { options.onError(); } // Call the completion callback options.onComplete(); // Clean up after ourselves, to avoid memory leaks xml = null; } }; // Establish the connection to the server xml.send(); // Determine the success of the HTTP response function httpSuccess(r) { try { // If no server status is provided, and we're actually // requesting a local file, then it was successful return !r.status && location.protocol == "file:" || // Any status in the 200 range is good ( r.status >= 200 && r.status < 300 ) || // Successful if the document has not been modified r.status == 304 || // Safari returns an empty status if the file has not been modified navigator.userAgent.indexOf("Safari") >= 0 && typeof r.status == "undefined"; } catch(e){} // If checking the status failed, then assume that the request failed too return false; } // Extract the correct data from the HTTP response function httpData(r,type) { // Get the content-type header var ct = r.getResponseHeader("content-type"); // If no default type was provided, determine if some // form of XML was returned from the server var data = !type && ct && ct.indexOf("xml") >= 0; // Get the XML Document object if XML was returned from // the server, otherwise return the text contents returned by the server // data = type == "xml" || data ? r.responseXML : r.responseText; type=xml; data=r.responseXML; // If the specified type is "script", execute the returned text // response as if it was JavaScript if ( type == "script" ) eval.call( window, data ); // Return the response data (either an XML Document or a text string) return data; } }
// Keep track of what "page" of the contents that we're currently on var curPage = 1; // Make sure that we don't load a page twice, at the same time var loading = false; // We're going to see if we should load some more content based upon where // the user is currently located on the page window.onscroll = function(){ // We need to verify a couple things before we try and load some more contents // 1) We need to make sure that we're not at the last page of contents. // 2) We need to make sure that we're not already loading some new posts. // 3) We're only going to load new posts if we're scrolled near the bottom of the page if ( curPage >= 1 && !loading && pageHeight() - scrollY() - windowHeight() < windowHeight() ) { // Remember that we've started to load the new posts. loading = true; // Load the posts using our handy ajax() function ajax({ // We're just requesting a simple web page, so just use GET type: "GET", // We're expecting an RSS feed, which is just an XML file data: "xml", // Get the RSS feed of the Nth page. When we first load this page // we're on page '1', so we start at 2 and work our way back in time url: "./?feed=rss&paged=" + ( ++curPage ), // Watch for when the RSS feed has been successfully retrieved onSuccess: function( rss ){ // We're loading the new posts into the <div> that has an ID of "content" var content = document.getElementById("content"); // We're going to iterate through each of the posts in the RSS feed var items = rss.getElementsByTagName("item"); for ( var i = 0; i < items.length; i++ ) { // Place the new entry into the document content.appendChild( makePost( items[i] ) ); } // If there are no items to retrieve from the XML document, // we must be back as far as we can go if ( items.length == 0 ) { curPage = 0; } }, // Whenever the request has completed, we can try to load new items again onComplete: function(){ loading = false; } }); } }; // A function for creating the complex DOM structure of a single post function makePost( elem ) { // Lets extract the Link, Title, and Description data from each feed post var data = getData( elem ); // Creating a new wrapper <div> to hold the post var div = document.createElement("div"); div.className = "post"; // Create the post header var h2 = document.createElement("h2"); // This holds the title of the feed and has a link that points back to the post. h2.innerHTML = "<a href='" + data.link + "'>" + data.title + "</a>"; // Add it in to the post wrapper <div> div.appendChild( h2 ); // Now lets create a <div> to hold the long post contents var entry = document.createElement("div"); entry.className = "entry"; // Add the contents to the inside of the <div> entry.innerHTML = data.desc; div.appendChild( entry ); // Finally, lets add a footer that links back var meta = document.createElement("p"); meta.className = "postmetadata"; meta.innerHTML = "<a href='" + data.link + "#comments'>Comment</a>"; div.appendChild( meta ); return div; } // A simple function for extracting data from a DOM element function getData( elem ) { // We're going to return the data as a nicely formatted object return { // Extract the title, description, and link from the rss feed <item> element title: elem.getElementsByTagName("title")[0].firstChild.nodeValue, desc: elem.getElementsByTagName("description")[0].firstChild.nodeValue, link: elem.getElementsByTagName("link")[0].firstChild.nodeValue }; }