AJAX vs IE issue

[Ciubhran]

Hello, I am having problems with Internet Explorer (as always) and AJAX.

My code works with Firefox, but the page returns errors when trying to execute this script in Explorer:

<script type="text/javascript" language="javascript">
   var xmlHttp = false;

   function createPostRequest(url, parameters) {
	if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
      
      	xmlHttp.onreadystatechange = alertContents;
      	xmlHttp.open('POST', url, true);
      	xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      	xmlHttp.setRequestHeader('Content-length', parameters.length);
      	xmlHttp.setRequestHeader('Connection', "close");
      	xmlHttp.send(parameters);
   }

   function alertContents() {
      if (xmlHttp.readyState == 4) {
         if (xmlHttp.status == 200) {
            result = xmlHttp.responseText;
            document.getElementById('result').innerHTML = result;   
	    document.getElementById('submitbutton').disabled = false;  //re-enable the trigger       
         } else {
            alert("There was a problem with the request.");
         }
      }
   }
   
   function manufacture(obj) {
      document.getElementById('submitbutton').disabled = true;   //disabling the trigger
      var poststr = "out1=" + escape(encodeURI(value1)) + "&out2=" +  escape(encodeURI(value2)) + "&out3=" +  escape(encodeURI(value3)); //there are more variables here, but they are generated with PHP (and the string is created as it should both in IE and FF)

      createPostRequest("manufacture.php", poststr);
   }
</script>

Anyone can see what is wrong straight away?

[buddylee17]

I believe xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); is outdated. See how W3Schools suggests implementing for IE. Also, read more about the argument here.

[Ciubhran]

That wasn't it, unfortunately.

It now supports all kinds of different IE things:

var XMLHTTPREQUEST_MS_PROGIDS = new Array(
  	"Msxml2.XMLHTTP.7.0",
  	"Msxml2.XMLHTTP.6.0",
 	"Msxml2.XMLHTTP.5.0",
  	"Msxml2.XMLHTTP.4.0",
  	"MSXML2.XMLHTTP.3.0",
  	"MSXML2.XMLHTTP",
  	"Microsoft.XMLHTTP"
   );

   var xmlHttp = null;

   function makePOSTRequest(url, parameters) {
	if (window.XMLHttpRequest != null) {
    		xmlHttp = new window.XMLHttpRequest();
	}
  	else if (window.ActiveXObject != null) {
    		// Must be IE, find the right ActiveXObject.
   		var success = false;
    		for (var i = 0; i < XMLHTTPREQUEST_MS_PROGIDS.length && !success; i++) {
			try {
        			xmlHttp = new ActiveXObject(XMLHTTPREQUEST_MS_PROGIDS[i]);
        			success = true;
      			}
      			catch (ex) {}
    		}
  	}
	else {
		alert("Your browser does not support AJAX.");
		return xmlHttp;
	}
 
      	xmlHttp.onreadystatechange = alertContents;
      	xmlHttp.open('POST', url, true);
      	xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      	xmlHttp.setRequestHeader('Content-length', parameters.length);
      	xmlHttp.setRequestHeader('Connection', "close");
      	xmlHttp.send(parameters);
   }
	
   function alertContents() {
      if (xmlHttp.readyState == 4) {
         if (xmlHttp.status == 200) {
            result = xmlHttp.responseText;
            document.getElementById('result').innerHTML = result;   
	    document.getElementById('submitbutton').disabled = false;         
         } else {
            alert("There was a problem with the request.");
         }
      }
   }

But the problem remains.

[chaosprime]

As always: how does it fail? What happens, how does that differ from your expectations, what debugging information do you get? (Tip: go to Tools > Internet Options, Advanced tab, and make sure "Browsing: Display a notification about every script error" is on and "Browsing: Disable script debugging (Internet Explorer)" and "Browsing: Disable script debugging (Other)" are off.)

[Ciubhran]

Object doesnt support this property or method.

If my inferior debugging skills serve me right, its on the same line as send().

[chaosprime]

If you can't tell by matching the reported line number with your code, then insert alert()s for debugging. For instance, if you put one before and one after the send() call, and the first alert() fires and the second doesn't, then you know it was in fact the send() call. If neither alert fires, it's earlier. If both alerts fire, madness ensues.

[langsor]

I just spent some time fooling around with this and not realizing that my path to my server-side script wasn't being found by the server (on my local computer)...when i fixed that it just worked -- I don't know what I did. It's working on my computer for IE 7, FF 3, Opera 9.51.

