ajax shoutbox
Posted: Thu Jan 19, 2006 2:23 pm
ok i want to make a ajax shoutbox. any good tutorials that you guys might have used in the past? would this be the easiest use of ajax that would actually have a point?
A community of PHP developers offering assistance, advice, discussion, and friendship.
http://forums.devnetwork.net/
Code: Select all
function createRequestObject()
{
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
ro = new XMLHttpRequest();
}
return ro;
}
function sendRequest(queryString, loader)
{
http.open("POST", "shoutbox.php", true);
http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-Length", queryString.length);
http.send(queryString);
http.onReadyStateChange = function()
{
handleResponse(loader);
}
}
function handleResponse(loader)
{
if (http.readyState == 4 && http.status == 200)
{
document.getElementById(loader).innerHTML = http.responseText;
}
}
var http = createRequestObject();Code: Select all
<?php
// DB CONNECT
$query = 'insert into shoutbox set text = "' . mysql_real_escape_string($_POST['shout']) . '"';
mysql_query($query) or die(mysql_error());
$query = 'select text from shoutbox';
$result = mysql_query($query) or die(mysql_error());
while($rs = mysql_fetch_array($result)) {
echo $rs['text'] . '<br />';
}
?>Code: Select all
<!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=iso-8859-1" />
<title>Ajax Shoutbox</title>
<script type="text/javascript" language="javascript" src="javascripts/xmlhttp.js" /></script>
<script type="text/javascript" language="javascript">
function queryString(element) {
var value = document.getElementById(element).value;
return 'shout=' + value;
}
</script>
</head>
<body>
<div id="div_shoutbox">
</div>
<input type="text" id="txt_shout" name="txt_shout" />
<input type="button" id="go" name="go" value="GO!" onClick="sendRequest(queryString('txt_shout'), 'div_shoutbox');" />
</body>
</html>Code: Select all
CREATE TABLE `shoutbox` (
`id` INT NOT NULL AUTO_INCREMENT ,
`text` VARCHAR( 255 ) NOT NULL ,
PRIMARY KEY ( `id` )
);Code: Select all
function createRequestObject()
{
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
ro = new XMLHttpRequest();
}
return ro;
}