一.背景

在测试ajax时,写了一个ajax.html,目的是访问example.txt中的文本,写好后,右键该html选择在浏览器中打开,浏览器页面上无内容.调出调试窗口:

IE浏览器:SCRIPT5 拒绝访问

谷歌浏览器:XMLHttpRequest can't load file:/......

二.原因

在使用ajax时,千万要注意同源策略.使用XMLHTTPRequest对象发送的请求只能访问与其所在的HTML处于同一个域中的数据(注意不是指同一个文件夹!!!),不能向其他域发送请求.此外有些浏览器还会限制ajax请求使用的协议.比如在Chrome中,如果你使用file://协议从自己的硬盘里加载example.txt文件,就会看到"Cross origin requests are only supported for HTTP"(跨域请求只支持HTTP)的错误信息.

三.解决方案

发布该项目,按正常访问页面的方式即可.详细如下:

将该工程添加到Tomcat中,启动Tomcat服务器,打开浏览器在地址栏中输入:localhost:8080/JavaScript/html/ajax.html 打回车.(这是最简单的方式,网上还有其他解决方案,不再赘述)

四.代码及附图

项目结构图:

ajax.html

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Insert title here</title>
 </head>
 <body>
     <div id="new"></div>
     <script src="../js/addLoadEvent.js" type="text/javascript"></script>
     <script src="../js/getHTTPObject.js" type="text/javascript"></script>
     <script src="../js/getNewContent.js" type="text/javascript"></script>
 </body>
 </html>

addLoadEvent.js

 /**
  * 共享onload
  * @param func
  */
 function addLoadEvent(func){
     var oldonload = window.onload;
     if (typeof window.onload != 'function') {
         window.onload = func;
     } else {
         window.onload = function(){
             oldonload();
             func();
         }
     }
 }

getHTTPObject.js

 /**
  * 获取XMLHttpRequest对象
  */
 function getHTTPObject(){
     if (typeof XMLHttpRequest == "undefined") {
         XMLHttpRequest = function(){
             try {
                 return new ActiveXObject("Msxml2.XMLHTTP.6.0");
             } catch (e) {
                 // TODO: handle exception
             }
             try {
                 return new ActiveXObject("Msxml2.XMLHTTP.3.0");
             } catch (e) {
                 // TODO: handle exception
             }
             try {
                 return new ActiveXObject("Msxml2.XMLHTTP");
             } catch (e) {
                 // TODO: handle exception
             }
             return false;
         }
     }
     return new XMLHttpRequest();
 }

getNewContent.js

 /**
  * ajax
  */
 function getNewContent(){
     var request = getHTTPObject();
     if(request){
         request.open("GET","example.txt",true);
         request.onreadystatechange = function(){
             if (request.readyState == 4) {
                 var para=document.createElement("p");
                 var txt=document.createTextNode(request.responseText);// 从responseText属性里取得文本数据
                 para.appendChild(txt);// 把文本数据放到一个段落中
                 document.getElementById("new").appendChild(para);// 将该段落添加到DOM里
             }
         };
         request.send(null);
     } else {
         alert('Sorry, your Browser dosen\'t support XMLHttpRequest ');
     }
 }

 addLoadEvent(getNewContent);

exmaple.txt

 This was loaded asynchronously!

正常访问页面:

