Jea*_*aul 25
一般来说,如果你不知道某些东西是如何起作用的,那么找一个你可以学习的例子.
对于这个问题,请考虑 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);
});
(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 官方网站了解 jQuery Ajax： https: //api.jquery.com/jQuery.ajax/
如果您不想使用任何点击事件，那么您可以设置定时器定期更新。
下面的代码可能对您有帮助，只是示例。
function update() {
$.get("response.php", function(data) {
$("#some_div").html(data);
window.setTimeout(update, 10000);
});
}
上面的函数将每 10 秒调用一次，并从 response.php 中获取内容并在#some_div.
假设您想在没有任何页面刷新的情况下在您的网页上显示一些实时提要内容（比如livefeed.txt），那么以下简化示例适合您。
在下面的html 文件中，实时数据在id “liveData”的div元素上更新
索引.html
<!DOCTYPE html>
<html>
<head>
<title>Live Update</title>
<meta charset="UTF-8">
<script type="text/javascript" src="autoUpdate.js"></script>
</head>
<div id="liveData">
<p>Loading Data...</p>
</div>
</body>
</html>
下面的autoUpdate.js使用XMLHttpRequest对象读取实时数据并每 1 秒更新一次html div元素。为了更好地理解，我对大部分代码给出了注释。
自动更新.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);
}
}
});
出于测试目的：只需在 livefeed.txt 中写一些东西 - 您将在 index.html 中获得相同的更新，无需任何刷新。
livefeed.txt
Hello
World
blah..
blah..
注意：您需要在Web 服务器上运行上述代码（例如：http://localhost:1234/index.html），而不是作为客户端 html 文件（例如：file:///C:/index.html）。