• Use flat-file database, easy for setup and backup
• Support emoticons, flooding control (spam protection), bad words filtering.
• Display timestamp and ip address via tooltip.
• Timezone adjusting.
• Allow the admin to delete unwanted shouts on the fly.
• Search shouts by date, time, shouter, message, and ip address.
• Page navigation.
• AJAX-Ready.
• Support any language/charset.
• Extremely easy for customising and supporting themes. NEW
• Support integration with other CMS/Forums where users must log in to shout. Their usernames will be used. NEW
• Auto-refresh. Easy to turn into a chat box (rev28: allow admin to force this feature always on). NEW

Click here to download the latest package of CShout. Since version 3, CShout’s source code is Subversion controlled at http://code.google.com/p/cshout/source/checkout. View full change log.

If you have any suggestion or have found any bugs, please create a new issue or submit a comment here. For more information, please visit the wiki.

• Auto refresh (with options for admin and users). With optional sound alert upon new messages arrival.
• New CShout will not support non-javascript browser and use no iframe.
• Better GUI for management and control
• Source code will be Subversion controlled
• Support integration into existing CMS framework for user management.
• …

• Use flat-file database, easy for setup and backup
• Support emoticons, flooding control (spam protection), bad words filtering.
• Display timestamp and ip address via tooltip.
• Timezone adjusting.
• Allow the admin to delete unwanted shouts on the fly.
• Search shouts by date, time, shouter, message, and ip address.
• Page navigation.
• New version 2.0 implements AJAX.
• Support any language/charset.

The Code

A few Google searches gave me the idea of how to do it. I would say this function will do exactly what GDownloadUrl does. In that regard, I name it CDownloadUrl.

Now have a look at the code, explanation will be followed.

/*
method : POST/GET
url    : Call url
func   : custom function which is used to process returned data,
take only one parameter
*/
function CDownloadUrl(method, url, func) {
tvar httpObj;
tvar browser = navigator.appName;
tif(browser.indexOf("Microsoft") > -1)
tthttpObj = new ActiveXObject("Microsoft.XMLHTTP");
telse httpObj = new XMLHttpRequest();
tthttpObj.open(method, url, true);
thttpObj.onreadystatechange = function() {
ttif(httpObj.readyState == 4){
tttif (httpObj.status == 200) {
ttttvar contenttype = httpObj.getResponseHeader('Content-Type');
ttttif (contenttype.indexOf('xml')>-1) {
tttttfunc(httpObj.responseXML);
tttt} else {
tttttfunc(httpObj.responseText);
tttt}
ttt} else {
ttttfunc('Error: '+httpObj.status);
ttt}
tt}
t};
thttpObj.send(null);
}

The function will take 3 parameters which specify method (GET or POST), url and a function taking return data as its parameter. I will give a example of this custom function later.

From line 8 to 13, it is all about setting up variables and instantate an XML object depending on the kind of browser (Microsoft or Non-Microsoft).

After openning a connection on line 15, a handler is defined for onreadystatechange event up to line 29.

The handler actually runs as all the operations are completed (readyState = 4). The early version of this handler was like this:

httpObj.onreadystatechange = function() {
tif(httpObj.readyState == 4){
ttfunc(httpObj.responseXML);
t}
};

It lacks of some essential error checking. The handler needs to check if the request was successful (status code 200 means OK), otherwise it will return Error: plus status code.

Now it seems okie to retrieve data, you may get them from responseXML or responseText. By checking its ‘Content-Type’ header, it knows what to return. Finally, it just pass the data to your custom function.

The last statement is just send the request away.

Example

Many people would find it hard to understand the code without some examples. The following will demonstrate how to use CDownloadUrl to request some text and display it into a div element. Assuming the getsometext.php script return some raw text.

document.write('<div id="test">Old text</div>');
CDownloadUrl('get', 'getsometext.php', function(text) {
tdocument.getElementById('test').innerHTML = text;
});

It can be rewritten in another way as below which is clearer and easy to understand.

document.write('<div id="test">Old text</div>');
function showText(text) {
tdocument.getElementById('test').innerHTML = text;
}
CDownloadUrl('get', 'getsometext.php', showText);

That’s it. I hope you understand and apply it into your own application. If you have any questions or comments, please feel free to shout it in my shoutbox or the form below.