IE浏览器SCRIPT5拒绝访问,谷歌浏览器XMLHttpRequest can't load file:/......

一.背景

在测试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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 </head>
 7 <body>
 8     <div id="new"></div>
 9     <script src="../js/addLoadEvent.js" type="text/javascript"></script>
10     <script src="../js/getHTTPObject.js" type="text/javascript"></script>
11     <script src="../js/getNewContent.js" type="text/javascript"></script>
12 </body>
13 </html>
View Code

addLoadEvent.js

 1 /**
 2  * 共享onload
 3  * @param func
 4  */
 5 function addLoadEvent(func){
 6     var oldonload = window.onload;
 7     if (typeof window.onload != 'function') {
 8         window.onload = func;
 9     } else {
10         window.onload = function(){
11             oldonload();
12             func();
13         }
14     }
15 }
View Code

getHTTPObject.js

 1 /**
 2  * 获取XMLHttpRequest对象
 3  */
 4 function getHTTPObject(){
 5     if (typeof XMLHttpRequest == "undefined") {
 6         XMLHttpRequest = function(){
 7             try {
 8                 return new ActiveXObject("Msxml2.XMLHTTP.6.0");
 9             } catch (e) {
10                 // TODO: handle exception
11             }
12             try {
13                 return new ActiveXObject("Msxml2.XMLHTTP.3.0");
14             } catch (e) {
15                 // TODO: handle exception
16             }
17             try {
18                 return new ActiveXObject("Msxml2.XMLHTTP");
19             } catch (e) {
20                 // TODO: handle exception
21             }
22             return false;
23         }
24     }
25     return new XMLHttpRequest();
26 }
View Code

getNewContent.js

 1 /**
 2  * ajax
 3  */
 4 function getNewContent(){
 5     var request = getHTTPObject();
 6     if(request){
 7         request.open("GET","example.txt",true);
 8         request.onreadystatechange = function(){
 9             if (request.readyState == 4) {
10                 var para=document.createElement("p");
11                 var txt=document.createTextNode(request.responseText);// 从responseText属性里取得文本数据
12                 para.appendChild(txt);// 把文本数据放到一个段落中
13                 document.getElementById("new").appendChild(para);// 将该段落添加到DOM里
14             }
15         };
16         request.send(null);
17     } else {
18         alert('Sorry, your Browser dosen\'t support XMLHttpRequest ');
19     }
20 }
21 
22 addLoadEvent(getNewContent);
View Code

exmaple.txt

1 This was loaded asynchronously!
View Code

正常访问页面:

 

posted @ 2017-03-28 09:13  习惯沉淀  阅读(506)  评论(0)  编辑  收藏  举报