js导入json文件（js写入本地json文件）

js导入json文件，原文标题：JS无法读取本地json、txt、xml文件？可以用jsonp可以。。

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

但是写了一个后，发现不能读取：

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

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

html代码：

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

js 代码：

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

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

事实上，不止是txt不能读取，json、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>  <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" })

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

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

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>

打印出来的内容：

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

本文《js导入json文件（js写入本地json文件）》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。

随机文章

SEO教程
站长导航
友情链接交换
关键词排名优化
网站内容优化
GEO培训
SEO教程
友情链接交换

百度搜索“网赚联盟”即可找到本站，微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟（ wangzhuan.org.cn ）欢迎用户投稿，发布者：修丹道的程序猿，文章版权归作者所有，投稿文章不代表网赚联盟立场，中二少年发布为网赚联盟原创文章，转载请注明出处：https://wangzhuan.org.cn/346217.html

js导入json文件（js写入本地json文件）

随机文章

发表评论