javascript 如何使用php/ajax在不重新加载网页的情况下自动更新内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28125226/
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 update content automatically without reloading webpage using php/ajax?
提问by kris
I'm trying to create an auction tool using PHP. The problem I'm having (and I appreciate its a basic one but I need clarification) is that I don't understand how to update the "auction price" automatically on each users screen without them having to take any action or without causing a full reload of the page.
我正在尝试使用 PHP 创建一个拍卖工具。我遇到的问题（我很欣赏它的基本问题，但我需要澄清）是我不明白如何在每个用户屏幕上自动更新“拍卖价格”，而无需他们采取任何行动或不引起完全重新加载页面。
So far I understand that Ajax is used to do this but if anyone could point me in the right direction or to any useful materials. My plan for my project so far is to use PHP and JavaScript so any solution would need to be compatible with these languages.
到目前为止，我知道 Ajax 用于执行此操作，但是如果有人能指出我正确的方向或任何有用的材料。到目前为止，我的项目计划是使用 PHP 和 JavaScript，因此任何解决方案都需要与这些语言兼容。
Note: I'm using a MySQL database.
注意：我使用的是 MySQL 数据库。
回答by itd
Ther question you asked has so much possible answers, they could fill a whole book.
你问的问题有很多可能的答案，它们可以填满一整本书。
The simplest way to do this is to make an ajax call every few seconds using a combination of the setInterval() function and AJAX calls. You basically make an AJAX request every few seconds:
执行此操作的最简单方法是使用 setInterval() 函数和 AJAX 调用的组合每隔几秒进行一次 ajax 调用。您基本上每隔几秒钟就会发出一个 AJAX 请求：
setInterval(function(){
$.get( "anyChanges.php", function( data ) {
//do something with the returned data. Maybe update a table or something
});
}, 3000);
On server side anyChanges.phpreturns some data immediately, like confirmation that something has changed and the new data.
在服务器端anyChanges.php立即返回一些数据，例如确认某些内容已更改和新数据。
Long polling is how Google and others do it. It's the same as the example above. The difference is on the server side. anyChanges.phpwould not return immediately, the script would keep the connection open until there is some new changes and return them. If you use long polling, you usually set the interval to longer, for example 30 seconds.
长轮询是 Google 和其他公司的做法。这与上面的示例相同。区别在于服务器端。anyChanges.php不会立即返回，脚本将保持连接打开，直到有一些新的更改并返回它们。如果使用长轮询，通常将间隔设置得更长，例如 30 秒。
The best way to do it in my opinion, are WEB Sockets. It is a very new technology. With web sockets you can create a two-way connection to the server. That means that the server could simply send data to the clients without them having to ask for new data every few seconds. In PHP it's a little difficult to use web sockets (Or so I heard), but you could give it a shot. If you choose web sockets, try to learn about them first: tutsplus tutorial
在我看来，最好的方法是使用 WEB 套接字。这是一项非常新的技术。使用 Web 套接字，您可以创建到服务器的双向连接。这意味着服务器可以简单地向客户端发送数据，而不必每隔几秒钟就请求新数据。在 PHP 中使用网络套接字有点困难（或者我听说过），但你可以试一试。如果你选择了 web sockets，请先尝试了解它们： tutsplus 教程
This library will be helpfull: socketo.me
这个库会有所帮助： socketo.me
回答by Alephtus
Php/Ajax example:
PHP/Ajax 示例：
In this example you have index.htmland record_count.phpfiles
在这个例子中，你有index.html和record_count.php文件
Here is the Code:
这是代码：
index.htmlcontains the html code and javascript call to load record_count.php
index.html包含要加载的 html 代码和 javascript 调用 record_count.php
<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_refresh = setInterval(
function ()
{
$('#load_tweets').load('record_count.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
<body>
<div id="load_tweets"> </div>
</body>
and record_count.phphas the php code
并record_count.php有php代码
<?php
echo "some code or variable here";
?>
you can change the javascript interval to suit your needs
您可以更改 javascript 间隔以满足您的需要
I'll leave you the blog link as a reference: 9lessons
我会留下博客链接作为参考：9lessons
回答by Nick Bristol
As I making interactive displays, which must switch pages instantly, then I create pages without refreshing.
当我制作交互式显示时，必须立即切换页面，然后我创建页面而不刷新。
My approach is something like that:
我的方法是这样的：
- I have one index.html with all structure (pages) with all necessary html tags.
- javascript/typescript loads json from CMS (Kirby for example), which has all information about texts and image links.
- when json is loaded now I just need to switch between pages by showing/hiding or creating/removing html elements. And all data and texts are loaded by javascript.
- 我有一个 index.html，其中包含所有结构（页面）和所有必需的 html 标签。
- javascript/typescript 从 CMS（例如 Kirby）加载 json，其中包含有关文本和图像链接的所有信息。
- 现在加载 json 时，我只需要通过显示/隐藏或创建/删除 html 元素在页面之间切换。并且所有数据和文本都由 javascript 加载。
There is some cons, which can be fixed, for example link for each page in address bar. In that case You need to add history management and change url in address bar on page switch.
有一些缺点可以修复，例如地址栏中每个页面的链接。在这种情况下，您需要在页面切换的地址栏中添加历史记录管理和更改 url。
