Во-первых - как указал Майкл, вы должны использовать div для статуса сообщения:
Второе - если файл примера называется test.php, вы загружаете все содержимое страницы обратно в подэлемент msgstatus (а не только в SQL). На самом деле вы будете делать это до бесконечности, за исключением того, что браузеры не позволяют публиковать исполняемый код в ответе AJAX (поэтому второй встроенный уровень игнорируется).
Я предполагаю, что вы упростили свой код, но ниже приведен обновленный код, основанный на том, что вы опубликовали. ПРИМЕЧАНИЕ. Существует некоторая разница в стиле (не стесняйтесь игнорировать;)!), Вы также включили BR в p.MESSAGEPOSTER, когда абзац обрабатывал символ новой строки (поэтому я удалил его).
<?php
include 'config.php'
function latestPosts() {
$query = "
SELECT Users.UserID, Wall.Message, Users.Forename, Users.Surname
FROM Wall
INNER JOIN Users ON Wall.UserID = Users.UserID
ORDER BY Wall.MessageID DESC
LIMIT 20;";
$result = mysql_query($query) or die('Invalid query: ' . mysql_error());
while ($row=mysql_fetch_assoc($result)) {
echo "<div id=\"messagecontainer\">
<img class=\"pic\" src=\"dummy.gif\">
<p class=\"messageposter\">
<b>".$row["Forename"]." ".$row["Surname"]."</b>
</p>
<p class=\"message\">
".stripslashes($row["message"]."
</p>
</div>\n";
}
}
//Test for AJAX on the post - only output the values.
if ($_REQUEST['ajax']==1) {
latestPosts();
exit();
}
?>
<script language="javascript">
function createRequestObject() {
var req;
if(window.XMLHttpRequest){
// Firefox, Safari, Opera...
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
// Internet Explorer 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// There is an error creating the object,
// just as an old browser is being used.
alert("Your Browser Does Not Support This Script - Please Upgrade Your Browser ASAP");
}
return req;
}
// Make the XMLHttpRequest object
var http = createRequestObject();
function sendRequest(page,vars) {
// Open PHP script for requests
http.open('get', page+'?'+vars);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4 && http.status == 200){
// Text returned FROM the PHP script
var response = http.responseText;
if(response) {
// UPDATE ajaxTest content
document.getElementById("msgstatus").innerHTML = response;
}
}
}
function repeatloop()
{
sendRequest('test.php','ajax=1'); // replace "inbox-status.php" with your php page's url
setTimeout("repeatloop()", 10000);
}
window.onload=function() {repeatloop();}
</script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head><body>
<div id ="container">
<div id="insideleft">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="profile.php">Edit Profile</a></li>
<li><a href="wall.php">Community Wall</a></li>
<li><a href="logout.php">Logout</a></li>
</ul>
</div>
<div id="insideright">
<h1>Community Wall</h1>
<br />
<div id="postcontainer">
<form method="post" action="wall.php" name="wallpost" id="wallpost">
<input type="text" name="message" id="message" class="message" />
<input type="submit" name="messagesub" id="messagesub" value="Post Message" class="post"/><br /><br />
</fieldset>
</form>
</div>
<div id="msgstatus">
<?php
//Output the current posts - you may not even want to do this since AJAX will fill it in right after load
latestPosts();?>
</div>
<!-- ... we have some truncating! -->
?>
Некоторые другие пункты:
Если вы собираетесь использовать решение AJAX, вы можете оставить поле пустым в начальном HTML (drop latestsPosts (); в строке 118), а затем загрузить список после рендеринга страницы.
Как это в настоящее время кодируется, каждые 10 секунд AJAX перезагружает полный список, вы можете отследить последнее сообщение (возможно, по идентификатору?) И передать его обратно команде AJAX, чтобы либо:
- Обновление предоставляется только при наличии изменений. (Обработка ответа JS будет игнорировать пустой возврат - текущий код перезапишет состояние с пустым)
- Предоставляются только новые записи. (Обработка ответа JS будет предшествовать новому ответу на существующий объект msgstatus).
Поскольку это динамический AJAX-скрипт, вы должны использовать глагол POST, а не GET (это также требует некоторых изменений в том, как вы публикуете переменные - вместо этого в теле должен быть +'?'+vars в строке http.open) , Технически GET позволяет браузеру кэшировать результаты - особенно я это заметил в Internet Explorer (по иронии судьбы кажется, что они следовали спецификации W3C, а другие нет). Короче говоря - некоторые пользователи могут жаловаться, что сообщения не обновляются.