title: Couldn't ajax local file from local html page
body: <p>According to <a href="http://en.wikipedia.org/wiki/Same_origin_policy#Corner_cases_and_exceptions" rel="nofollow">Same Origin Policy</a>, SOP shouldn't apply to file:// protocol, but why my code does not work? I am running this testing page from my local system and I have abc.txt in the same directory as the html page. If I change URL to <a href="http://www.google.com/" rel="nofollow">http://www.google.com/</a>, it does not work too. I don't understand why, could anyone explain?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="us"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;jQuery UI Example Page&lt;/title&gt;
      &lt;link href="css/sunny/jquery-ui-1.10.2.custom.css" rel="stylesheet"&gt;
      &lt;script src="js/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery-ui-1.10.2.custom.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $.support.cors = true;
      $(function(){
          $(".btn1").button().click(function(){
              $.ajax({
  
                url: "abc.txt"
  
              }).done(function(result) {
                alert("done");
                $(".content").html(result);
              }).fail(function() { 
                  alert("error"); 
              });
          });
  
      });
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;button class="btn1"&gt;Click me!&lt;/button&gt;
  
  &lt;div class="content"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Edited:</strong>
  The console printed as below:</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load
    file:///C:/Users/yc/Desktop/jquery%20ajax%20testing/jquery-ui-1.10.2.custom/jquery-ui-1.10.2.custom/abc.txt.
    Origin null is not allowed by Access-Control-Allow-Origin.</p>
  </blockquote>
  
  <p>*It does not work for Firefox, IE too.</p>