Page 1 of 1

ajax shoutbox

Posted: Thu Jan 19, 2006 2:23 pm
by shiznatix
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?

Posted: Thu Jan 19, 2006 4:22 pm
by wtf
not really a tutorial but it should get you started


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();
shoutbox.php

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 />';
	}
?>
shoutbox.htm

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` ) 
);

Posted: Thu Jan 19, 2006 10:40 pm
by josh

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;
}
this will not work in versions of opera that mask themselves as IE, instead create an activex object only if the xmlhttprequest object failed to be created

Posted: Fri Jan 20, 2006 3:06 am
by Skittlewidth
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. :)