Я боролся с концепцией как структурировать такой код при первом запуске. Хотя это не относится к вашим конкретным переменным, вот краткий пример того, как обновить var через AJAX с помощью jQuery/PHP.
Пролог: Если это то, что вы собираетесь делать часто, вы хотите узнать JQuery, а не с помощью обычного JavaScript в одиночку. Есть много отличных, бесплатных ресурсов по изучению jQuery. Кроме того, если вы не удовлетворены бесплатными учебниками онлайн, this - отличная книга. Я напишу пример в jQuery.
Design: Хорошо, так как она работает следующим образом:
Установите таймер в JavaScript, чтобы выполнить определенную функцию каждые X секунд (вы не хотите делать это каждый второй).
Эта функция делает вызов AJAX (с jQuery) файлом .PHP на сервере, отправляя ему необходимые данные, чтобы код .PHP знал, что нужно отправить обратно.
Код .PHP захватывает данные, необходимые (например, с MySQL), кодирует его в формате JSON и завершает работу.
Удовлетворено по вызову AJAX и получены данные, отправленные с PHP. Обработайте его так, как вы.
Повторите с шага 2.
Если у вас есть какие-либо вопросы о том, что делает код, пожалуйста, спрашивайте.
AJAX.PHP
<?php
$mysqli = new mysqli("localhost", "my_user", "my_password", "world");
$return_obj = array();
$request_obj = NULL;
// our AJAX call used "POST" as it's 'type', so we look in that
// variable.
if (array_key_exists("func",$_POST)) {
if ($_POST['func'] === "get_update") {
if (array_key_exists("which_var",$_POST)) {
$which_var = $_POST['which_var'];
$which_var = $mysqli->real_escape_string($which_var); // should use prepared statements
// we sent 'num_people_logged_in' as our value here, so we'll be looking for a column/field
// with that value. this assumes that some other code, somewhere else,
// is regularly updating the table. it also assumes that there will only
// be a single row returned, which will hold the value.
$query = "SELECT '$which_var' FROM site_stats ";
if ($result = $mysqli->query($query)) {
if ($row = $result->fetch_assoc()) {
$request_obj[$which_var] = $row[$which_var];
}
}
}
}
}
$return_obj['request'] = $request_obj;
echo json_encode($return_obj);
die();
?>
MYCODE.JS
// this actually sends the AJAX request to the server.
function getUpdate() {
var jqXHR = $.ajax({
url : "ajax.php",
data : {
'func' : 'get_update',
'which_var' : 'num_people_logged_in'
},
dataType : 'json',
type : 'POST',
timeout : 10000
});
// attach 'promises' to the jqXHR object, which represents
// the AJAX call itself. 'promises' are, in this context,
// just events.
jqXHR.done(function(data,textStatus,jqXHR) {
// this executes if the AJAX call succeeded.
// the variable 'data' holds what the server
// sent us.
if ((data) && (data.request)) {
receiveUpdate(data.request);
}
});
jqXHR.fail(function(jqXHR,textStatus,errorThrown) {
// this executes if it failed
console.log("Fail: " + textStatus + " (" + errorThrown + ")");
});
jqXHR.always(function(a,textStatus,c){
// this executes either way, after .done or .fail
});
}
// this is called from jqXHR.done, on success
function receiveUpdate(request_obj) {
if (request_obj.num_people_logged_in) {
updateDOM(request_obj.num_people_logged_in);
}
}
function updateDOM(num_people_logged_in) {
if (num_people_logged_in) {
$("#mydiv > p.update").html("The updated value is: " + num_people_logged_in);
}
}
var timeoutID = null;
// setup our timer, to periodically make an
// AJAX call
function init() {
timeOutID = setInterval(function(){
getUpdate();
},5000);
}
// stop the timer
function cleanup() {
clearTimeout(timeoutID);
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>AJAX practice</title>
<!-- <link href="mycss.css" rel='stylesheet'> if needed -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="mycode.js"></script>
<script>
$(document).ready(function() {
init();
$("#cleanup").on("click",function(){
cleanup();
});
}); // end ready
</script>
</head>
<body>
<div id='mydiv'>
<p>
How many people are online?
</p>
<p class='update'>
</p>
</div>
<button id='cleanup'>Stop updating!</button>
</div>
</body>
</html>
Ответы ниже дать вам хорошее место, чтобы начать. Вы также можете использовать библиотеку javascript, которая обертывает эту функциональность. Взгляните на это, чтобы познакомиться - http://api.jquery.com/load/ – JohnP