! php ajax. .
:1. php. : mysql?2. html css.3. JavaScript jQuery. ( jQuery, ) ! MySQL SQL :
CREATE TABLE `messages` ( `id` int(5) NOT NULL AUTO_INCREMENT, `name` char(255) character SET utf8 NOT NULL, `text` text character SET utf8, PRIMARY KEY (`id`));<!-- DOCTYPE --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>PhpAjaxChat</title><!-- UTF-8 --><meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- --><link rel="stylesheet" type="text/css" media="screen" href="css.css" /> <!-- jQuery --><script type="text/javascript" src="jquery.js"></script> <!-- --><script type="text/javascript"> $(document).ready(function () { $("#pac_form").submit(Send); // "" "Enter" $("#pac_text").focus(); // setInterval("Load();", 2000); // 2 (2000 )}); // function Send() { // jquery ajax: $.post(, { }, ) $.post("ajax.php", { act: "send", // , name: $("#pac_name").val(), // text: $("#pac_text").val() // }, Load ); // Load() $("#pac_text").val(""); // $("#pac_text").focus(); // return false; // Send() false. , } var last_message_id = 0; // , var load_in_process = false; // . false, - , // function Load() { // . , , . if(!load_in_process) { load_in_process = true; // // , javascript $.post("ajax.php", { act: "load", // last: last_message_id, // rand: (new Date()).getTime() }, function (result) { // javascript , eval(result); // $(".chat").scrollTop($(".chat").get(0).scrollHeight); // load_in_process = false; // , }); }}</script> <body><div style="padding: 100px;"><h1>Php Ajax Chat</h1><!-- 2- div- --><div class="chat r4"><div id="chat_area"><!-- --></div></div><form id="pac_form" action=""><!-- , --><table style="width: 100%;"> <tr> <td>:</td> <td>:</td> <td></td> </tr> <tr> <!-- --> <td><input type="text" id="pac_name" class="r4" value=""></td> <!-- --> <td style="width: 80%;"><input type="text" id="pac_text" class="r4" value=""></td> <!-- "" --> <td><input type="submit" value=""></td> </tr></table></form> </div></body></html>* { margin: 0; padding: 0;} body { font: normal normal normal 16px "Trebuchet MS", Arial, Times; color: #000000;} /* */.chat { height: 500px; overflow: auto; /* */ position: relative; /* , */ text-align: left; border: solid #818181 1px;} .chat div { position: absolute; /* */} .chat span { display: block;} input[type=text],textarea { width: 100%; font: normal normal normal 16px "Trebuchet MS", Arial, Times; border: solid #818181 1px;} /* CSS 3 */.r4 { -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}<?php// MySQl$config = array( 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'dbname' => 'pacdb' ); // MySQL, if( !mysql_connect($config['hostname'], $config['username'], $config['password']) ){ exit();}// , if( !mysql_select_db($config['dbname']) ){ exit();}mysql_query("SET NAMES 'utf8'"); // MySQl' UTF-8 Header("Cache-Control: no-cache, must-revalidate"); // - Header("Pragma: no-cache"); Header("Content-Type: text/javascript; charset=utf-8"); // javascript UTF-8 // act (send load), if( isset($_POST['act']) ){ // $_POST['act'] - switch ($_POST['act']) { case "send" : // send, Send() Send(); break; case "load" : // load, Load() Load(); break; default : // - exit(); }} // function Send(){ // java- ajax // : $_POST['name'] - // $_POST['text'] - $name = substr($_POST['name'], 0, 200); // 200 $name = htmlspecialchars($name); // (<h1>,<br>, ) $name = mysql_real_escape_string($name); // - unescaped_string , , mysql_query() $text = substr($_POST['text'], 0, 200); // 200 $text = htmlspecialchars($text); // (<h1>,<br>, ) $text = mysql_real_escape_string($text); // - unescaped_string , , mysql_query() // messages mysql_query("INSERT INTO messages (name,text) VALUES ('" . $name . "', '" . $text . "')");} // ajax java-function Load(){ // java- ajax // : $_POST['last'] - $last_message_id = intval($_POST['last']); // // 10 $last_message_id $query = mysql_query("SELECT * FROM messages WHERE ( id > $last_message_id ) ORDER BY id DESC LIMIT 10"); // - if( mysql_num_rows($query) > 0 ) { // javascript $js = 'var chat = $("#chat_area");'; // "" div, // $messages = array(); while ( $row = mysql_fetch_array($query) ) { $messages[] = $row; } // // [0] - $messages, "DESC" ( ), // $last_message_id = $messages[0]['id']; // ( ) $messages = array_reverse($messages); // $messages foreach ( $messages as $value ) { // $js .= 'chat.append("<span>' . $value['name'] . '» ' . $value['text'] . '</span>");'; // (<span> » </span>) div } $js .= "last_message_id = $last_message_id;"; // , // , eval() echo $js; }}?>! .
