淘先锋技术网

首页 1 2 3 4 5 6 7

最近有个任务是要在页面上读取服务器上实现预存好的json文本数据,然后通过jqplot在页面上将json数据显示成图表;而且要有查询功能,服务器上的json数据,根据时间顺序分割成一个个的小文件,根据时间即可获取唯一的json文件……

一开始我马上就想到前台通过xmlhttprequest想后台服务器发出异步请求,然后后台根据请求读取对应的json文件,然后解析成文件流,再往页面写……这样子实现起来并不难,但是头说,这样太笨重了,一个小小的获取服务器本地的json数据,根本不需要后台逻辑加传输的,全部放到前台去做!

这就意味着我失去了后台这个强大有力的支持,单单靠js来获取json文件数据,一点头绪都没有,因为js没有什么文件操作的对象和函数(IE下似乎有,但是不通用……),很伤脑筋,后来想到一个解决方案:

我们的json数据是存放在一个个的js文件中的,于是我想到了动态加载script元素,使用document.createElement("script");方法创建script元素,然后加到head元素中去,而且我们的json数据都是规范过的,有对应唯一约定好的变量名,这样只要加载成功就可以动态地通过拼接变量名得到里面存储的json数据了,最后,可以成功读取json数据了,这中间也遇到的很多问题,但是有个比较致命的问题让我放弃了这种方法!

这个问题在IE8中是没有的,而在chrome中就比较郁闷,因为script的加载,并不是append语句一执行,js文件里的脚本就马上可以使用,他还有一个加载的过程,而且是异步的,不等它加载完成,后面的代码就已经开始执行了:

var js=document.createElement("script");
js.type="text/javascript";
js.src="/js.js";
var head=document.getElementByTagName("head")[0];
head.append(js);
//假如jsonData就是加载的js文件中json的变量名
alert(jsonData);
这样的执行下来,alert这一句就会报错了,说是变量名没有定义,但是使用chrome审查元素的功能看的时候,发现我的script元素确实加进去了,而且稍后,我再去alert(jsonData)的时候,就可以显示出object了,这样子问题就很大了,我哪里知道它什么时候加载完成啊,后来也有解决方:

var js=document.createElement("script");
js.type="text/javascript";
js.src="/js.js";
var head=document.getElementByTagName("head")[0];
head.append(js);
//加这一句,写上回调函数:
js.onload=function()
{
  //假如jsonData就是加载的js文件中json的变量名
   alert(jsonData);
}

这样的话,就会alert说你的jsonData是object了,但是这样仍然有问题,因为我要加载的js文件不止一个,而且有些用户要求查询的数据是不存在的,也就是说有的src路径是不存在的,而且,我是需要等到所有的js文件获取好了之后,将里面的所有json数据读取出来并且显示,或者说,每加载一个js文件就读取一次json数据就将这个数据显示出来,一直到结束,但是因为有些限制,数据无法一个一个显示,只能一起显示,所以我必须知道这些js文件什么时候加载完成,或者说告诉我哪一个js文件是最后一个加载结束……显然这里有很大的困难,至少我现在没有想到什么好的办法来解决这个问题,只能放弃这种方案。

最后还是回到了服务器上,但是,除了服务器本身之外并没有任何后台实现,服务器纯粹是作为一个容器而已,方案就是使用xmlhttprequest通过url地址同步获取js文件!哈哈,以为这个可以让他同步获取而不是异步,这样我就好控制了,剩下的问题就是在前端拼接出文件路径和文件名来!

 

 

 

 

转载于:https://my.oschina.net/LinBandit/blog/33726