访问本地json文件的方法
来源:互联网 发布:c语言是解释型语言吗 编辑:程序博客网 时间:2024/06/06 03:37
情景:在一个js文件中访问该工程中的另一个本地json文件
这个问题本身很好解决,这里提供两个方法,先介绍一些可能会让初学者迷惑的知识点:
1.URL编码:利用一个百分号和16进制数字来对字符进行编码,JS提供了encodeURIComponent()和decodeURIComponent()方法来进行URL编码和解码
2.浏览器端的JavaScript发送HTTP请求所用的接口叫做XMLHttpRequest,当然这个接口跟XML并没有关系,之所以带XML前缀只是历史原因,实际上,JS中很多名称都因为历史原因而产生歧义。
3.URL分为绝对路径和相对路径,绝对路径顾名思义,没什么可解释,相对路径在书写时,需要注意:如果以斜杠"/"开头,则这个相对路径会替换当前路径中服务器后面的路径,如果不以斜杠开头,浏览器会会将相对路径添加到当前路径后,并在中间用斜杠分隔。
4.发送请求的时候,需要三步:
①创建一个XMLHttpRequest对象:var req = new XMLHttpRequest ();
②利用open方法设置请求头的一些信息,包括三个参数,第一个是请求方式(GET或者POST等),第二个为路径,第三个为true或者false(异步为true,同步为false)
③利用send方法发送请求体,如果是GET方法,则可以为null
5.同步和异步的区别
(1)在这种原生方法里,如果是同步,即open方法的第三个参数为false时,可以立即使用响应的结果,如使用获取的数据,但当网络连接状态不佳时,服务器很慢时,会耗费大量时间,并且这期间无法触发事件处理器,无法实现与用户的交互。为了避免这种情况,需要采用异步的方式
(2)如果是异步,为了检测什么时候请求执行完成,要添加load的监听事件,并判断一些响应状态
最终解决代码:说了这么多,其实也可以直接ajax请求
function success(string){console.log(string)}function readFile(callback){var req = new XMLHttpRequest();req.open("GET","../test.json",true);req.addEventListener("load",function(){if( req.status<400 )callback("yes");})req.send(null);var js = JSON.parse( req.responseText );console.log(js.time);$("#div").text(js.time)}readFile(success)
//直接使用ajax访问$.ajax({type:'get',url:'../test.json',dataType:'json',success:function(data){console.log(data.time)$("#div").text(data.time)}})
- 访问本地json文件的方法
- easyui 加载本地json 文件的方法
- Android访问assets本地Json文件
- Android中访问assets本地json文件
- Android访问assets本地Json文件
- 静态h5页面没有后台直接访问本地json文件
- android 读取本地的json文件
- 本地 json 文件的简单处理
- java 读取本地的json文件
- Vue项目调用本地的json文件
- 访问本地服务里面的方法
- zookeeper 只能本地访问的问题解决方法
- 解决Codeforces访问慢的本地方法
- Json解析本地json文件
- 简单搭建nodeJS服务,访问本地站点文件,nodejs改变代码不需要重启的方法
- 给大家分享web开发新手修改hosts文件实现本地域名访问的正确方法
- 用手机访问电脑本地Apache下的静态文件方法(坑)
- 本地访问json格式文件出现XMLHttpRequest cannot load的解决方法
- nginx配置文件
- ContentProvider的理解与使用
- bzoj 4805: 欧拉函数求和
- CodeForces
- 拓展欧几里得算法
- 访问本地json文件的方法
- 关于电脑安装多个版本JDK后使用时的切换
- 【矩阵的乘法和加法模板】
- HDU 6118 度度熊的交易计划 最小费用可行流
- 【第7章】像高手一样玩转数据
- bootstrap-select下拉搜索插件 动态加载自己数据的二级联动
- iOS App启动流程
- 122. Best Time to Buy and Sell Stock II
- 113. Path Sum II