hi guys need help with a simple ajax script please

[gerble1000]

i need the simplest way to add to my javascript code a way of getting data from a text file in the same directory as the index.html and putting the data into a variable called data1 to be used by the rest of the script
any ideas

[devnull69]

Yes, google for "simple Ajax example"

[gerble1000]

i cant seem to find an example that does what i need

[devnull69]

i cant seem to believe that

This is what came up as the very first result googling for Ajax example

var myvar = "";
var http = XMLHttpRequest();
http.open('GET', 'datatextfile.txt', true);
http.onreadystatechange = function() {
   if(http.readyState == 4 && http.status == 200)
       myvar = http.responseText;
}
http.send(null);

[gerble1000]

ok thanx
i have played with this and i am finding it a problem...here is my code

<script type="text/javascript">
function changecolor()
{
var myvar = "";

	var http = createRequestObject();

	function createRequestObjecte() {
		var objAjax;
		var browser = navigator.appName;
		if (browser == "Microsoft Internet Explorer"){
			objAjax = new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			objAjax = new XMLHttpRequest();
		}


		http.open('get',text1.txt,true);
		http.send(null);
		myvar = http.responseText; 

	}









var tcolor1 = myvar;
var tcolor2 = "pink";
var tcolor3 = "blue";
var tcolor4 = "orange";





document.getElementById('color1').style.color = tcolor1;
document.getElementById('color2').style.color = tcolor1;
document.getElementById('color3').style.color = tcolor1;
document.getElementById('color4').style.color = tcolor1;
document.getElementById('color5').style.color = tcolor1;
document.getElementById('color6').style.color = tcolor1;
document.getElementById('color7').style.color = tcolor1;
document.getElementById('color8').style.color = tcolor1;

}
</script>

could you please tell me what i am doing wrong

[devnull69]

Yes, you did not use my example above. Instead you removed the (important) callback onreadystatechange and treated the responseText from an asynchronous request (third parameter of open is true) as if it was a synchronous one ... which obviously doesn't work. Additionally, starting from IE7 you do not need a browser switch any more as every modern browser recognizes the XMLHttpRequest object.

[gerble1000]

i know i dont know as much as you but i am trying my best...
im more familiar with perl and c++.. could you please point out what i have done wrong and please help correct.
i supply people with information on another forum for help with other languages.
could you be a professional and help please

[Spidey1980]

http://bookofjavascript.com/Chapter16/Fig16-15.txt HTML that uses the following PHP
http://bookofjavascript.com/Chapter16/readTextFile.txt PHP file that opens and reads files

[devnull69]

Please try to adhere as close as possible to my first example ... and if it doesn't work, please come back with your rewritten code. Then we will find the problem.

The goal of this forum is not to write the code for you but to guide you to help yourself as good as possible.

var myvar = "";
var http = XMLHttpRequest();
http.open('GET', 'datatextfile.txt', true);
http.onreadystatechange = function() {
   if(http.readyState == 4 && http.status == 200)
       myvar = http.responseText;
}
http.send(null);

Hint: The first A in Ajax means "asynchronous". I think coming from C++ you should be aware of this construct. Essentially it means that the normal Javascript program flow continues while "some background task" is still running. As soon as the background task triggers some event (in this case the change of the readyState), it will call a so-called "callback function" (onreadystatechange). readyState==4 says: Request complete, status==200 says HTTP OK. In that case you can grab the PHP script output from responseText and do with it whatever you want

[gerble1000]

i dont get it im racking my brains for days now and still cant get this to work

here is what i have

<script type="text/javascript">
function changecolor()





{
var myvar = "";
var http = XMLHttpRequest();
http.open('GET', 'text1.txt', true);
http.onreadystatechange = function() {
   if(http.readyState == 4 && http.status == 200)
       myvar = http.responseText;
}
http.send(null);








var tcolor1 = myvar;
var tcolor2 = "pink";
var tcolor3 = "blue";
var tcolor4 = "orange";





document.getElementById('color1').style.color = tcolor1;
document.getElementById('color2').style.color = tcolor1;
document.getElementById('color3').style.color = tcolor1;
document.getElementById('color4').style.color = tcolor1;
document.getElementById('color5').style.color = tcolor1;
document.getElementById('color6').style.color = tcolor1;
document.getElementById('color7').style.color = tcolor1;
document.getElementById('color8').style.color = tcolor1;

[devnull69]

This is a common mistake. Outside of onreadystatechange the "myvar" variable remains undefined, because this code will be executed BEFORE the request has finished.

Conclusion: Everything you want to do depending on the result of the request has to be (started from) inside the onreadystatechange callback

var myvar = "";
var http = XMLHttpRequest();
http.open('GET', 'text1.txt', true);
http.onreadystatechange = function() {
   if(http.readyState == 4 && http.status == 200) {
       myvar = http.responseText;
       var tcolor1 = myvar;
       var tcolor2 = "pink";
       var tcolor3 = "blue";
       var tcolor4 = "orange";
       document.getElementById('color1').style.color = tcolor1;
       document.getElementById('color2').style.color = tcolor1;
       document.getElementById('color3').style.color = tcolor1;
       document.getElementById('color4').style.color = tcolor1;
       document.getElementById('color5').style.color = tcolor1;
       document.getElementById('color6').style.color = tcolor1;
       document.getElementById('color7').style.color = tcolor1;
       document.getElementById('color8').style.color = tcolor1;
   }
}
http.send(null);