Question

如果我没有从服务器获取任何信息，但我想每N秒重新加载/刷新一次div，我该怎么做？

javascript新手：我尝试了类似

的内容

 <script type = 'text/javascript'>
    function refresh(){
        setTimeout(window.location.reload(), 10000);
    }

    </script>

    <div id='target' onLoad='refresh()'>
<?    
var =grab some rapidly changing content from the web    
print var
  ?>  
    </div>
    <div>
    some stuff that doesn't get refreshed
    </div>

我不清楚如果我没有从服务器获取新信息我需要AJAX ...所以现在我想知道如何让它在javascript中工作

编辑：我不想在这个基本操作中使用库，所以理想情况下我不会使用jquery，prototype等。编辑II：不知道为什么人们说div没有变化......它的内容是动态的，它从网上抓起来（比如刮掉）......每当它去抓东西的东西在源头发生了变化。 ..一个例子可能是抓住来自Twitter的搜索结果，其变化非常快......

Answer 1

是的，你确实需要Ajax，因为根据定义，这就是Ajax。特别是如果你想从另一个网站获取内容。

我知道你说你想使用普通的javascript，但看看这个，也许你会喜欢这个。看看这个很棒的jQuery插件。 https://github.com/jamespadolsey/jQuery-Plugins/tree/master/cross-domain-ajax/

非常简单 它让你用一个非常大的差异来执行Ajax唱jQuery：你可以从 ANYWHERE （例如，您的内容来自的其他网站）。你可以像在自己的服务器上一样使用相同的jQuery.load（）方法或.ajax（）方法，除了你可以从任何地方获取内容！

只需将插件脚本添加到页面（在jQuery之后），然后使用here所述的.load（）方法。

所以在你的情况下，你可以这样做：

$('div#target').load('http://somewhere.com #newContent');

这将从somewhere.com获得#newContent并将其放在您网站上的#target中。

您可以使用javascript的setInterval：
执行此类操作
setInterval( function() { $('div#target').load('http://somewhere.com #newContent'); }, 5000); //repeat function every 5000 milliseconds

这将每5000毫秒（也就是5秒）重复函数（）{}内的任何内容。

您还可以从自己的网站获取内容：

$('div#target').load('http://yoursite.com/some-page #someContent');

这会将#someContent及其中的任何内容从http://yoursite.com/some-page放到http://yoursite.com/whatever-the-current-page-is上的#target

总而言之，这是一种加载内容的超级简单方法。 jQuery的大小只有31kb（缩小），我相信它是值得的。没有必要重新发明轮子，当jQuery可以做你想要的，并有效地，除非你试图进出javascript。如果您只是希望您的网站正常工作（最终结果是重要的），那么我只需尝试一下超简单方法。

Answer 2

您可以创建一个递归函数，它将更改div的内容，使其看起来像是刷新的。像计时器方法一样，每组时间都会改变时间。我不知道你将如何获得将加载到div的数据，我假设你将处理这部分。

这是函数

var gIndex = 1;
function refreshDiv(){
    document.getElementById('target').innerHTML = "Timer " + gIndex++;
    var refresher = setTimeout("refreshDiv()", 1000);
}

<body onLoad="refreshDiv()">
    <div>
        <span>HTML Content</span>
        <div id="target"></div>
    </div>
</body>

当setTimeout再次调用refreshDiv()时，您将看到设置了一个时间，因此这将像重新加载div的内容一样。在refreshDiv()再次拨打电话之前，请更改div的值。

Answer 3

好的，所以你确实需要AJAX。好吧，不是“X”部分，你只需要异步Javascript部分。服务器可以返回XML或JSON，但在您的情况下，最简单的方法就是返回要放入div的HTML blob。

但是，你必须向服务器进行往返，因为浏览器中没有任何变化，只有服务器上页面的内容发生了变化。

这是解释一切的30-second tutorial。我会根据你的需要调整它。

首先，在服务器端，你已经有了一个PHP脚本，我们称之为“page.php”，它返回整个HTML页面。你需要制作第二个PHP脚本，我们称之为“div.php”，它只返回div的内容。

（你也可以让page.php查找一个参数，比如$ _GET ['divonly']，这样只有一个PHP脚本可以处理这两个作业。没关系......你可以做到无论你想要什么，只要你在服务器端有第二个URL来检索div的新内容。）

在page.php的HTML中，你已经有了：

<div id="target"> ... </div>

现在你已经添加了div.php，它只返回“...”，而不是一个完整的HTML页面。

好的，现在，Javascript。如果您不想使用库，则不必使用库 - 库的优点在于它们可以处理所有跨浏览器问题。

但这是你想要的，改编自纯Javascript的例子：

var refreshDelay = 10000;

/* Creates the XMLHTTPRequest object depending on the browser */
function createRequestObject() {
    var ro;
    if(navigator.appName == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}
var http = createRequestObject();

/* Makes the request back to /div.php ... change the URL to whatever
   script you put on the server side to return the contents of the div only */    
function sndReq() {
    http.open('get', '/div.php');
    http.onreadystatechange = handleResponse;
    http.send(null);
}

/* Does the work of replacing the contents of the div id="target" when
   the XMLHTTPRequest is received, and schedules next update */
function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        document.getElementById('target').innerHTML = response;
        setTimeout(sndReq(), refreshDelay);
    }
}

/* Schedules the first request back to the server. Subsequent refreshes 
   are scheduled in handleResponse() */
setTimeout(sndReq(), refreshDelay);

Answer 4

看看jQuery.load()。请注意reload从服务器获取信息。

Answer 5

如果你热衷于自己做，以避免包含像jquery这样的完整库的开销，你可以看一下。

http://www.dynamic-tools.net/toolbox/ajax/

简单的ajax请求演示展示了如何从url中检索html。您需要使用setInterval替换单击触发器以不断轮询而不是按需触发。

Answer 6

另一种方法是使用 “元数据可供浏览器使用（如何显示内容或重新加载页面），搜索引擎（关键字）或其他网络服务”

Answer 7

简答：

1 . div 'onload' doesn't exist. So you need to register a listener for the page
    load event, or put it in "<body onload='refresh()'"
2 . function refresh(){
        setTimeout("window.location.reload()", 10000); // note the ""
    }

答案很长：

您的页面不会因为您的功能从未执行而刷新。其次，如果按原样放置，页面将在页面加载后立即刷新，因为setTimeout（window.location.reload（），10000）;.

作为辅助节点，不建议使用此版本的setTimout函数，更好的方法是将该函数作为第一个参数传递

setTimeout(window.location.reload,1000); // we are passing the function,
                                         // not the function result

希望这会有所帮助。

仅使用常规Javascript </div>刷新页面中的一个<div>

7 个答案: