ajax shoutbox

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

ajax shoutbox

Post 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?
User avatar
wtf
Forum Contributor
Posts: 331
Joined: Thu Nov 03, 2005 5:27 pm

Post 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` ) 
);
josh
DevNet Master
Posts: 4872
Joined: Wed Feb 11, 2004 3:23 pm
Location: Palm beach, Florida

Post 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
User avatar
Skittlewidth
Forum Contributor
Posts: 389
Joined: Wed Nov 06, 2002 9:18 am
Location: Kent, UK

Post 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. :)
Post Reply