使用 AJAX 只刷新一个 div答案

【问题标题】：Refresh only one div with AJAX使用 AJAX 只刷新一个 div
【发布时间】：2013-05-16 07:04:37
【问题描述】：

我想每五秒在我的页面中动态地重新加载一个 div。但在我的回复中，我得到了整个页面的内容......我怎样才能只得到指定 div 的内容？

<script>
function ajaxrefresh()
{
    var xmlhttp;

    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //Here i want only the content for the div from the response       
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
        else
        {
            //alert("state: "+xmlhttp.readyState)
            //alert("status: "+xmlhttp.status)
        }
    }

    xmlhttp.open("GET","http://${localHostAddress}:8080/adress",true);
    xmlhttp.send();

    var t=setTimeout(ajaxrefresh,5000);
}

window.load = ajaxrefresh();
</script>

【问题讨论】：

如果数据不是个人或秘密的，例如银行余额，在服务器上创建只发回您想要的信息的软件可能比在浏览器端添加越来越多的代码更可取。将此软件绑定到不同的 URL。然后，您可以使用 ajax 仅从该特定 URL 请求该数据。优点：减少丑陋的黑客攻击，减少网络使用浪费，更好的可扩展性

标签： javascript html ajax

【解决方案1】：

有人已经在SO 上提出过类似的问题。最佳投票是在您的页面中创建一个不可见的 div，并用 AJAX 响应填充它，以便能够使用 hiddenDiv.getElementById("myDiv") 获取您需要的元素。

【讨论】：

【解决方案2】：

由于您不能使用 Jquery，我认为您最好的选择是响应 ajax 调用仅返回来自服务器端的 div 内容。这样你的响应大小会更小，因此也更快......

如果您无法更改请求的响应，请使用以下代码

if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  //Here i want only the content for the div from the response  
  var mydiv= document.getElementById("myDiv"); 
  var doc=document.createElement("div");
  doc.innerHTML=xmlhttp.responseText;
  document.body.appendChild(doc); // Note append temp to document
 mydiv.innerHTML=doc.getElementById("theDivYouWant")
    .innerHTML;
  document.body.removeChild(doc);// Note remove temp from document

【讨论】：

如果向当前打开的页面发出 xml 请求，这可能会导致奇怪的行为，再次附加页面可能会导致双元素 ID 和 getElementById 可能不会返回您预期的内容。

【解决方案3】：

也许你会从下面的脚本中得到一些想法：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

<script type="text/javascript">
       var auto_div_refresh = setInterval(function(){
   $('#load_data').load('fb_count.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>

【讨论】：

【解决方案4】：

你可以试试这样的：

if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  //Here i want only the content for the div from the response  
  var doc=document.createElement("div");
  doc.innerHTML=xmlhttp.responseText;
  document.getElementById("myDiv").innerHTML=doc.getElementsByTagName("div")[5]
    .innerHTML

这里的 5 只是一个随机数，如果 div 始终是固定的，您可以使用 div 所在的数字，如果不是，您需要遍历 div 并找到您正在寻找的那个（也许基于在身份证上）。

【讨论】：

我不能调用 doc.getElementById... TypeError: doc.getElementById is not a function
是的，如果您使用第一个选项，那么您只能使用 getElementsByTagName 等，而不是 getElementById 但第二个应该返回一个文档对象，以便您可以使用 getElementById。
我明白了，好久没用裸xmlhttpobject了。如果您设置了 responseType，它似乎有时会返回一个文档对象，但在某些浏览器中没有实现。所以你必须设置一个div的innerHTML并用getElementsByTagName获取元素，然后遍历它们并获取你想要的元素（可能基于元素的id？）
如果您真的想要一个文档对象并且必须使用 getElementById 那么您可以使用 DOMParser 将文本解析为文档，但某些浏览器（读取 IE）不支持解析 html 文本，所以您必须使用一些 JS 代码添加该功能。代码及其操作方法可以在这里找到：developer.mozilla.org/en-US/docs/Web/API/DOMParser