AJAX Div Refresh from Database via jQuery.load

I have written a plugin for Wordpress which generates a jQuery.accordion list of content that it pulls from a database. I also have it pulling newer results from the database every 5 seconds via a separate page (update.php) through the jQuery.load method.

The problem I'm encoun开发者_开发问答tering is that I'm generating the full HTML for the div in the update.php file. It seems like I could just make it query the database and then return the results to the main file, but I'm not sure how to go about doing that. Basically, my concern here is efficiency, because with the way I'm doing things it may be considerably taxing on browser resources. I have a hunch that memory usage will continue to climb with this method until it inevitably peaks and the browser crashes.

I'm looking for any guidance on how to better code this. I've provided proof-of-concept examples below, so I'd love for anyone to offer feedback, whether constructive or critical. Thank you!

main.php:

<script type="text/javascript">
$(function() {
  $("#accordion").load("update.php");
  var refresh = setInterval(function() {
    $k("#accordion").load("update.php");
  }, 5000);
});
</script>

<div id="accordion"></div>

update.php:

<?php
function page_update() {
  global $wpdb;
  $out = '';

  $out .= '<script type="text/javascript" src="jquery-1.5.min.js"></script>';
  $out .= '<script type="text/javascript" src="jquery-ui-1.8.11.custom.min.js"></script>';
  $out .= '<script type="text/javascript">
           var $j = jQuery.noConflict();
           $j(function() {
             $j("#accordion").accordion();
           });
           </script>';

  $sql = "SELECT * FROM table ORDER BY name DESC;";
  $results = $wpdb->get_results($sql);

  foreach($results as $res) {
    $out .= '<h3>'.$res->name.'</h3>';
    $out .= '<div id="content-'.$res->name.'">'.$res->score.'</div>';
  }

  echo $out;
}

page_update();
?>

---

1. You should not use the global keyword. Why?

2. Before you redraw all your accordion div, you should make a function that check if there is any changes in the database. If there is no changes, their is no need to redraw.

3. If there is a change, you could redraw only the affected row.

---

I have a hunch that memory usage will continue to climb with this method until it inevitably peaks and the browser crashes.

Memory usage will not continue to climb because each execution of update.php will finish before it is called again. You made the right choice using setInterval instead of setTimeOut here as in this case setTimeOut would have been less efficient with memory resources.

I'm not too sure whether their is anything more efficient than setInterval. Something that might be more efficient would be if you set it to refresh only if and whenever something changed instead of every 5 seconds.