js读取本地json/txt/xml存在跨越问题，能够用jsonp 读取本地json文件

时间 2019-11-13

标签读取本地 json txt xml 存在跨越问题能够 jsonp 文件栏目 JavaScript 繁體版

原文原文链接

想本身用 js写一个原生的ajax请求，访问本地文件，json/txt。可是demo，写了一个后，发现javascript

原来是跨域了。

js 写的原生ajax 请求代码以下

html代码html

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

js 代码java

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 的文档

jquery

1．jsonp简介ajax

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

1）什么是jsonp

为了便于客户端使用数据，逐渐造成了一种非正式传输协议，人们把它称做JSONP，该协议的一个要点就是容许用户传递一个callback参数给服务端，而后服务端返回数据时会将这个callback参数做为函数名来包裹住JSON数据，这样客户端就能够随意定制本身的函数来自动处理返回数据了。

JSONP的优势是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中均可以运行，不须要XMLHttpRequest或ActiveX的支持；而且在请求完毕后能够经过调用callback的方式回传结果。

2）与ajax的区别

一、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也同样，都是请求一个url，而后把服务器返回的数据进行处理，所以jQuery和ext等框架都把jsonp做为ajax的一种形式进行了封装；

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

三、因此说，其实ajax与jsonp的区别不在因而否跨域，ajax经过服务端代理同样能够实现跨域，jsonp自己也不排斥同域的数据的获取。

四、还有就是，jsonp是一种方式或者说非强制性协议，如同ajax同样，它也不必定非要用json格式来传递数据，若是你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。

总而言之，jsonp不是ajax的一个特例，尽管jquery等把jsonp封装进了ajax，也不能改变这一点。

2. 本身使用jsonp 成功调用本地文件的demojson

<!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