Chargement du contenu de la page externe avec Ajax

Question

Juste pour le plaisir, l'apprentissage, l'esthétique, etc. J'utilise Ajax pour modifier mon thème Tumblr. Ce que j'essaie de faire est de charger le contenu de la page suivante dans un div sur la page en cours. Alors que les gens peuvent naviguer à travers différentes pages tout en restant sur la page principale. La page principale du blog est http://diaryofthedead.co.cc/. Les pages sont numérotées. La deuxième page est http://diaryofthedead.co.cc/page/2, et ainsi de suite.

Le script Ajax (que j'ai trouvé avec Google, honnêtement, je ne comprends pas grand-chose de celui-ci) est:

<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> 

La fonction suivante() était de ma propre conception, et, évidemment, où le problème mensonges Je l'utilise comme un événement onclick dans le lien suivant:

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

Quand je clique dessus, malheureusement, il ne fait absolument rien. Je ne sais pas exactement ce qui ne va pas, et j'espère que quelqu'un pourra me pointer dans la mauvaise direction.

Answer 1

Ce n'est pas la réponse que vous cherchez, mais je vous suggère fortement d'essayer jQuery: http://www.jquery.com/.

Le code que vous avez là est complexe incroyablement, et peut être simplifié un peu avec les aides de jQuery. (Je suis sûr que vous conviendrez que 10 besoin lignes de piégeage d'exception pour ouvrir une connexion simple est un peu idiot résumés jQuery cela..)

De plus, voici une astuce: si vous chargez une page dans un autre domaine, vous devrez utiliser getJSON() pour cela ...

Answer 2

Vous pouvez utiliser la méthode JQuery Load et pouvez également utiliser la méthode $.get.