We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

xmlhttprequest does nothing

jumprooster
jumprooster asked
on
Medium Priority
522 Views
Last Modified: 2012-05-06
Hello,

I'm trying to return data to the client browser from a text file using the XMLHTTPREQUEST Object.

I have the data.txt file in the same directory as this web page.

What's supposed to happen is that you click on the submit button and the innerHTML of the div is filled in with the text from the text file "data.txt".

When I click the button nothing happens. I know the innerHTML should work because I tested it independently.

I've tried putting alert(xhr); or alert("some text"); at various places in the code put they don't fire.

Is there something with the try catch?

I'm previewing this web page in the latest versions of Firefox and Internet Explorer.

maximum points and A grade for the solution !

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEXTEL.NET Excercise</title>
<script type="text/javascript">
function ajaxSubmit() 
{
	var xhr;
	try {xhr=new ActiveXObject("Msxml2.XMLHTTP") }
	catch(e)
	{   
		try {xhr=new ActiveXObject("Microsoft.XMLHTTP") }
		catch(e2)
		{
			try {xhr=new XMLHttpRequest() }
			catch(e3){xhr=false;}
		}
	}  
	//event handler for XMLHTTPREQUEST OBJECT
	xhr.onreadystatechange=function()
	{
		if(xhr.readyState==4)
		{
			if(xhr.status==200)
			{   
				var scrollImages;
				scrollImages=document.getElementById("scrollImages");
				scrollImages.innerHTML=xhr.responseText;
				
				
			}
			else 
			{
				
				var scrollImages;
				scrollImages=document.getElementById("scrollImages");
				scrollImages.innerHTML=xhr.status;
			}
		}
		xhr.open("POST", "data.txt", true);
		xhr.send(null);
	}
}
 
</script>
 
</head>
<body>
 
<table width="100%" border="0">
  <tr>
  <td width="33%"></td>
    <td>
        <form method="POST" name="ajax_form" action="">
        <table width="100%" border="0" >
  <tr>
    <td colspan="2" align="left"><strong>Enter new product:</strong></td>
  </tr>
  <tr>
    <td>Name:</td>
    <td><input name="txtName" type="text" /></td>
  </tr>
  <tr>
    <td>Price:</td>
    <td><input name="txtPrice" type="text" /></td>
  </tr>
  <tr>
    <td>Image URL:</td>
    <td><input name="txtImage" type="text" /></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="button" name="btnSubmit" value="Submit" ONCLICK="ajaxSubmit()" /></td>
  </tr>
</table>
        </form>
    </td>
    <td width="33%"></td>
</table>  
<table width="100%" border="1">
</tr>
  <tr>
    <td colspan="3" align="center"><strong><< Scroll Area >></strong></td>
  </tr>
  <tr>
    <td colspan="3" align="center"><strong><div id="scrollImages"></div></strong></td>
  </tr>
</table>
 
 
 
</body>
</html>

Open in new window

Comment
Watch Question

I wonder if you can read a file content directly from the open method?
Don't you need to write a server side script to read the file content to be called by the open method?

http://www.w3schools.com/ajax/default.asp

Author

Commented:
apparently you can , i was watching this ajax tutorial from cartoon smart and the guy does it
put your

line 40-41

                xhr.open("POST", "data.txt", true);
                xhr.send(null);

outside the

xhr.onreadystatechange=function()

block

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
by the way you have to remove the status check
if(xhr.status==200)

if you want to read the file content on the page

Author

Commented:
it works like a charm.. that was a simple javascript misplacement of code

i placed the open method inside the wrong block

thanks quincydude full points and A grade are for you :)

Author

Commented:
ok, i saw it working based on the accepted solution previewing it in apanta

when i try it with an IIS server I get the xhr.status returning 405 in Firefox and 411 in Internet Explorer

I looked these up they mean:

405 Method Not Allowed
411 Length Required

hmm.. I wonder what the problem is?

Author

Commented:
i got it working, i changed the problem code section to this:

//event handler for XMLHTTPREQUEST OBJECT
      xhr.onreadystatechange=function()
      {
            if(xhr.readyState==4)
            {
                  if(xhr.status==200)
                  {  
                        var outMsg=xhr.responseText;
                  }
                  else
                  {
                        
                        var outMsg=xhr.status;      
                  }
                  
                  
            var scrollImages=document.getElementById("scrollImages");
            scrollImages.innerHTML=outMsg;
            }
            
      }
      xhr.open("GET", "data.txt", true);
      xhr.send(null);

I changed the method to GET where it was POST before and now it works.
At the same time my HTML form is set to method POST.

Just changing the XMLHttpRequest's open method to GET lets you read the text file's content on the page.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.