ajax shoutbox
Moderator: General Moderators
- shiznatix
- DevNet Master
- Posts: 2745
- Joined: Tue Dec 28, 2004 5:57 pm
- Location: Tallinn, Estonia
- Contact:
ajax shoutbox
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?
not really a tutorial but it should get you started
javascript/xmlhttp.js
shoutbox.php
shoutbox.htm
sql
javascript/xmlhttp.js
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>sql
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;
}- Skittlewidth
- Forum Contributor
- Posts: 389
- Joined: Wed Nov 06, 2002 9:18 am
- Location: Kent, UK
I found this very quick tutorial extremely helpful, although I did have to copy the text into notepad so I could actually read it!
http://rajshekhar.net/blog/archives/85- ... orial.html
Everything I've done with AJAX so far has been built on the basics here, including shoutbox type scenarios.
http://rajshekhar.net/blog/archives/85- ... orial.html
Everything I've done with AJAX so far has been built on the basics here, including shoutbox type scenarios.