访问本地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)}})