тяөpsяэlөөЭ | Coolersport

• 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.

While doing the javascript calendar with ajax, I figured that I would need a wrapper function like GDownloadUrl() as you may see in Google Map API. The point is how to pass your custom function to this GDownloadUrl() to process returned xml data.

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.