The JavaScript logics below doesn't display the value from the demo_get.txt in ajax.html. Did I do something wrong?

ajax.html

<HTML>
<HEAD>
<script type="text/javascript">
    function ajaxRequest(){  
        var xmlhttp;
    	if(window.XMLHttpRequest){
           xmlhttp = new XMLHttpRequest();
           xmlhttp.open("GET","demo_get.txt",false);
           xmlhttp.send();
           document.getElementById("panel").innerHtml = xmlhttp.responseText;
        }else{
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
           xmlhttp.open("GET","demo_get.txt",false);
           xmlhttp.send(); 
           document.getElementById("panel").innerHtml = xmlhttp.responseText;
        }
    }
</script>
</HEAD>
<TITLE>AJAX EXAMPLE</TITLE>
<BODY onload="ajaxRequest()">
   <div id="panel">Let Ajax alter this page</div>
</BODY>
</HTML>

demo_get.txt

HELLO AJAX APPLICATION

Recommended Answers

Look at this example: http://www.w3schools.com/dom/tryit.asp?filename=try_dom_xmlhttprequest_first

Also your Title tag is outside your head tag, it should be inside it and preferably right after the starting Head tag.

Also, always specify a doctype.

Jump to Post

Why are you duplicating so much code?

Change it to this:

<HTML>
<HEAD>
<TITLE>AJAX EXAMPLE</TITLE>
<script type="text/javascript">
function ajaxRequest(){  

	var xmlhttp;

	if(window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest();
	}
	else{
           
 		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

	xmlhttp.open("POST","demo_get.txt",true); 
           
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4){
			document.getElementById("panel").innerHTML = xmlhttp.responseText;
		}
	}

	xmlhttp.send();
}
</script>

</HEAD>
<BODY> …
Jump to Post

All 8 Replies

I made the changes but I can't see the results.

ajax.html

<HTML>
<HEAD>
<script type="text/javascript">
    function ajaxRequest(){  
        window.alert("Testing");
        var xmlhttp;
    	if(window.XMLHttpRequest){
           xmlhttp = new XMLHttpRequest();
           xmlhttp.open("GET","demo_get.txt",false);
           xmlhttp.send();
           document.getElementById("panel").innerHtml = xmlhttp.responseText;
        }else{
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
           xmlhttp.open("GET","demo_get.txt",false);
           xmlhttp.send(); 
           document.getElementById("panel").innerHtml = xmlhttp.responseText;
        }
    }
</script>
<TITLE>AJAX EXAMPLE</TITLE>
</HEAD>
<BODY>
   <div id="panel"></div>
   <button type="button" onclick="ajaxRequest()">Change Content</button>
</BODY>
</HTML>

demo_get.txt

HELLO AJAX APPLICATION

The code now works on mozilla but not in IE:

ajax.html

<HTML>
<HEAD>
<script type="text/javascript">
    function ajaxRequest(){  
        var xmlhttp;
    	if(window.XMLHttpRequest){
           try{  
               xmlhttp = new XMLHttpRequest();
           }catch(e){
               alert(e);
           }
           xmlhttp.open("POST","demo_get.txt",true); 
           xmlhttp.onreadystatechange=function(){
               if(xmlhttp.readyState==4){
                   document.getElementById("panel").innerHTML = xmlhttp.responseText;
               }
           }
           xmlhttp.send();
        }else{
           try{  
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
           }catch(e){
               alert(e);
           }
           xmlhttp.open("POST","demo_get.txt",true);
           xmlhttp.onreadystatechange=function(){
               if(xmlhttp.readyState==4){
                   alert(xmlhttp.responseText);
                   document.getElementById("panel").innerHTML = xmlhttp.responseText;
               }
           }
           xmlhttp.send(); 
        }
    }
</script>
<TITLE>AJAX EXAMPLE</TITLE>
</HEAD>
<BODY>
   <div id="panel"></div>
   <button type="button" onclick="ajaxRequest()">Change Content</button>
</BODY>
</HTML>

demo_get.txt

HELLO AJAX APPLICATION
Member Avatar

Why are you duplicating so much code?

Change it to this:

<HTML>
<HEAD>
<TITLE>AJAX EXAMPLE</TITLE>
<script type="text/javascript">
function ajaxRequest(){  

	var xmlhttp;

	if(window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest();
	}
	else{
           
 		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

	xmlhttp.open("POST","demo_get.txt",true); 
           
	xmlhttp.onreadystatechange=function(){
		if(xmlhttp.readyState==4){
			document.getElementById("panel").innerHTML = xmlhttp.responseText;
		}
	}

	xmlhttp.send();
}
</script>

</HEAD>
<BODY>
   <div id="panel"></div>
   <button type="button" onclick="ajaxRequest()">Change Content</button>
</BODY>
</HTML>

What version of IE doesn't work? The example I gave you before on w3Schools works in all browsers. Also, put the title tag right after the starting head tag, not right before the ending head tag.

Version 9. Is it because i'm not testing the codes in a web server?

Member Avatar

Is there an error message you are getting, if so please post what it says.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.