call text - ajax

I have a system, that show information in <div> when the mouse over each button. The information come from txt files, that I create for each button.
I did a test of the system, but the response is very slow.  I call the txt files in this line:
onmouseover="getData('websites.txt', 'targetDiv')"
'websites.txt' contains this text 'veja a nossa gama de websites'.
If I want to call the text ''veja a nossa gama de websites'' directly in this line: onmouseover="getData('websites.txt', 'targetDiv')". How I do?
Like: onmouseover="getData('veja a nossa gama de websites', 'targetDiv')"
HTML CODE
<div id="barra">
  <div id="barra_contem">
    <div id="logo"><a href="index.php"><img src="imagem/logo_branco.jpg" border="0" /></a></div><!--logo-->
	<div id="targetDiv">conteudos para a internet</div>
  </div><!--barra_contem-->
</div><!--barra-->
<div id="barra_cinza"></div><!--barra_cinza-->
<div id="geral">
<div id="cx_botoes_sup">
  <div id="b_websites"><a href="websites.php"><img src="imagem/b_websites.png" alt="websites" border="0" onmouseover="getData('websites.txt', 'targetDiv')"/></a></div>
  <div id="b_logotipos"><a href="logotipos.php"><img src="imagem/b_logotipos.png" border="0" onmouseover="getData('logotipos.txt', 'targetDiv')"/></a></div>
  <div id="b_hosting"><a href="hosting.php"><img src="imagem/b_hosting.png" border="0" onmouseover="getData('hosting.txt', 'targetDiv')"/></a></div>
  <div id="b_marketing"><a href="marketing.php"><img src="imagem/b_marketing.png" border="0" onmouseover="getData('marketing.txt', 'targetDiv')"/></a></div>
  <div id="b_ferramentas"><a href="ferramentas.php"><img src="imagem/b_ferramentas.png" border="0" onmouseover="getData('ferramentas.txt', 'targetDiv')"/></a></div>
  <div id="b_conselhos"><a href="consulting.php"><img src="imagem/b_conselhos.png" border="0" onmouseover="getData('consulting.txt', 'targetDiv')"/></a></div>
</div><!--cx_botoes_sup-->
 
AJAX CODE
<script language = "javascript">
      var XMLHttpRequestObject = false; 
 
      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }
 
      function getData(dataSource, divID) 
      { 
        if(XMLHttpRequestObject) {
          var obj = document.getElementById(divID); 
          XMLHttpRequestObject.open("GET", dataSource); 
 
          XMLHttpRequestObject.onreadystatechange = function() 
          { 
            if (XMLHttpRequestObject.readyState == 4 && 
              XMLHttpRequestObject.status == 200) { 
                obj.innerHTML = XMLHttpRequestObject.responseText; 
            } 
          } 
 
          XMLHttpRequestObject.send(null); 
        }
      }
</script>

Open in new window

LVL 4
Pedro ChagasWebmasterAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

quincydudeCommented:
If the text is not really long and need to be stored in a file at server side, you do not need to use AJAX at all.

May be something like below is efficient



<div id="barra">
  <div id="barra_contem">
    <div id="logo"><a href="index.php"><img src="imagem/logo_branco.jpg" border="0" /></a></div><!--logo-->
        <div id="targetDiv">conteudos para a internet</div>
  </div><!--barra_contem-->
</div><!--barra-->
<div id="barra_cinza"></div><!--barra_cinza-->
<div id="geral">
<div id="cx_botoes_sup">
  <div id="b_websites"><a href="websites.php"><img src="imagem/b_websites.png" alt="websites" border="0" onmouseover="getData('veja a nossa gama de websites', 'targetDiv')"/></a></div>
 
 
//javascript function
 
function getData(dataTxt, divID)
{
  var obj = document.getElementById(divID);
  obj.innerHTML = dataTxt;
}
 
 
 
</div>

Open in new window

0
hieloCommented:
try "caching" your messages at load time - ex:

