使用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方法。