1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>AJAX Driven Web Chat</title>
  5. <link rel="stylesheet" type="text/css" href="chat_main.css"/>
  6. <script language="JavaScript" type="text/javascript">
  7. var sendReq = getXmlHttpRequestObject();
  8. var receiveReq = getXmlHttpRequestObject();
  9. var lastMessage = 0;
  10. var mTimer;
  11.  
  12. function getXmlHttpRequestObject()
  13. {
  14. if (window.XMLHttpRequest)
  15. {
  16. return new XMLHttpRequest(); //for chrome
  17. }
  18. }
  19.  
  20. function blockSubmit()
  21. {
  22. val = document.getElementById('div_chat').innerHTML = receiveReq.readyState + "ready state";
  23. sendChatText();
  24. return false;
  25. }
  26.  
  27. function startChat()
  28. {
  29. document.getElementById('txt_message').focus();
  30. getChatText();
  31. }
  32.  
  33. function getChatText()
  34. {
  35. if (receiveReq.readyState == 4 || receiveReq.readyState == 0)
  36. {
  37. val = document.getElementById('div_chat').innerHTML = "Testing onsubmit";
  38. receiveReq.open("GET", 'getChat.php', true);
  39. receiveReq.onreadystatechange = handleReceiveChat;
  40. receiveReq.send(null);
  41. }
  42. }
  43.  
  44. function handleReceiveChat()
  45. {
  46. if (receiveReq.readyState == 4)
  47. {
  48. var xmldoc = receiveReq.responseText;
  49. document.getElementById('div_chat').innerHTML = xmldoc + " xmldoc";
  50.  
  51. var message_nodes = xmldoc.getElementsByTagName("message");
  52. var n_messages = message_nodes.length;
  53. for (i = 0; i < n_messages; i++)
  54. {
  55. var user_node = message_nodes[i].getElementsByTagName("user");
  56. alert(user_node);
  57. var text_node = message_nodes[i].getElementsByTagName("text");
  58. var time_node = message_nodes[i].getElementsByTagName("time");
  59. chat_div.innerHTML += user_node[0].firstChild.nodeValue + '&nbsp;';
  60. chat_div.innerHTML += time_node[0].firstChild.nodeValue + '<br />';
  61. chat_div.innerHTML += text_node[0].firstChild.nodeValue + '<br />';
  62. lastMessage = (message_nodes[i].getAttribute('id'));
  63. }
  64. mTimer = setTimeout('getChatText();',2000);
  65. }
  66. }
  67. </script>
  68. </head>
  69.  
  70. <body onload="startChat();">
  71. <h2>AJAX Driven Web Chat.</h2>
  72. <p id="p_status">Status: Normal</p>
  73. Current Chitter-Chatter:
  74. </br>
  75. <p><a href="createTable.php">Need to create a database table?</a></p>
  76.  
  77. <div id="div_chat" class="chat_main">
  78.  
  79. </div>
  80. <!-- put in return to cancel onSubmit!!! thus onSubmit should return to here-->
  81. <form id="frmmain" name="frmmain" onsubmit="return blockSubmit();" action="">
  82. <input type="button" name="btn_get_chat" id="btn_get_chat" value="Refresh Chat" />
  83. <input type="button" name="btn_reset_chat" id="btn_reset_chat" value="Reset Chat" /><br />
  84. <input type="text" id="txt_message" name="txt_message" style="width: 447px;" />
  85. <input type="submit" name="btn_send_chat" id="btn_send_chat" value="Submit" onClick="getChatText();"/>
  86. </form>
  87. </body>
  88. </html>
  89.  
  90. <?php
  91. include('database.php');
  92. $message_query = db_query();
  93. ?>
  94.  
  95. function db_query()
  96. {
  97. $con = mysql_connect(DBHOST ,DBUSER, DBPASS);
  98. $selected_db = mysql_select_db(DBNAME, $con);
  99. if (!$selected_db)
  100. {
  101. echo "Can't use ". DBNAME . " ".mysql_error();
  102. }
  103.  
  104. $sql = "SELECT message_id, user_name, message, date_format(post_time, '%h:%i') as post_time FROM message WHERE chat_id = 1";
  105. $result = mysql_query($sql,$con);
  106. }