IE浏览器SCRIPT5拒绝访问,谷歌浏览器XMLHttpRequest can't load file:/......的更多相关文章

  1. 文件上传时jquery.form.js中提示form.submit SCRIPT5: 拒绝访问

    利用其它控件触发file的click事件来选择文件后,使用jquery.form.js中的submit方法提交时IE报错:form.submit SCRIPT5: 拒绝访问,其它浏览器正常, < ...

  2. IE下文件上传， SCRIPT5: 拒绝访问 问题

    最近遇到一个比较奇葩的问题,某些ie浏览器在页面中上传文件时,无法上传.查看控制台报错: SCRIPT5: 拒绝访问. jquery-3.2.1.min.js, 行4 字符5725 .并且我的最新版I ...

  3. respond.js第六行 SCRIPT5: 拒绝访问。跨域问题

    问题描述:respond.js第六行 SCRIPT5: 拒绝访问.昨天为学弟学妹讲bootstrap,说到对ie78的兼容问题,解决办法中有引入html5shiv.js和respond.js两个文件夹 ...

  4. 上传文件时用form.submit提交的时候在低版本的IE中报拒绝访问的错误

    上传文件的时候,在IE7下总是传不了,但FireFox,IE11和Chrome下则可以上传.发现是form.submit();时出错了(“拒绝访问”). html代码为: <label oncl ...

  5. 通过浏览器https能够访问SVN，但eclipse SVN,tortoiseSVN始终连接不上SVN的问题解决方案

    为了便于本地代码维护,特意在本地搭建了一个visualSVN服务器用于本地代码管理,但是最近突然出现问题,eclipse上的SVN资源库始终连接不上,提示 "svn: connection ...

  6. 记一次MySQL数据库拒绝访问的解决过程

    问题背景 用wordpress搭博客,数据库采用MySQL.为了调试方便,创建账户my_account ,允许它从任意主机访问数据库. CREATE USER `my_account`@'%' IDE ...

  7. IE8 环境的 JQuery 中的 $.ajax 拒绝访问---解决方案

    需求是兼容到 IE8. $.ajax 总是请求失败,直接跳转到 error 函数中,报错:拒绝访问. 网上的一些解决方法都试过了还是没有用,比如再请求之前设置 jQuery.support.cors ...

  8. 关于JS拒绝访问错误

    错误如图所示,只要点击红色区域 内的任何一部分都会弹出 “js拒绝访问”,以为是浏览器的原因,卸载安装都不好使,左面的是树.点击树的节点弹出右面相应的页面. Node.NavigateUrl = “h ...

  9. 浏览器跨域访问WebApi

      webapi地址:wapapi.ebcbuy.com web地址:wapweb.ebcbuy.com   在默认情况下这两个域名属于两个不同的域,他们之间的交互存在跨域的问题,但因为他们都同属于一 ...

随机推荐

  1. Servlet监听器统计在线人数

    监听器的作用是监听Web容器的有效事件,它由Servlet容器管理,利用Listener接口监听某个执行程序,并根据该程序的需求做出适应的响应. 例1 应用Servlet监听器统计在线人数. (1)创 ...

  2. mysql命令用法复习笔记

    show DATABASES ; create database nulige character set utf8; use nulige; show tables; #创建表 CREATE TAB ...

  3. C#(64位系统) 解决"未能加载文件或程序集,或它的某一个依赖项..."

    这个问题通常出在引用第三方DLL或者自己以前写的DLL. 在64位系统下则可能会出现这种问题. 今天下载MySQLDriverCS后引用遍出现了这个问题,参考了一些文档,下面给出解决方法: 将项目的生 ...

  4. 修改一行SQL代码 性能提升了100倍

    在PostgreSQL中修改了一行不明显的代码,把(ANY(ARRAY[...]) 改成 ANY(VALUES(...))),结果查询时间从20s变为0.2s.最初我们学习使用 EXPLAN ANAL ...

  5. Web开发者不容错过的10段CSS代码

    Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发.但仍然有一些开发者迷恋着一些CSS2代码. 本文将分享20段非常专业的CSS2/C ...

  6. jQuery EasyUI 教程-Tooltip（提示框）

    <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta c ...

  7. python 抓取alexa数据

    要抓取http://www.alexa.cn/rank/baidu.com网站的排名信息:例如抓取以下信息: 需要微信扫描登录 因为这个网站抓取数据是收费,所以就利用网站提供API服务获取json信息 ...

  8. 上传文件multipart form-data boundary 说明

    含义 ENCTYPE="multipart/form-data" 说明: 通过 http 协议上传文件 rfc1867协议概述,客户端发送内容构造. 概述              ...

  9. 申请红帽企业版Linux开发者订阅

    导读 注册成为开发者计划的成员现在可以得到一套免费的 Red Hat Enterprise Linux 许可证,RHEL 开发套件将为程序员提供一个构建企业应用的稳定发展平台.红帽开发订阅成员还可以免 ...

  10. fcntl的区域锁定

    文件中的某个部分被锁定了,但其他的程序可以访问这个文件的其他部分,称为文件段锁定或文件区域锁定.经常使用文件区域锁定是fcntl函数. #include <sys/types.h> #in ...