How to auto refresh a section of a page_问答_开发者

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 does开发者_运维问答n'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.

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.

You could use a Javascript library such as jQuery and do something like the following simplified example:

$("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.php page you can have your select query and echo the results out.

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.php in to your div with the id 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);
}

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.

Main HTML page:

<html>
<head></head>
<body>
   static content

    <iframe id='dynamic-content' src='refreshing.php' />
</body>
</html>

refreshing.php page:

<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.

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.

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).

A little about AJAX:

http://webdesign.about.com/od/ajax/a/aa101705.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')):

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.sitepoint.com/ajax-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

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).

Anyway, the easiest way would be to use JQUERY.