想自己用 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文件的更多相关文章

  1. iOS - - JSON 和 XML解析

    JSON 和 XML 一.JSON 1.什么是JSON JSON是一种轻量级的数据格式,一般用于数据交互 服务器返回给客户端的数据,一般都是JSON格式或者XML格式(文件下载除外) 2.JSON的格 ...

  2. php生成json或者xml数据

    , ,'数据返回成功',$arr);echo $xml;?>

  3. iOS开发——网络篇——JSON和XML，NSJSONSerialization ，NSXMLParser（XML解析器），NSXMLParserDelegate，MJExtension （字典转模型），GDataXML（三方框架解析XML）

    一.JSON 1.JSON简介什么是JSONJSON是一种轻量级的数据格式,一般用于数据交互服务器返回给客户端的数据,一般都是JSON格式或者XML格式(文件下载除外) JSON的格式很像OC中的字典 ...

  4. xml学习篇（二） ----JSON 和XML对比

    在比较JSON和XML之前,我们先来上一堂关于数据格式的简要历史(更准确的说,是关于XML的始祖): 早在1970年,IBM开发了一种叫Generalized Markup Language的标记语言 ...

  5. WebApi2官网学习记录---JSON与XML的序列化

    JSON序列化: WebAPI的默认序列库使用的是Json.NET,可以在Globally中配置使用DataContractJsonSerializer 进行序列化 protected void Ap ...

  6. jquery Ajax获取本地json 以及xml文件

    $(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件,并通过回调函数处理获取的数据 $.get(" ...

  7. python数据处理（一）之供机器读取的数据 csv，json，xml

    代码与资料 https://github.com/jackiekazil/data-wrangling 1 csv 1.1导入csv数据 1.2将代码保存到文件中并在命令行中运行 2.json 2 导 ...

  8. JSON和XML的比较

    整理日: 2015/4/5 ◆可读性 JSON和XML的可读性可谓不相上下,一边是简易的语法,一边是规范的标签形式,很难分出胜负. ◆可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是X ...

  9. Learning-Python【20】：Python常用模块（3）—— shelve、pickle、json、xml、configparser

    什么是序列化/反序列化? 序列化就是将内存中的数据结构转换成一种中间格式存储到硬盘或者基于网络传输,反序列化就是硬盘中或者网络中传来的一种数据格式转换成内存中数据结构 为什么要有序列化/反序列化? 1 ...

随机推荐

  1. Java面向对象编程 -6.2

    数组的引用传递 通过数组的基本定义可以发现,在数组使用的过程中依然需要使用new进行内存空间的开辟,同理,那么也一定存在有内存的关系匹配问题. 但是数组本身毕竟属于引用数据类型,那么既然是引用数据类型 ...

  2. php源码加密--screw plus

    screw plus是一个开源的php扩展,作用是对php文件进行加密,网络上提供php加密的服务很多,但大多都只是混淆级别的加密,被人拿到加密文件问只要有足够耐心就能破解,与之不同的是,screw ...

  3. 使用axios对安卓或者ios低版本兼容性处理

    原因:不支持ES6,无法使用promise 解决办法: 1.安装 es6-promise cnpm install es6-promise --save-dev 2.引入 es6-promise im ...

  4. OC与JS交互

    https://www.jianshu.com/p/bb666b71e104 一.简述 目前原生与JS交互的方式有以下几种 JavaScriptCore WKWebView 拦截URL WebView ...

  5. left join 、right join 和inner join之间的区别

    SQL的left join .right join 和inner join之间的区别 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录  right join(右联接) ...

  6. Cisco Cat4500系列High CPU故障步骤摘要

    在实际网络环境中,很多时候都会出现设备high CPU的情况,有些时候可能是bug,而某些情况下,也可能是网络中发生了变化,导致了设备出现high CPU情况,这里主要记录一下Cisco Cat450 ...

  7. 运营商如何关闭2G、3G网络？这事儿得从小灵通说起

    5G时代即将全面开启,主流声音是对未来的无限畅想--5G将带来翻天覆地的变化.不过凡事都有利弊两面性,5G作为新生事物固然大有可为,但不可避免地会对旧事物造成巨大冲击.除了会影响很多跟不上潮流发展的行 ...

  8. Qt实现通用模板单例

    #include <QAtomicPointer> #include <QMutex> #include <memory> using namespace std; ...

  9. 输入流输出流IO的理解

    之前对IO理解总是有点模糊, 输入输出,其实针对 数据处理主体 A ,这个主体我们通常是指服务器程序本身,   交互目的源B ,一般是本地磁盘,由本地磁盘IO传输, 或者 远程客户端,由网络IO传输. ...

  10. 【Javaweb】Servlet的xml和注解配置

    1.xml <%@ page language="java" contentType="text/html;" %> <!DOCTYPE ht ...