使用ajax重新加载页面,以便创建实时聊天


reload the page using ajax in order to create a live chat

我有这个代码:

<?php require_once("config.inc.php"); ?>
<?
ob_start();
session_start();
if(isset($_SESSION['myusername'])) {
// do nothing here
} else { ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live chat</title>
</head>
<body bgcolor="#000000">
<font color="white" size="+3"><b>You are not logged in! <br />
Log in and start chatting!</b></font>
</body>
</html>
<?php exit(); }
ob_flush();
?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="<?php echo $meta_description ?>" />
<meta name="keywords" content="<?php echo $meta_keywords ?>" />
<title><?php echo $site_name; ?> | Live chat</title>
<link rel="icon" type="image/gif" href="favicon.png" >
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
    body { margin:0;padding:0;  background-image:url(images/background.jpg);  }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
         $("#lolmesazhet").load("mesazhetnechat.php");
   var refreshId = setInterval(function() {
      $("#lolmesazhet").load("mesazhetnechat.php");
   }, 1000);
   $.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="500px" bgcolor="#000000" >
    <?php include 'headerchat.inc.php'; ?>
    </td>
  </tr>
<tr>
    <td width="500px"  align="left" valign="top" style="padding:20px 5px 20px;">
<?php
if($_POST['submit654']) {
$result128 = mysqli_query($con,"SELECT id FROM users WHERE email = '$_SESSION[myusername]'");
$row128 = mysqli_fetch_array($result128);
date_default_timezone_set("Europe/Tirane");
$todaydate3 = date("Y-m-d H:i:s");
mysqli_query($con,"INSERT INTO chat (id, derguesi, dhoma, mesazhi, ora) VALUES (NULL, '$row128[id]', 'Main room', '$_POST[mesazhi]', '$todaydate3')");
}
?>
<table width="470px" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="50px" valign="middle" colspan="2" style="border-bottom:1px solid #FFFFFF;">&nbsp;</td>
  </tr>
  <tr>
    <td width="320" height="339px" valign="top" style="padding:3px;">
<div style="width:320px; height:339px; overflow-y:auto;">
<?php
$result73 = mysqli_query($con,"SELECT * FROM chat WHERE dhoma = 'Main room' ORDER BY id DESC");
while($row73 = mysqli_fetch_array($result73))
  {
$result127 = mysqli_query($con,"SELECT username FROM users WHERE id = '$row73[derguesi]'");
$row127 = mysqli_fetch_array($result127);
?>
<table width="320px" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150" align="left"><font color="white" size="4"><b><?php echo $row127['username']; ?></b></font></td>
    <td width="170" align="right"><?php echo $row73['ora']; ?></td>
  </tr>
  <tr>
    <td colspan="2">
<font color="white"><?php echo $row73['mesazhi']; ?></font>
</td>
  </tr>
</table>
<?php } ?>
</div>
</td>
    <td width="150" height="450px" rowspan="2" valign="top" style=" padding:3px;  border-left:1px solid #FFFFFF;">
    <div style="width:150px; height:450px; overflow-y:auto;">
    <font color="#FFFFFF" size="+2"><b>Online users:</b></font><br /><br />
    <?php
        $result = mysqli_query($con,"SELECT username FROM users WHERE verifikuar='po' AND online = 'po'");
    while($row = mysqli_fetch_array($result))
          { ?>
                <font color="#FFFFFF"><b><?php echo $row['username']; ?></b></font>  <br />
          <?php }
        ?>
    </div>
    </td>
  </tr>
  <tr>
    <td height="50px" valign="middle" style="border-top:1px solid #FFFFFF; padding:3px; border-right:1px solid #FFFFFF;">
<form action="" method="post" name="comesazh">
<textarea name="mesazhi" cols="35" rows="4" required="required"></textarea>
<br /><input type="submit" name="submit654" id="submit654" value="Send" style="border-radius:0px; border-size:1px; border-style:solid; border-color:#ffffff; border-width:thin; background-color:#000000; color:#ffffff; height:26px; width:60px;  font-size:16px;" />
</form>
</td></tr>
</table>
</body>
</html>

我想知道是否可以使用ajax重新加载该页面以创建实时聊天,如果可以,如何进行。
我尝试了很多方法,比如使用$.load函数重新加载其中的一部分,但都不起作用。然后我尝试$.load所有的页面,但仍然没有工作。经过一番愚蠢的努力,我放弃了。

以下是您可以在不重新加载页面的情况下更新聊天框的操作。您拥有的聊天页面:

<script>
window.setInterval(function(){
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","response.php",true);
xmlhttp.send();
}, 5000);
</script>
<div id="myDiv"><h2>This should be your chat box</h2></div>

响应.php

<?php
//do the while loop for the amount of chat you want to see
//example
for ($i = 1; $i <= 10; $i++) {
    echo $i.'<br/>'; // Print out $i
}
?>

这将每5秒更新一次聊天框中的最新聊天信息。试试

如果选择器没有匹配任何元素——在这种情况下,如果文档不包含id="result"的元素——则不会发送Ajax请求。

来自jQuery.load手册。我在您的代码中看不到ID为"lolmasazhet"的元素。或者我错过了什么。