<script>
var websitesData={};
window.onload=function(){
  getData('websites.txt');
  getData('logotipos.txt');
//...
};
 
 
//then in getData, you need to save the ajax response in websitesData:
var websitesData[ key ] = httpobj. responseText;
 
so the only other thing you would need to do at the BEGINNING of getData is:
function dataSource(dataSource,divID){
  var key = dataSource.replace('.txt','');//remove the file extension
  if(typeof(websitesData[key]) != undefined )
  {
   document.getElementById(divID).innerHTML = websitesData[key];
  return;
  }
 /*here you need to continue what you already had in place, which is to make the ajax request and upon completion update websitesData NOT your target div. Why, because you "cached" your data upon page load so you do not need to fetch content again. Now when you mouseover, the data should be in websitesData. */
}
</script>

Open in new window

0
hieloCommented:

<script language = "javascript">
var websitesData={};
window.onload=function(){
  getData('websites.txt');
  getData('logotipos.txt');
  getData('hosting.txt');
  getData('marketing.txt');
  getData('ferramentas.txt');
  getData('consulting.txt');
};
 
      var XMLHttpRequestObject = false; 
 
      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }
 
      function getData(dataSource, divID) 
      { 
  		var key = dataSource.replace('.txt','');//remove the file extension
  		if(typeof(websitesData[key]) != "undefined" )
  		{
   			document.getElementById(divID).innerHTML = websitesData[key];
  		return;
  		}
 
        if(XMLHttpRequestObject) {
          var obj = document.getElementById(divID);
 
		//make sure that you have a valid obj reference
		if(!obj)
			alert("Specified divID may not exist. Check again");
		else
		{
			if(typeof(obj.onmouseout)=="undefined")
			{
				var temp=obj.innerHTML;
				obj.onmouseout=function(){obj.innerHTML=temp;};
			}
          	XMLHttpRequestObject.open("GET", dataSource, true); 
 
          	XMLHttpRequestObject.onreadystatechange = function() 
          	{ 
          	  if (XMLHttpRequestObject.readyState == 4 && 
          	    XMLHttpRequestObject.status == 200) { 
          	      websites[ key ] = XMLHttpRequestObject.responseText; 
          	  } 
          	} 
 		
          	XMLHttpRequestObject.send(null); 
		}
        }
      }
</script>
 
HTML CODE
<div id="barra">
  <div id="barra_contem">
    <div id="logo"><a href="index.php"><img src="imagem/logo_branco.jpg" border="0" /></a></div><!--logo-->
	<div id="targetDiv">conteudos para a internet</div>
  </div><!--barra_contem-->
</div><!--barra-->
<div id="barra_cinza"></div><!--barra_cinza-->
<div id="geral">
<div id="cx_botoes_sup">
  <div id="b_websites"><a href="websites.php"><img src="imagem/b_websites.png" alt="websites" border="0" onmouseover="getData('websites.txt', 'targetDiv')"/></a></div>
  <div id="b_logotipos"><a href="logotipos.php"><img src="imagem/b_logotipos.png" border="0" onmouseover="getData('logotipos.txt', 'targetDiv')"/></a></div>
  <div id="b_hosting"><a href="hosting.php"><img src="imagem/b_hosting.png" border="0" onmouseover="getData('hosting.txt', 'targetDiv')"/></a></div>
  <div id="b_marketing"><a href="marketing.php"><img src="imagem/b_marketing.png" border="0" onmouseover="getData('marketing.txt', 'targetDiv')"/></a></div>
  <div id="b_ferramentas"><a href="ferramentas.php"><img src="imagem/b_ferramentas.png" border="0" onmouseover="getData('ferramentas.txt', 'targetDiv')"/></a></div>
  <div id="b_conselhos"><a href="consulting.php"><img src="imagem/b_conselhos.png" border="0" onmouseover="getData('consulting.txt', 'targetDiv')"/></a></div>
