html页面不通过后台逻辑直接动态获取js文件

最近有个任务是要在页面上读取服务器上实现预存好的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