Javascript – Prototype’s Ajax.Request and Internet Explorer 8

ajaxinternet-explorerinternet-explorer-8javascriptprototypejs

The following code is supposed to perform an AJAX request after the page loads, and then display the response of that AJAX call in a popup. This works in Firefox, but I have no idea why it does not work in IE8.

<html>
<head>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript">
        // Do this stuff when DOM finishes loading.
        document.observe("dom:loaded", function() {
            new Ajax.Request("page.html", {
                onSuccess: function(response) {
                    alert(response.responseText);
                }
            });
        }); 
    </script>
</head>
<body>
</body>
</html>

page.html just contains

hello world

Am I missing something obvious or is this a result of the prototype js library not being fully compatible with IE8? I tried this with the latest stable prototype release (1.6.0.3) and the bleeding-edge version (1.6.1 RC3) with no luck. Any help would be much appreciated, thanks!

Best Solution

Are you doing this in a web site or using a file? I was able to get your code working in a web site in Visual Studio, but when I tried it from a file I got an "Access Denied" error. I suspect that it is not able to do an Ajax request to a file in the local file system due to security restrictions in IE8.

Here's the exact code I used in my Default.aspx page to load the page.htm file. Note that I changed the method -- since it's not a form -- and I added callbacks for failure and exceptions. The exception callback was what got triggered for me with a local file. As I said, it works fine when accessing a page in the same web site.

<script type="text/javascript">
    document.observe( 'dom:loaded', function() {
        new Ajax.Request("page.htm", {
            method: 'get',
            onSuccess: function(response) {
                alert(response.responseText);
            },
            onFailure: function(response) {
                alert(response);
            },
            onException: function(request,error) {
                alert(error.message);
            }
        }); 
    });
</script>

Scoping rules

The main difference is scoping rules. Variables declared by var keyword are scoped to the immediate function body (hence the function scope) while let variables are scoped to the immediate enclosing block denoted by { } (hence the block scope).

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar); // Foo Bar

  {
    var moo = "Mooo"
    let baz = "Bazz";
    console.log(moo, baz); // Mooo Bazz
  }

  console.log(moo); // Mooo
  console.log(baz); // ReferenceError
}

run();

The reason why let keyword was introduced to the language was function scope is confusing and was one of the main sources of bugs in JavaScript.

Take a look at this example from another stackoverflow question:

var funcs = [];
// let's create 3 functions
for (var i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value: " + i);
  };
}
for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

My value: 3 was output to console each time funcs[j](); was invoked since anonymous functions were bound to the same variable.

People had to create immediately invoked functions to capture correct values from the loops but that was also hairy.

Hoisting

While variables declared with var keyword are hoisted (initialized with undefined before the code is run) which means they are accessible in their enclosing scope even before they are declared:

function run() {
  console.log(foo); // undefined
  var foo = "Foo";
  console.log(foo); // Foo
}

run();

let variables are not initialized until their definition is evaluated. Accessing them before the initialization results in a ReferenceError. The variable is said to be in "temporal dead zone" from the start of the block until the initialization is processed.

function checkHoisting() {
  console.log(foo); // ReferenceError
  let foo = "Foo";
  console.log(foo); // Foo
}

checkHoisting();

Creating global object property

At the top level, let, unlike var, does not create a property on the global object:

var foo = "Foo";  // globally scoped
let bar = "Bar"; // not allowed to be globally scoped

console.log(window.foo); // Foo
console.log(window.bar); // undefined

Redeclaration

In strict mode, var will let you re-declare the same variable in the same scope while let raises a SyntaxError.

'use strict';
var foo = "foo1";
var foo = "foo2"; // No problem, 'foo1' is replaced with 'foo2'.

let bar = "bar1"; 
let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declared

Best Solution

Related Solutions

Running Internet Explorer 6, Internet Explorer 7, and Internet Explorer 8 on the same machine

Javascript – What’s the difference between using “let” and “var”

Scoping rules

Hoisting

Creating global object property

Redeclaration

Related Question