将普通链接动态转换为 Ajax

Question

我已经整理了一些来自不同来源的代码，但我对 javascript 有点陌生，我似乎只是用我目前的代码失败了..

我要做的是将页面上的每个普通链接转换为ajax链接并通过ajax加载页面。

到目前为止，我只成功地转换了初始页面的链接并将内容加载到 div 中。问题是我无权访问 div 中加载的内容，新内容仍然有正常链接而不是 ajax。

• 有没有一种方法可以在每次 div 更改时转换 div 中加载的内容中的新链接？
• 另外我不知道的是，如果用户点击菜单中的主页按钮，它会随着这个脚本加载索引的内容，一切都会变成一个循环。如果代码在 div 内加载，如何防止代码加载到索引中？
• 如果您怀疑此代码可能会出现任何其他问题，您能否告诉我要更改哪些内容？

这是我到目前为止的代码.. 非常感谢您的任何建议！

插入head标签：

<script type="text/javascript">
var xmlhttp;
if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }
else if(window.ActiveXObject){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
else{ }
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4)
{ document.getElementById("contentarea").innerHTML = xmlhttp.responseText; }
else{ document.getElementById("contentarea").innerHTML = ""; }
}

function loadPage(url){
document.getElementById("contentarea").innerHTML = "";
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
</script>

插入身体某处：

<div id="contentarea"></div>

在正文结束前插入：

<script>
var oP = document.getElementsByTagName("a");
var ctr=0;
while(ctr < oP.length){
var oldHref = document.getElementsByTagName("a")[ctr].href;
document.getElementsByTagName("a")[ctr].href="javascript:loadPage('"+oldHref+"');";
ctr++;
}
</script>

Answer 1

这里 ja go.. 为您准备好了.. 您可以使用 document.links 获取所有锚标记。我只在“contentArea”上这样做。 (function () { 中的所有内容只会在文档准备好时调用。然后，在 onreadystatechange 事件中，我再次调用该函数以在响应中返回的任何锚点上设置 click 事件。

<script type="text/javascript">
var xmlhttp;

function loadPage(url){
document.getElementById("contentarea").innerHTML = "";
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

var parseAnchors = function(){
    var anchors = document.getElementById("contentarea").links; // your anchor collection
    var i = anchors.length;
    while (i--) {
      var anchor = anchors[i];
        anchor.onclick = (function(url) {
          return function() {
            loadPage(url);
            return false;
          };
        })(anchors[i].href);
        anchor.href = "#";
    }
  };

(function () {

if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }
   else if(window.ActiveXObject){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
   else{ }
   xmlhttp.onreadystatechange=function(){
   if(xmlhttp.readyState==4)
   { document.getElementById("contentarea").innerHTML = xmlhttp.responseText; }
   else{ document.getElementById("contentarea").innerHTML = ""; }
   parseAnchors();
 }

window.onload = function () {
 parseAnchors();
}
</script>