我有一个网站，我需要更新状态。就像飞行一样，你正在起飞，巡航或着陆。我希望能够刷新状态，而不让我的观众拥有并重新加载整个页面。我知道有一种方法可以使用AJAX和jQuery，但我对它的工作方式一无所知。我也不希望他们拥有并点击一个按钮。如果有人知道如何做到这一点我非常感激！
一般来说，如果你不知道某些东西是如何起作用的，那么找一个你可以学习的例子。
对于这个问题，请考虑this DEMO
您可以使用jQuery轻松完成使用AJAX加载内容：
$(function(){
// don't cache ajax or content won't be fresh
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='http://automobiles.honda.com/images/current-offers/small-loading.gif' alt='loading...' />";
// load() functions
var loadUrl = "http://fiddle.jshell.net/deborah/pkmvD/show/";
$("#loadbasic").click(function(){
$("#result").html(ajax_load).load(loadUrl);
});
// end
});
尝试了解它是如何工作的，然后尝试复制它。祝好运。
你可以找到相应的教程HERE
现在，以下事件启动ajax load函数：
$("#loadbasic").click(function(){
$("#result").html(ajax_load).load(loadUrl);
});
你也可以定期这样做：How to fire AJAX request Periodically?
(function worker() {
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
},
complete: function() {
// Schedule the next request when the current one's complete
setTimeout(worker, 5000);
}
});
})();
我为你HERE做了一个这个实现的演示。在此演示中，每2秒（setTimeout(worker, 2000);）更新内容。
您也可以立即加载数据：
$("#result").html(ajax_load).load(loadUrl);
其中有THIS对应的演示。
您可以从官方jQuery站点：https://api.jquery.com/jQuery.ajax/上阅读有关jQuery Ajax的信息
如果您不想使用任何单击事件，则可以设置计时器以定期更新。
下面的代码可能只是帮助您举例。
function update() {
$.get("response.php", function(data) {
$("#some_div").html(data);
window.setTimeout(update, 10000);
});
}
上面的函数将在每10秒后调用一次，并从response.php获取内容并在#some_div中更新。
我想你想首先学习ajax，试试这个：Ajax Tutorial
如果你想知道ajax是如何工作的，那么直接使用jQuery并不是一个好方法。我支持学习向服务器发送ajax请求的本地方式，请参阅XMLHttpRequest：
var xhr = new XMLHttpReuqest();
xhr.open("GET", "http://some.com");
xhr.onreadystatechange = handler; // do something here...
xhr.send();
假设您要在网页上显示一些实时供稿内容（比如livefeed.txt）而不进行任何页面刷新，那么下面的简化示例适合您。
在下面的html文件中，实时数据在id“liveData”的div元素上更新
的index.html
<!DOCTYPE html>
<html>
<head>
<title>Live Update</title>
<meta charset="UTF-8">
<script type="text/javascript" src="reloader.js"></script>
</head>
<div id="liveData">
<p>Loading Data...</p>
</div>
</body>
</html>
autoUpdate.js下面使用XMLHttpRequest对象读取实时数据，并每1秒更新一次html div元素。为了更好地理解，我对大部分代码发表了评论。
autoUpdate.js
window.addEventListener('load', function()
{
var xhr = null;
getXmlHttpRequestObject = function()
{
if(!xhr)
{
// Create a new XMLHttpRequest object
xhr = new XMLHttpRequest();
}
return xhr;
};
updateLiveData = function()
{
var now = new Date();
// Date string is appended as a query with live data
// for not to use the cached version
var url = 'livefeed.txt?' + now.getTime();
xhr = getXmlHttpRequestObject();
xhr.onreadystatechange = evenHandler;
// asynchronous requests
xhr.open("GET", url, true);
// Send the request over the network
xhr.send(null);
};
updateLiveData();
function evenHandler()
{
// Check response is ready or not
if(xhr.readyState == 4 && xhr.status == 200)
{
dataDiv = document.getElementById('liveData');
// Set current data text
dataDiv.innerHTML = xhr.responseText;
// Update the live data every 1 sec
setTimeout(updateLiveData(), 1000);
}
}
});
出于测试目的：只需在live feed.text中写一些内容 - 您将在index.html中获得相同的更新，而无需任何刷新。
livefeed.txt
Hello
World
blah..
blah..
注意：您需要在Web服务器上运行上述代码（例如：http://localhost:1234/index.html）而不是客户端html文件（例如：file：/// C：/index.html）。