js读取本地json/txt/xml存在跨越问题，可以用jsonp 读取本地json文件
想自己用 js写一个原生的ajax请求，访问本地文件，json/txt。但是demo，写了一个后，发现
原来是跨域了。
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();
}
txt 文本内的内容
text('这是一段文字，')
网上查找了方法，可以用jsonp 。于是又去找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
<!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({
"a":"lllll",
"b":"2222"
})
这样打印出来的内容就是这样的
成功调用本地json 数据。
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>
打印出来的内容
结束！
原文 ：https://blog.csdn.net/jiaoshuaiai/article/details/71747918
js读取本地json/txt/xml存在跨越问题，可以用jsonp 读取本地json文件的更多相关文章
- iOS - - JSON 和 XML解析
JSON 和 XML 一.JSON 1.什么是JSON JSON是一种轻量级的数据格式,一般用于数据交互 服务器返回给客户端的数据,一般都是JSON格式或者XML格式(文件下载除外) 2.JSON的格 ...
- php生成json或者xml数据
, ,'数据返回成功',$arr);echo $xml;?>
- iOS开发——网络篇——JSON和XML，NSJSONSerialization ，NSXMLParser（XML解析器），NSXMLParserDelegate，MJExtension （字典转模型），GDataXML（三方框架解析XML）
一.JSON 1.JSON简介什么是JSONJSON是一种轻量级的数据格式,一般用于数据交互服务器返回给客户端的数据,一般都是JSON格式或者XML格式(文件下载除外) JSON的格式很像OC中的字典 ...
- xml学习篇（二） ----JSON 和XML对比
在比较JSON和XML之前,我们先来上一堂关于数据格式的简要历史(更准确的说,是关于XML的始祖): 早在1970年,IBM开发了一种叫Generalized Markup Language的标记语言 ...
- WebApi2官网学习记录---JSON与XML的序列化
JSON序列化: WebAPI的默认序列库使用的是Json.NET,可以在Globally中配置使用DataContractJsonSerializer 进行序列化 protected void Ap ...
- jquery Ajax获取本地json 以及xml文件
$(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件,并通过回调函数处理获取的数据 $.get(" ...
- python数据处理（一）之供机器读取的数据 csv，json，xml
代码与资料 https://github.com/jackiekazil/data-wrangling 1 csv 1.1导入csv数据 1.2将代码保存到文件中并在命令行中运行 2.json 2 导 ...
- JSON和XML的比较
整理日: 2015/4/5 ◆可读性 JSON和XML的可读性可谓不相上下,一边是简易的语法,一边是规范的标签形式,很难分出胜负. ◆可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是X ...
- Learning-Python【20】：Python常用模块（3）—— shelve、pickle、json、xml、configparser
什么是序列化/反序列化? 序列化就是将内存中的数据结构转换成一种中间格式存储到硬盘或者基于网络传输,反序列化就是硬盘中或者网络中传来的一种数据格式转换成内存中数据结构 为什么要有序列化/反序列化? 1 ...
随机推荐
- ES6-三点运算符
首先理解一下函数总的arguments变量,这个变量是函数内部自动生成的,他用来保存传入函数的实参,是一个伪数组. 例: function fun(a,b){ console.log(argument ...
- java文件上传判断文件夹是否存在
判断文件夹是否存在,不存在创建文件夹 File file =new File("E:/workspace/net/src/main/webapp/upload"); //如果文件夹 ...
- HDU 1069 Monkey and Banana（线性DP）
Description A group of researchers are designing an experiment to test the IQ of a monkey. They wi ...
- 从0到1了解 CI/CD
现代软件开发的需求加上部署到不同基础设施的复杂性使得创建应用程序成为一个繁琐的过程.当应用程序出现规模性增长,开发团队人员变得更分散时,快速且不断地生产和发布软件的流程将会变得更加困难.为了解决这些问 ...
- 吴裕雄 python 神经网络——TensorFlow训练神经网络：不使用激活函数
import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data INPUT_NODE = 784 ...
- 单播反向路径转发uRPF
uRPF将数据包的源地址和存储在转发信息库(FIB)中的信息进行对照,以判定数据包的合法性.FIB是Cisco CEF技术中的一张表,包含从路由表中复制过来的转发信息,可以将其视为路由表的镜像,FIB ...
- git 使用点
git checkout HEAD 只是缓存恢复到head 头版本,文件还没恢复,最后要执行 git checkout . (点) 才能恢复文件内容 git checkout 只是 ...
- IO课堂测试
一,用户需求 英语的26 个字母的频率在一本小说中是如何分布的?某类型文章中常出现的单词是什么?某作家最常用的词汇是什么?<哈利波特与魔法石> 中最常用的短语是什么,等等. (1)要求1: ...
- Jedis实现频道的订阅，取消订阅
第一步:创建一个发布者 package work; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; i ...
- office 格式定义
在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串转换成 科学计数法.现在网上找到解决方案之一: (在数字串 ...