ajax如何请求本地txt文件时

这个坑还是要记录一下。
在使用ajax请求本地的txt文件时,发现不能获取本地的文件,以为自己的代码有问题,经过几番捣鼓发现原来是跨域请求的问题。只有火狐浏览器允许获取本地文件,Chrome浏览器以及IE等浏览器默认状态下是不允许获取的,个人对Chrome浏览器太执着,于是又搜索了一下Chrome如何处理跨域请求的问题,开始入坑~~~
看到有好多网友说在Google的快捷方式右键属性,
然后在目标一栏加上 –allow-file-access-from-files,
再点击 应用和确定就好。
然而我就傻傻地以为这样没问题了,又开始怀疑是我的代码有问题,于是我就借用了网友们贡献的代码做了测试,我的乖乖,还是不行。这下要崩溃了,难道是我的电脑问题?感觉自己像个傻子。傻哭。
几经搜索发现是Chrome浏览器版本更新之后的问题

解决方案来自包子源的博客http://blog.csdn.net/ziwoods/article/details/51062206

在之前版本的Chrome浏览器中使用 –args –disable-web-security
(当然我也没去验证 –allow-file-access-from-files在之前的版本是否也可以,反正现在的版本不行)
2016年3月之后的Chrome新版本需要使用 –args –disable-web-security –user-data-dir(注意空格)
终于把问题解决了。

感叹一下:在这个快速更新的时代,要掌握及时的信息啊。

附上ajax请求代码:(不考虑IE的情况下)

var btn = document.getElementById("btn");
btn.addEventListener("click",
  function() {
    var xhr =new XMLHttpRequest()
    xhr.open("GET", "data.txt", true);//注意路径问题读取data.txt文件的内容。
    xhr.send(null);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        if (xhr.status == 200||xhr.status==0) {//请求本地txt文件时状态码是0。
          alert(xhr.responseText);
        } else {
          alert(xhr.status);
        }
      }
    }
  }, false)

另外需要注意的是ajax请求要依赖DOM事件的触发才能请求到文件,如上例中的click事件。

另外还有一种解决所有浏览器都能跨域访问文件的方法:
详见:http://www.lhysky.com/2017/03/14/problem-cross-domain/

你可能感兴趣的:(JavaScript)