情景:在一个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)
}
})