Issue with XMLHttpRequest request

Question

I have html page pulling data from another page using ajax.

The code works fine on firefox but gives an access denied on xhr.open("...")in IE and Chrome.

The sample code is as shown.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/Javascript">
        function changeContent(url)
        {
            var xhr = new XMLHttpRequest(); 
            xhr.open("GET",url,false); //Access denied on this line
            xhr.send();
            var roster = document.getElementById("roster");
            roster.innerHTML=xhr.responseText;
        }
    </script>
  </head>
  <body>
    <img src=images/logo_990x80.png width=1300" height="80" />

    <div class="buttonBar">
        <input type="button" value="data" onclick="changeContent('data.html')"/>
    </div>

    <div id="roster" class="roster">
        Click on the buttons above to choose a roster
    </div>

  </body>
</html>

The data.html contains a simple table with 2 rows of data.

How can I solve this issue.

Edit : Code shown below works on IE and firefox but still has the same issue in Chrome.It seems ActiveX works on local files for Ajax.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/Javascript">
        function changeContent(url)
        {
        var xhr = false;
                    if(location.protocol=="file:")
        {
                if(!xhr)try{ xhr=new ActiveXObject("MSXML2.XMLHTTP"); }catch(e){xhr=false;}
                if(!xhr)try{ xhr=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){xhr=false;}
            }
        else
        {
            if(!xhr)try{ xhr=new XMLHttpRequest(); }catch(e){xhr=false;}
        }   
            xhr.open("GET",url,false); //Access denied on this line only in Chrome
            xhr.send();
            var roster = document.getElementById("roster");
            roster.innerHTML=xhr.responseText;
        }
    </script>
  </head>
  <body>
    <img src=images/logo_990x80.png width=1300" height="80" />

    <div class="buttonBar">
        <input type="button" value="data" onclick="changeContent('data.html')"/>
    </div>

    <div id="roster" class="roster">
        Click on the buttons above to choose a roster
    </div>

  </body>
</html>

Any tips for chrome.

@Vinoth : Yes, If I try to access the `data.html` directly, I'm able to see the data and the code is working perfectly on Firefox but having issue in IE and Chrome as I mentioned. — Dark Matter, Feb 28 '14 at 13:25
for some reason `XMLHttpRequest` blocked in some browsers such as Google chrome , u need to replace ur code with jquery it better and simple did u want me to change ur code with jquery ? — Kodr.F, Feb 28 '14 at 13:26
@user3059001 : Sure, I can give that a try. But what is the issue with `XMLHttpRequest`. — Dark Matter, Feb 28 '14 at 13:29
possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Qantas 94 Heavy, Feb 28 '14 at 13:33
@user3059001 — Chrome does not block XHR. jQuery just wraps XHR. — Quentin, Feb 28 '14 at 13:38

score 0 · Answer 1 · answered Feb 28 '14 at 13:39

0

This is usually caused by trying to use XMLHTTPRequest without using an HTTP URI.

Firefox supports XHR over file: scheme URIs, most browsers do not.

Run your page through a web server if you want to use Ajax.

answered Feb 28 '14 at 13:39

Quentin

914,110
126
1,211
1,335

I've updated my question and added code and it now works on IE and Firefox but still facing same issue on Chrome. – Dark Matter Feb 28 '14 at 13:55
@DarkMatter — The solution is still the same: Run your page through a web server if you want to use Ajax. – Quentin Feb 28 '14 at 14:21
Thanks, will try and get back if I face any issues. – Dark Matter Feb 28 '14 at 14:40

Issue with XMLHttpRequest request

1 Answers1