使用Ajax加載外部頁面內容

Question

僅用於娛樂，學習，美學等。我一直在使用Ajax來修改我的Tumblr主題。我想要做的是將下一頁的內容加載到當前頁面上的div中。這樣人們可以在停留在主頁面的同時瀏覽不同的頁面。博客的主頁是http://diaryofthedead.co.cc/。頁面編號。第二頁是http://diaryofthedead.co.cc/page/2，等等。

阿賈克斯腳本（我找到了與谷歌，所以老實說，我不明白其中很大一部分）是：

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

功能下一頁（）是我自己設計的，顯然問題出在哪裏所在。我使用它作爲鏈接內的onclick事件：

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

當我點擊它，可悲的是，它絕對什麼都不做。我不確定到底發生了什麼問題，我希望有人能指出我錯誤的方向。

Answer 1

這不是你要找的答案，但我強烈建議你試試jQuery：http://www.jquery.com/。

你在那裏的代碼是難以置信的複雜，可以用jQuery的助手簡化很多。 （我敢肯定，你會同意需要異常陷阱來打開一個簡單的連接是有點愚蠢的。jQuery抽象這個。）

此外，這裏有一個提示：如果你正在加載一個頁面在另一個域中，您將要使用getJSON() ...

Answer 2

您可以使用JQuery Load方法，也可以使用$.get方法。