Javascript 如何自动刷新页面的一部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7660528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to auto refresh a section of a page
提问by ragebunny
I have a part of a page that has live data in it, I was thinking of just refreshing the page every couple of minutes, but that isn't right because of other elements of the page.
我有一个页面的一部分，其中包含实时数据，我想每隔几分钟刷新一次页面，但由于页面的其他元素，这是不对的。
How can I do it? What language can I use to do this, what's easy to do and what isn't, what works well and what doesn't. Maybe some clear tutorials or even code examples.
我该怎么做？我可以用什么语言来做这件事，什么容易做，什么不做，什么好做，什么不好。也许一些清晰的教程甚至代码示例。
I'd live to do this in something like PHP, but don't have a clue where to start, from a bit of research i see that Javascript and Ajax seem to be the standard for this but my knowledge of these languages aren't up to scratch.
我愿意用 PHP 之类的东西来做这件事，但不知道从哪里开始，从一些研究中我看到 Javascript 和 Ajax 似乎是这个的标准，但我对这些语言的知识不是从头开始。
Thanks for the time and help people.
感谢您的时间并帮助人们。
Oh, the data that is being displayed is coming from a database if that's any help.
哦，如果有帮助的话，显示的数据来自数据库。
Thanks again.
再次感谢。
回答by dan
You could use a Javascript library such as jQuery and do something like the following simplified example:
您可以使用 Javascript 库（例如 jQuery）并执行类似于以下简化示例的操作：
$("document").ready(function(){
var interval = setInterval(refresh_box(), 60000);
function refresh_box() {
$("#myDiv").load('path/to/databasepage.php');
}
} /*<= The closer ) bracket is missing in this line*/
and in your path/to/databasepage.phppage you can have your select query and echo the results out.
在您的path/to/databasepage.php页面中，您可以选择查询并回显结果。
What this does is sets a timeout to call a function (in this case, refresh_box()) every 60 seconds (which is 60,000 miliseconds) and loads the data from path/to/databasepage.phpin to your div with the id myDiv.
这样做是设置超时以refresh_box()每 60 秒（即 60,000 毫秒）调用一个函数（在本例中为 ），并将数据从path/to/databasepage.phpin加载到带有 id 的 div 中myDiv。
edit:
编辑：
If you want to stop the auto-refresh you can bind an element to clear the interval by doing the following:
如果要停止自动刷新，可以通过执行以下操作绑定元素以清除间隔：
// assuming you have a clickable element
// (typically a button or so) id called 'stop_refresh'
$("#stop_refresh").click(function(){
clearInterval(interval);
}
回答by Michael Berkowski
The easiest method doesn't even involve PHP or JavaScript. You can do it with an <iframe>in plain HTML. The iframe loads an HTML or PHP page with the appropriate refresh header and it refreshes itself.
最简单的方法甚至不涉及 PHP 或 JavaScript。您可以使用<iframe>纯 HTML 来实现。iframe 加载带有相应刷新标头的 HTML 或 PHP 页面，并刷新自身。
Main HTML page:
主 HTML 页面：
<html>
<head></head>
<body>
static content
<iframe id='dynamic-content' src='refreshing.php' />
</body>
</html>
refreshing.php page:
刷新.php页面：
<html>
<head>
<!-- refresh every 5 seconds -->
<meta http-equiv="refresh" content="5">
</head>
<body>
dynamic content
</body>
</html>
Note that <meta http-equiv="refresh">is discouraged for general refreshing a whole page, but it is pretty safe to use inside an iframe which must be constantly refreshing itself.
请注意，<meta http-equiv="refresh">一般不鼓励刷新整个页面，但在必须不断刷新自身的 iframe 中使用它是非常安全的。
回答by SW4
You cant really execute a live refresh for page components in PHP, AJAX is the most common means (Asynchronous Javascript And Xml)- which uses Javascript to poll other scripts (can be .php pages) which then return predefined output based on the request- this output can be content to inject into a page, or data which can then be interpreted by your page for another action.
您无法真正为 PHP 中的页面组件执行实时刷新，AJAX 是最常见的方式（异步 Javascript 和 Xml）-它使用 Javascript 轮询其他脚本（可以是 .php 页面），然后根据请求返回预定义的输出-此输出可以是要注入页面的内容，也可以是页面随后可以为其他操作解释的数据。
In this instance, your .php page would include JS (javascript) in the head, whether linked or inline, which would contain details for launching an AJAX request- namely, how often or on what trigger (button press etc), by what means (POST or GET), what is sent (any other variables you wish), what the target script is (the script which will handle the request and output your required content/data), and what to do when the response is recieved (i.e. which element on the page should be updated with the response).
在这种情况下，您的 .php 页面将在头部包含 JS (javascript)，无论是链接的还是内联的，其中将包含启动 AJAX 请求的详细信息——即，多久或在什么触发器（按钮按下等）上，通过什么方式（POST 或 GET），发送什么（您希望的任何其他变量），目标脚本是什么（将处理请求并输出所需内容/数据的脚本），以及收到响应时要做什么（即应使用响应更新页面上的哪个元素）。
A little about AJAX:
关于 AJAX：
http://webdesign.about.com/od/ajax/a/aa101705.htm
http://webdesign.about.com/od/ajax/a/aa101705.htm
http://webtrends.about.com/od/web20/a/what-is-ajax.htm
http://webtrends.about.com/od/web20/a/what-is-ajax.htm
Likely the simplest way to begin is to use a pre-existing Javascript library like the ubiquitous jQuery (jquery.com), there are thousands of tutorials out there for it, and though you will need to do some Javascript programming, the library has meant that you can rely on fairly simple syntax to do so (as simple as $('#myelement').load('mypage.php')):
可能最简单的开始方法是使用预先存在的 Javascript 库，例如无处不在的 jQuery (jquery.com)，那里有成千上万的教程，尽管您需要进行一些 Javascript 编程，但该库意味着您可以依靠相当简单的语法来做到这一点（就像 一样简单$('#myelement').load('mypage.php')）：
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/
http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/
http://www.sitepoint.com/ajax-jquery/
http://www.sitepoint.com/ajax-jquery/
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/
In simple terms:
简单来说：
- You have your php page with the element that needs updating (page A)
- Build another php script which outputs the content you want 'refreshing', e.g. the latest news stories, each time it is run (page B)
- Link to the jQuery library in your header section (page A)
- Write a simple jquery function in the header section of page A, which says every X seconds/minutes, run an AJAX request to fetch the content of page B and insert into an element (DIV) within page A
- 您的 php 页面包含需要更新的元素（页面 A）
- 构建另一个 php 脚本，该脚本每次运行时都会输出您想要“刷新”的内容，例如最新的新闻报道（页面 B）
- 链接到标题部分中的 jQuery 库（页面 A）
- 在页面 A 的标题部分编写一个简单的 jquery 函数，表示每 X 秒/分钟，运行一次 AJAX 请求以获取页面 B 的内容并插入到页面 A 内的元素（DIV）中
回答by dyesdyes
it's really a large question.
这真是一个很大的问题。
The most common way would be to use AJAX but you can also use a javascript database as TaffyDB - The JavaScript Database(never used it so i can't really speak about it).
最常见的方法是使用 AJAX，但您也可以使用 javascript 数据库作为TaffyDB - JavaScript 数据库（从未使用过它，所以我不能真正谈论它）。
Anyway, the easiest way would be to use JQUERY.
无论如何，最简单的方法是使用 JQUERY。
