JS无法读取本地json、txt、xml文件?可以用jsonp可以。

想自己用 js写一个原生的ajax请求,访问本地文件:json/txt。

JS无法读取本地json、txt、xml文件?可以用jsonp可以。

但是写了一个后,发现不能读取:

JS无法读取本地json、txt、xml文件?可以用jsonp可以。

原来是读取本地文件被识别为跨域,是不能读取的。

js写的原生ajax 请求代码如下。

html代码:

<div id="myDiv">将获取的txt 文件 展示出来</div>
<button type="button" onclick="loadX()">通过 AJAX 改变内容</button>

js 代码:

function loadX (){

/* 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。
如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :*/

var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest(); //IE7,FireFox,Chrome,OPera,Safari
}else{
xmlhttp = new ActiveXobject('Microsoft.xmlHTTP'); // IE6,IE5
}

/* 属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status 200: "OK"
404: 未找到页面
onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:*/

// 根据 readyState 值不同,代表响应状态 的进程
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==0){
alert(0)
}
else if (xmlhttp.readyState==1){
alert(1)
}
else if (xmlhttp.readyState==2){
alert(2)
}
else if (xmlhttp.readyState==3){
alert(3)
}
else if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert(4)
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open('GET','text.txt',true);
xmlhttp.send();

}

读取的是text.txt文件,文件内容:('JS代码混淆加密,当然用JShaman。')

如前面所讲,是无法读取的,会报错。

事实上,不止是txt不能读取,json、xml都不能读。

那该怎么解决呢?如何在网页中读取本地文件?

JS无法读取本地json、txt、xml文件?可以用jsonp可以。

可以用jsonp !

JS无法读取本地json、txt、xml文件?可以用jsonp可以。

1.jsonp简介

json 是一种数据格式jsonp 是一种数据调用的方式。

1)什么是jsonp

为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;

它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;

并且在请求完毕后可以通过调用callback的方式回传结果。

2)与ajax的区别

(1)、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jQuery和ext等框架都把jsonp作为ajax的一种形式进行了封装;

(2)、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。

(3)、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

(4)、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。总而言之,jsonp不是ajax的一个特例,尽管jquery等把jsonp封装进了ajax,也不能改变这一点。

2. 使用jsonp

成功调用本地文件的demo:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>


<script type="text/javascript">

function indexDemo(result){
//回调函数名称(indexDemo),需要与 src 中一致,而且要与文件地址中名一致。jsonp格式 名称({})
//不然无法获取到对应的文件
console.log(result) //打印 indexDemo.json 中的数据
}

</script>

<!--jsonp中 需要注意的是
<script src="jq.json?callback=loa"></script>
src ? 之前为文件地址,? 之后为回调函数callback名称,
回调函数可以简写为 cb , 然后 回调函数 名称要与 文件中的名称一致
可以在 对应的文件名中看下,如,jq.json?callback=loa,jq.json的 名字为 loa-->

<script type="text/javascript" src="index.json?callback=indexDemo"></script>

</body>
</html>

index.json内容

indexDemo({
"jshaman":"http://www.jshaman.com",
"sharewaf":"http://www.sharewaf.com"
})

这样打印出来的内容就是这样的:

JS无法读取本地json、txt、xml文件?可以用jsonp可以。

成功读取了本地文件数据。

3.跨域访问数据举例

上一个是访问的本地jsonp,这次访问以下百度的关键字部分,访问百度搜索数据,比如返回百度搜索“系统提速”的结果。

打开百度首页,同时代开网页debug,切换到Network,在百度搜索框中输入关键字游戏时会发现nerwork下面不断有数据变化,在name那一栏下找到su?wd开头的数据点击打开它的头部信息,把Request URL请求的地址取出,不要wd=XXX和cd=XXX中的XXX分别替换为”系统提速”和”demo”,作为jsonp跨域访问的地址,其中wd为百度搜索关键字,cb为回调函数。

<script type="text/javascript">
function demo (res){
console.log(res); //打印从百度获取的 关键字列表
}
</script>
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=系统提速&cb=demo"></script>
JS无法读取本地json、txt、xml文件?可以用jsonp可以。

打印出来的内容:

JS无法读取本地json、txt、xml文件?可以用jsonp可以。

是不是很强大?是非常强大!jsonp不只可以读取本地txt、xml、json文件,还可以读取网络数据、操作网络数据。

猜你喜欢

转载自www.cnblogs.com/w2sft/p/12502649.html
今日推荐