Loading external page content with Ajax

Question

Just for fun, learning, aesthetics, etc. I've been using Ajax to modify my Tumblr theme. What I'm trying to do is loading content from the next page into a div on the current page. So that people can browse through different pages while staying on the main page. The main page of the blog is http://diaryofthedead.co.cc/. Pages are numbered. Second page is http://diaryofthedead.co.cc/page/2, so on and so forth.

The Ajax script (which I found with Google, so honestly I don't understand much of it) is:

<script language="javascript">
function Next() {
    if (location.href == 'http://diaryofthedead.co.cc/') {
        var pagenum = '2';
        var next = 'page/'+pagenum;
        ajaxpagefetcher('container',next,true);
        pagenum = pagenum += 1
    }
    else {
        pagenum = location.href.match(/\/page\/(.*)/)[1];
        plus = pagenum += 1;
        var next = 'page/'+plus;
        ajaxpagefetcher('container',next,true);
    }
}
var ajaxpagefetcher={
loadingmessage: "Loading Page, please wait...",
exfilesadded: "",

connect:function(containerid, pageurl, bustcache, jsfiles, cssfiles){
    var page_request = false
    var bustcacheparameter=""
    if (window.XMLHttpRequest) // if Mozilla, IE7, Safari etc
        page_request = new XMLHttpRequest()
    else if (window.ActiveXObject){ // if IE6 or below
        try {
        page_request = new ActiveXObject("Msxml2.XMLHTTP")
        } 
        catch (e){
            try{
            page_request = new ActiveXObject("Microsoft.XMLHTTP")
            }
            catch (e){}
        }
    }
    else
        return false
    var ajaxfriendlyurl=pageurl.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/") 
    page_request.onreadystatechange=function(){ajaxpagefetcher.loadpage(page_request, containerid, pageurl, jsfiles, cssfiles)}
    if (bustcache) //if bust caching of external page
        bustcacheparameter=(ajaxfriendlyurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    document.getElementById(containerid).innerHTML=ajaxpagefetcher.loadingmessage //Display "fetching page message"
    page_request.open('GET', ajaxfriendlyurl+bustcacheparameter, true)
    page_request.send(null)
},

loadpage:function(page_request, containerid, pageurl, jsfiles, cssfiles){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
        document.getElementById(containerid).innerHTML=page_request.responseText
        for (var i=0; i<jsfiles.length; i++)
            this.loadjscssfile(jsfiles[i], "js")
        for (var i=0; i<cssfiles.length; i++)
            this.loadjscssfile(cssfiles[i], "css")
        this.pageloadaction(pageurl) //invoke custom "onpageload" event
    }
},

createjscssfile:function(filename, filetype){
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype=="css"){ //if filename is an external CSS file
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    return fileref
},

loadjscssfile:function(filename, filetype){ //load or replace (if already exists) external .js and .css files
    if (this.exfilesadded.indexOf("["+filename+"]")==-1){ //if desired file to load hasnt already been loaded
        var newelement=this.createjscssfile(filename, filetype)
        document.getElementsByTagName("head")[0].appendChild(newelement)
        this.exfilesadded+="["+filename+"]" //remember this file as being added
    }
    else{ //if file has been loaded already (replace/ refresh it)
    var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist using
    var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
    var allsuspects=document.getElementsByTagName(targetelement)
    for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
    if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1){
    var newelement=this.createjscssfile(filename, filetype)
    allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i])
    }
        }
 }
},


pageloadaction:function(pageurl){
    this.onpageload(pageurl) //call customize onpageload() function when an ajax page is fetched/ loaded
},

onpageload:function(pageurl){
 //do nothing by default
},

load:function(containerid, pageurl, bustcache, jsfiles, cssfiles){
    var jsfiles=(typeof jsfiles=="undefined" || jsfiles=="")? [] : jsfiles
    var cssfiles=(typeof cssfiles=="undefined" || cssfiles=="")? [] : cssfiles
    this.connect(containerid, pageurl, bustcache, jsfiles, cssfiles)
}

} //End object

//Sample usage:
//1) ajaxpagefetcher.load("mydiv", "content.htm", true)
//2) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js"])
//3) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js"], ["external.css"])
//4) ajaxpagefetcher.load("mydiv2", "content.htm", true, ["external.js", "external2.js"])
//5) ajaxpagefetcher.load("mydiv2", "content.htm", true, "", ["external.css", "external2.css"])
</script>

The function Next() was of my own design, and obviously where the problem lies. I'm using it as an onclick event within the link:

<a href="javascript:void();" onclick="Next()">Click This</a>

When I click it, sadly, it does absolutely nothing. I'm not sure exactly what is wrong, and I'm hoping someone can point me in the wrong direction.

Answer 1

This isn't the answer you're looking for, but I would strongly suggest you give jQuery a try: http://www.jquery.com/.

The code you have there is incredibly complex, and can be simplified quite a bit with jQuery's helpers. (I'm sure you'll agree that needing 10 lines of exception trapping to open a simple connection is a little silly. jQuery abstracts this.)

Also, here's a tip: if you're loading a page in another domain, you'll want to use getJSON() for that...

Answer 2

You can use JQuery Load method and also can use $.get method.