Server side script:
remote.php

<?php
print "pizza";
?>

Fiddled with Ajax page:

<html>
<head>
<script type="text/javascript">

var XMLHTTPREQUEST_MS_PROGIDS = new Array(
  "Msxml2.XMLHTTP.7.0",
  "Msxml2.XMLHTTP.6.0",
  "Msxml2.XMLHTTP.5.0",
  "Msxml2.XMLHTTP.4.0",
  "MSXML2.XMLHTTP.3.0",
  "MSXML2.XMLHTTP",
  "Microsoft.XMLHTTP"
);

function makePOSTRequest( url, parameters ) {
  var xmlHttp = null;
  if ( window.XMLHttpRequest != null ) {
    xmlHttp = new window.XMLHttpRequest();
  } else if ( window.ActiveXObject != null ) {
    // Must be IE, find the right ActiveXObject.
    var success = false;
    for (var i = 0; i < XMLHTTPREQUEST_MS_PROGIDS.length && !success; i ++) {
      try {
        xmlHttp = new ActiveXObject(XMLHTTPREQUEST_MS_PROGIDS[i]);
        success = true;
      } catch (ex) {}
    }
  } else {
    alert( "Your browser does not support AJAX." );
    return xmlHttp;
  }
  xmlHttp.onreadystatechange = alertContents;
  xmlHttp.open( 'POST', url, true );
  xmlHttp.setRequestHeader( 'Content-type', 'application/x-www-form-urlencoded' );
  xmlHttp.setRequestHeader( 'Content-length', parameters.length );
  //xmlHttp.setRequestHeader('Connection', "close");
  xmlHttp.send( parameters );
}
  
function alertContents() {
  // alert( this.status );
  if ( this.readyState == 4 ) {
  //alert( this.responseText );
    if ( this.status == 200 ) {
      result = this.responseText;
    //  document.getElementById('result').innerHTML = result;
    //  document.getElementById('submitbutton').disabled = false;
      alert( result );
    } else {
      //alert( this.getAllResponseHeaders() );
      alert( "There was a problem with the request." );
    }
  }
}
</script>
</head>
<body>
<a href="javascript:makePOSTRequest('ajax/remote.php','name=value')">Click me please</a>
</body>
</html>

Look it over, maybe you'll see what I did :-/

Ciao

[Ciubhran]

I pretty much copied your example, still doesn't work.

And now my debugger says its on "open()"...

But, adding alerts() on places around it, the place of error changes to the alert...

So I don't know what is up with the IE script debugger.

[Ciubhran]

PROBLEM SOLVED!

God, that was so easy.

The error was that I never declared 'result' as a variable.

It was:

"result = this.responseText"

which I simply changed to

"var result = this.responeText"

The variable isnt even needed, don't know why it is there.

[buddylee17]

Weird. I thought declaring variables in JavaScript was more of a "good practice" than a requirement. I always do it but wouldn't think that it would break the script.

[Ciubhran]

Found another problem now.

If I declare "var xmlHttp" as a global, it only works in FF. If I declare it inside of makePOSTRequest (like the above example), then it only works in IE.

[langsor]

I agree, that is weird

If I understand correctly, declaring a var within a function block changes the scope of the variable from the global scope (window) to the local scope (function), thus avoids namespace collisions if you have like-variable names in the global scope. Maybe this is why it worked in my environment, I didn't have any other javascript on the page besides this function.

??? Glad you got it to work though !!!

:-)

[langsor]

If I declare "var xmlHttp" as a global, it only works in FF. If I declare it inside of makePOSTRequest (like the above example), then it only works in IE.

I read that declaring it in the global scope (outside the function body) will produce errors if you try and reuse the xmlHttp object, so place it in your function and re-declare it as null for each use.

Did you change the values of your alertContents function from xmlHttp to this, when the xmlHttp is no longer in the global scope (when it is declared in the function)?

IF not your function might have trouble seeing those values ?

I'm tired, sorry I can't be of more help ... but it was working in all of my browsers earlier today.

G'night

[Ciubhran]

Got it to work now. Thanks for all the help.

[chaosprime]

On the global/local declaration issue, one of the things going on is that Firefox's JS interpreter correctly handles variable scope (the variable only exists inside of the scope where it's declared) and IE's does not (all variables are effectively global).