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>