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

问题

I have this code:

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

I would like to know if it is possible to reload that page using ajax in order to create a live chat and if yes, how to do it.
I tried many ways like reloading just a part of it using $.load function but it does not work. Then I tried to $.load all the page, but still did not work. After a lot of silly efforts, I gave up.

回答1:

Here is what you can do to have the chat box update without reloading the page. Chat page that you have:

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

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

?>

This will update the chat box every 5 seconds with the most recent chats. Give it a shot

回答2:

If no element is matched by the selector — in this case, if the document does not contain an element with id="result" — the Ajax request will not be sent.

From jQuery.load manual. I can't see element with ID "lolmesazhet" in your code. Or I'm missing something.

来源：https://stackoverflow.com/questions/17350193/reload-the-page-using-ajax-in-order-to-create-a-live-chat

标签

php

jquery

mysql

ajax

chat