</div><!--cx_botoes_sup-->

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Pedro ChagasWebmasterAuthor Commented:
I try the example of hielo, but some error ocurred like you can see in the attached image.
error.jpg
0
hieloCommented:
try:
<script language = "javascript">
var websitesData={};
window.onload=function(){
  getData('websites.txt');
  getData('logotipos.txt');
  getData('hosting.txt');
  getData('marketing.txt');
  getData('ferramentas.txt');
  getData('consulting.txt');
};
 
      var XMLHttpRequestObject = false; 
 
      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
      }
 
      function getData(dataSource, divID) 
      { 
  		var key = dataSource.replace('.txt','');//remove the file extension
  		if(typeof(websitesData[key]) != "undefined" )
  		{	
			var obj=document.getElementById(divID);
			if( !obj)
			{
				alert("Specified divID may not exist. Check again");
				return;
			}
			else if(typeof(obj.onmouseout)=="undefined")
			{
				var temp=obj.innerHTML;
				obj.onmouseout=function(){obj.innerHTML=temp;};
			}
   			obj.innerHTML = websitesData[key];
  		return;
  		}
 
        if(XMLHttpRequestObject) 
	   {
          	XMLHttpRequestObject.open("GET", dataSource, true); 
 
          	XMLHttpRequestObject.onreadystatechange = function() 
          	{ 
          	  if (XMLHttpRequestObject.readyState == 4 && 
          	    XMLHttpRequestObject.status == 200) { 
          	      websites[ key ] = XMLHttpRequestObject.responseText; 
          	  } 
          	} 
          	XMLHttpRequestObject.send(null); 
        }
      }
</script>
 
HTML CODE
<div id="barra">
  <div id="barra_contem">
    <div id="logo"><a href="index.php"><img src="imagem/logo_branco.jpg" border="0" /></a></div><!--logo-->
	<div id="targetDiv">conteudos para a internet</div>
  </div><!--barra_contem-->
</div><!--barra-->
<div id="barra_cinza"></div><!--barra_cinza-->
<div id="geral">
<div id="cx_botoes_sup">
  <div id="b_websites"><a href="websites.php"><img src="imagem/b_websites.png" alt="websites" border="0" onmouseover="getData('websites.txt', 'targetDiv')"/></a></div>
  <div id="b_logotipos"><a href="logotipos.php"><img src="imagem/b_logotipos.png" border="0" onmouseover="getData('logotipos.txt', 'targetDiv')"/></a></div>
  <div id="b_hosting"><a href="hosting.php"><img src="imagem/b_hosting.png" border="0" onmouseover="getData('hosting.txt', 'targetDiv')"/></a></div>
  <div id="b_marketing"><a href="marketing.php"><img src="imagem/b_marketing.png" border="0" onmouseover="getData('marketing.txt', 'targetDiv')"/></a></div>
  <div id="b_ferramentas"><a href="ferramentas.php"><img src="imagem/b_ferramentas.png" border="0" onmouseover="getData('ferramentas.txt', 'targetDiv')"/></a></div>
  <div id="b_conselhos"><a href="consulting.php"><img src="imagem/b_conselhos.png" border="0" onmouseover="getData('consulting.txt', 'targetDiv')"/></a></div>
</div><!--cx_botoes_sup-->

Open in new window

0
Pedro ChagasWebmasterAuthor Commented:
Disappeared the previous error, now giving another error at the top of the page as seen in the picture.
error2.jpg
0
hieloCommented:
>>now giving another error at the top of the page as seen in the picture
If you are referring to those numbers, it must be your php. What I gave you would NOT cause those numbers to appear there.
0
Pedro ChagasWebmasterAuthor Commented:
But even with those numbers at the top of the page code does not work!
Do you thing with simple javascript I can do this?
0
hieloCommented:
sorry. line 52(after you remove those other lines/numbers)  should be:
 websitesData[ key ] = XMLHttpRequestObject.responseText;

NOT:
 websites[ key ] = XMLHttpRequestObject.responseText;
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hieloCommented:
Why the lousy grade?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.