仅使用常规Javascript刷新页面中的一个<div>
[英]Refreshing only one <div> in page with just regular Javascript
问题描述
如果我没有从服务器获取任何信息，但我想每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，原型等。编辑II：不知道为什么人们说div不变...它的内容是动态的，它被抓住了从网上说起来......并且每当它去抓东西的东西已经改变了......一个例子可能是抓住来自Twitter的搜索结果，变化非常迅速......
7 个解决方案
解决方案1
6 已采纳 2011-05-13 20:33:45
是的，你确实需要Ajax，因为根据定义，这就是Ajax。 特别是如果你想从其他网站获取内容。
我知道你说你想使用普通的javascript，但看看这个，也许你会喜欢这个。 看看这个很棒的jQuery插件。 https://github.com/jamespadolsey/jQuery-Plugins/tree/master/cross-domain-ajax/
这很简单，用它让你执行Ajax唱jQuery的一个很大的区别的：你可以抓住从任何地方的内容（如在其他网站上的内容来自）。 你可以像在自己的服务器上一样使用相同的jQuery.load（）方法或.ajax（）方法，除了你可以从任何地方获取内容！
只需将插件脚本添加到页面（在jQuery之后），然后使用此处所述的.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到#target上http://yoursite.com/whatever-the-current-page-is
总而言之，这是一种加载内容的超级简单方法。 jQuery的大小只有31kb（缩小），我相信它是值得的。 没有必要重新发明轮子，当jQuery可以做你想要的，并有效地，除非你试图进出javascript。 如果你只是想让你的网站工作（最终结果是重要的），那么就给出一个超级简单的方法，我只是试一试。
解决方案2
1 2011-05-13 07:44:28
您可以创建一个递归函数，它将更改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的值。
解决方案3
1 2011-05-13 21:15:50
好的，所以你确实需要AJAX。 好吧，不是“X”部分，你只需要异步Javascript部分。 服务器可以返回XML或JSON，但在您的情况下，最简单的方法就是返回要放入div的HTML blob。
但是，您必须向服务器进行往返，因为浏览器中没有任何更改，只有服务器上页面的内容已更改。
这是一个30秒的教程 ，解释了一切。 我会根据你的需要调整它。
首先，在服务器端，你已经有了一个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);
解决方案4
0
看一下jQuery.load（） 。 请注意，从服务器reload提取信息。
解决方案5
0 2011-05-13 07:05:56
如果你热衷于自己做，以避免包含像jquery这样的完整库的开销，你可以看看这个。
http://www.dynamic-tools.net/toolbox/ajax/
简单的ajax请求演示展示了如何从url中检索html。 您将要使用setInterval替换单击触发器以不断轮询而不是按需触发。
解决方案6
-1 2011-05-13 06:25:06
另一种方法是使用“浏览器可以使用元数据（如何显示内容或重新加载页面），搜索引擎（关键字）或其他Web服务”
解决方案7
-1 2011-05-13 20:06:54
简短回答：
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
希望这会有所帮助。
刷新div而不刷新页面
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.