想自己用 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. html表单中的input元素的两种提交方式比较(get/post)

    Http存在两种最常用的提交方式:Get和Post(电话面试有问到两种提交方式的区别) 什么是HTTP? 超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信. HTTP 的工作方式是客 ...

  2. IIS反向代理配置教程(最终完整版本)

    IIS代理配置教程 插件下载:https://download.csdn.net/download/song_yan_/11996489 一.安装反向代理插件 1．rewrite插件安装 (1) 双击 ...

  3. 【代码学习】PYTHON 文件I/O

    一.文件的打开和关闭 open(文件名,访问模式) cloese() 模式 描述 r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. rb 以二进制格式打开一个文件用于只读.文件指针 ...

  4. tkinter的listbox、radiobutton和checkbutton学习（2）

    1.tkinter的listbox 1.1 代码 #第1步,导出模块 import tkinter as tk #定义窗口,及其标题.大小和位置 win = tk.Tk() win.title('Li ...

  5. spring boot中配置文件中变量的引用

    配置文件中 变量的自身引用 ${名称} java文件中引用:非静态变量 之间在变量上面注释@Value("${名称}")  静态变量 在set方法上注释@Value("$ ...

  6. vue-cli项目结构详解

    vue-cli的webpack模板项目配置文件分析 https://blog.csdn.net/hongchh/article/details/55113751/ 由于最近在vue-cli生成的web ...

  7. 【docker问题】Client.Timeout exceeded while awaiting headers

    在进行docker pull 拉取镜像时,出现过下面的错误: net/http: request canceled while waiting for connection (Client.Timeo ...

  8. mysql 官方读写分离方案

    mysql 8.0 集群模式下的自动读写分离方案 问题 多主模式下的组复制,看起来挺好,起始问题和限制很多.而且中断一个复制就无法配置了 多主模式下,innodbcluster 等于是无用的,不需要自 ...

  9. redhat7.6 crontab 服务,周期性任务

    系统默认安装开启 systemctl status crond.service 查看周期性任务(最多每隔1分钟做周期性任务) crontab   -l 系统自身的周期性任务 配置周期性任务 cront ...

  10. Day11 - D - Race to 1 Again LightOJ - 1038

    设dp_i为所求答案,每次选择因数的概率相同,设i有x个因数,dp_i=sum(1/x*x_j)+1,(x_j表示第j个因数),那我们就预处理每个数的因数即可,T=10000,需要预处理出答案 #in ...