Javascript XmlHttpRequest Issues

Question

Hello,

I created a html/javascript website running on an Apache Webserver on Mac OS X. This website consumes a .NET Webservice with JSON via XmlHttpRequest. This Webservice is running on a Windows Vista machine.

The website is accessible with this url: http://macintosh.companyname.local/~username/Sitename/index.html. When I open the website on the Mac with Safari with this url I don't get any JSON data back from the Webservice.

When I open the website with the URL file://Users/username/Sites/Sitename/index.html it works perfectly.

My first thoughts are that is has something to do with XmlHttpRequest and it's security restrictions in many browsers, but I am not sure why it doesn't work when I call the site via the webserver instead of the absolute path to the html file.

Here the code I use to call the Webservice:

<div id="eigenRisico" class="panel" title="Eigen Risico">
<h2>Eigen Risico Per Polis</h2>  
 <script type="text/javascript">   
 var xhr = new XMLHttpRequest();
 xhr.open("POST", "http://webserviceurl/GetEigenRisicoVerzekerde", true);  
 xhr.onreadystatechange = function(){

  if (xhr.readyState === 4) { 
   var result = eval('(' +xhr.responseText+')');   
   var ihtml="";
   var j = 0;
   for(i = 0; i < result.d.length/2; i++) {
    ihtml=ihtml+"<fieldset><div class='row'><label>Polisnummer:</label><span>"+result.d[j]+"</span></div>";
    j++;
    ihtml=ihtml+"<div class='row'><label>Resterend Eigen Risico:</label><span>&euro "+result.d[j]+"</span></div></fieldset>";
    j++;
   }    
   document.getElementById('eigenRisico').innerHTML = ihtml;
  }
 };
 xhr.setRequestHeader("content-type", "application/json");
 var postData = '{"bsn": "999999999"}';
 xhr.send(postData);
 </script>    
</div>

Does somebody knows why this is happening?

Answer 1

You can't do cross-domain ajax requests

See http://en.wikipedia.org/wiki/Same_origin_policy

You can get around this by setting up a proxy page on your own domain that will take the request and redirect it, then redirect the output back to you.

Are you running PHP? or other server-side processing?

Edit
Just to clarify your original problem, when reading from file://, the security policy is different that from http://. the local resource is considered trusted, and as such the ajax request is allowed to go through. As a web address, it just looks like one website is doing things in your name that maybe it shouldn't.