使用AJAX只刷新一个div

时间:2013-05-16 07:04:38

标签: javascript html ajax

我想每五秒在页面中动态重新加载一个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>

4 个答案:

答案 0 :(得分:1)

有人已在SO上问过这样的问题。最好的投票是在你的页面中创建一个不可见的div,并用AJAX响应填充它,以便能够通过hiddenDiv.getElementById("myDiv")找回你需要的元素。

答案 1 :(得分:1)

由于你不能使用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

答案 2 :(得分:0)

您可以尝试这样的事情:

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并找到你正在寻找的那个(可能基于在id)。

答案 3 :(得分:0)

可能你会从下面的脚本中得到一些想法:

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