XMLHttp is performing inconsistently

[knaveenchand]

I am a complete novice. With a lot of heart, I learnt javascript and then picked up Ajax purely from forums like these and do not have any credentials to be known as a professional coder. But still I made an attempt to build a news website and wanted to put all news items in separate htm files and call them in one single htm file using XMLHttp.

I succeeded, but the script is very inconsistent. It fetches the page sometimes and again it fails. This is what is happening in firefox but in IE the situation is more worse - it fails more often than it succeeds. I am pasting this script below for expert advice from forum members.

<!--
var xmlHttp;

function checkBrowser()
{
try
{
// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
}

function responseText()
{
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.getElementById("text_here").innerHTML=xmlHttp.responseText;
}
}
}
//do not disturb the below code - This code is scripted by Naveen Chand Kanyamarala. Write to naveen@parishkaarindia.com for more details.
var currentURL=window.location;
whichnews=currentURL.search
switch (whichnews)
{
case '?intnews=1':
checkBrowser()
responseText()
xmlHttp.open("GET","intnews1.htm",true);
xmlHttp.send(null);
break
case '?intnews=2':
checkBrowser()
responseText()
xmlHttp.open("GET","intnews2.htm",true);
xmlHttp.send(null);
break
case '?intnews=3':
checkBrowser()
responseText()
xmlHttp.open("GET","intnews3.htm",true);
xmlHttp.send(null);
break
case '?intnews=4':
checkBrowser()
responseText()
xmlHttp.open("GET","intnews4.htm",true);
xmlHttp.send(null);
break
case '?intnews=5':
checkBrowser()
responseText()
xmlHttp.open("GET","intnews5.htm",true);
xmlHttp.send(null);
break
case '?natnews=1':
checkBrowser()
responseText()
xmlHttp.open("GET","natnews1.htm",true);
xmlHttp.send(null);
break
case '?natnews=2':
checkBrowser()
responseText()
xmlHttp.open("GET","natnews2.htm",true);
xmlHttp.send(null);
break
case '?natnews=3':
checkBrowser()
responseText()
xmlHttp.open("GET","natnews3.htm",true);
xmlHttp.send(null);
break
case '?natnews=4':
checkBrowser()
responseText()
xmlHttp.open("GET","natnews4.htm",true);
xmlHttp.send(null);
break
case '?natnews=5':
checkBrowser()
responseText()
xmlHttp.open("GET","natnews5.htm",true);
xmlHttp.send(null);
break
case '?regnews=1':
checkBrowser()
responseText()
xmlHttp.open("GET","regnews1.htm",true);
xmlHttp.send(null);
break
case '?regnews=2':
checkBrowser()
responseText()
xmlHttp.open("GET","regnews2.htm",true);
xmlHttp.send(null);
break
case '?regnews=3':
checkBrowser()
responseText()
xmlHttp.open("GET","regnews3.htm",true);
xmlHttp.send(null);
break
case '?regnews=4':
checkBrowser()
responseText()
xmlHttp.open("GET","regnews4.htm",true);
xmlHttp.send(null);
break
case '?regnews=5':
checkBrowser()
responseText()
xmlHttp.open("GET","regnews5.htm",true);
xmlHttp.send(null);
break
default:
document.write('<b>Welcome to News and Analysis</b>'.fontsize(3).bold())
document.write('<p>Brining you complete news along with analysis of top international, national and regional stories. Click on relevant news categories available on your right</p>')
}

//-->

Please note that there are three kinds of news - international news, national news and regional news represented as intnews, natnews and regnews. Apologies for this lengthy post.

[bdl]

Welcome to the forums. We all started out in much the same way, don't worry about it.

When posting, please be sure to use the CODE tags and indent for readability.

My first question is, do you really need Ajax in this case? In my mind, you're not really implementing Ajax. You're using a query string value to retrieve data using the XMLHttpRequest object, for sure, but it doesn't seem as if it's doing anything behind the scenes. If you were to say, have a page full of content, and only load a single DIV dynamically with new news when it's ready, then that's Ajax. I'm not quite certain what you're even doing here. It's just one huge switch statement.

Do you have the ability to use PHP or another scripting language to retrieve dynamic content? It would make this much more elegant and easy. In your case, you're trying to parse a query string and use a cumbersome switch statement to choose one of several different static HTML documents. If you had access to a server-side scripting language like PHP, you can use a single call to xmlHttp, and have the server-side script use some logic to return the correct content. I can't see having multiple flat file documents storing news. How could you ever keep track of it all?

I would at the very least change two things about the script; first and foremost I would eliminate multiple references to xmlHttp. This is what the script should do: instantiate the xmlHttp request object once, and then use that global object from triggers to retrieve external data. So you have a setInterval trigger, or a click trigger, whatever, and it calls the xmlHttp request object into action. What you're doing is just instantiating over and over and calling it in a linear fashion. The second thing I would do is dump HTML documents and use XML to store news data. Your calling page should be set as far as (X)HTML, layout and design, and your JavaScript should call xmlHttp to retrieve an XML feed / document, parse the XML document tree and format data into the main (X)HTML space.

The best solution, as I mentioned, would be to have a server-side scripting language such as PHP (or Perl, ASP, JSP, Python, etc) retrieve dynamic content from let's say an external feed or from a database, then take that data and reformat as XML that your JavaScript can call upon and make use of on-the-fly.