[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

xmlhttprequest does nothing

Posted on 2009-02-16
7
Medium Priority
?
460 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

0
Comment
Question by:jumprooster
  • 4
  • 3
7 Comments
 
LVL 15

Expert Comment

by:quincydude
ID: 23655839
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
0
 

Author Comment

by:jumprooster
ID: 23655862
apparently you can , i was watching this ajax tutorial from cartoon smart and the guy does it
0
 
LVL 15

Accepted Solution

by:
quincydude earned 2000 total points
ID: 23655934
put your

line 40-41

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

outside the

xhr.onreadystatechange=function()

block
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 15

Expert Comment

by:quincydude
ID: 23655945
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
0
 

Author Closing Comment

by:jumprooster
ID: 31547621
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 :)
0
 

Author Comment

by:jumprooster
ID: 23655992
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?
0
 

Author Comment

by:jumprooster
ID: 23656182
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.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question