js页面请求中的异步问题
js页面请求中的异步问题
怒发!!一个小问题,但是由于没有注意到,导致浪费了很多时间,大家引以为鉴!!
最近在写一个前台页面的时候,调用了jquery中的一个表格插件,表格插件中给出了一个名为dataTable的json变量,(别问我为什么不自己写表格 ,懒。好吧,不要懒,不要懒,不要懒,重要的事情说三遍,如果自己写表格的话,兴许这个问题不会困扰这么久)在js的代码中我调用ajax请求,后台使用struts返回json格式的数据,直接上图:
此处,以为一切大功告成,可是发现页面表格中并没有成功地加载数据,笔者以为是后台action传回来的数据并不是标准的json格式,或者数据结构方面出了问题,便疯狂地在dataTable=data这一步之前对数据进行转换,什么JSON.parse啊,什么JSON.stringify()都试过,均未反应。后来尝试自己做了一个table_body.json的数据文件,放到后台文件中,在页面进行访问,发现如果直接访问本地文件的时候,表格中的数据则能成功加载。到此处更加迷惑了。在console中输出两种方式加载的dataTable,均能正常输出,而且数据一模一样。反正在此处是懵的。
后来求救大神,大神毕竟是大神,看了两眼。丢出了一个js的数据异步概念,异步是啥?没听过。好吧,就以本案例讲解吧!先上一个官方概念:
js异步:js是一个单线程的执行环境,即一次只能执行一个任务。如果有数个任务,那么这些任务会从上至下依次挨个执行。这种执行方式的好处是简单,实现也简单,缺点是这个如果有大量的任务,或者其中一个任务耗时时间很长,其他的任务暂时无法执行,就会造成浏览器无响应(俗称假死,卡死)。
针对这种情况,js出现了同步和异步的概念。”同步模式”就是上一段的模式,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的;”异步模式”则完全不同,每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
好吧!其实我也觉得太抽象,以我自己的代码为例,在前面截图中可以看到,我在页面渲染的过程中,用了两个ajax请求,第一个ajax请求从后台请求表格内容的数据,赋值给一个全局变量dataTable,在第二个ajax请求中,请求的是本地的table_head.json文件,也就是表头文件,在它的success函数里面,调用那个dataTable变量,和columName变量一起,将表格数据渲染到页面里面,这里问题就出现了,如果我将渲染页面的代码放到success函数里面,第二个函数加载的事本地的文件,明显速度较快,它加载完成之后就开始进行页面的渲染,此时远程加载数据的第一个ajax请求并没有完成,dataTable里面还没来得及有数据就渲染完成了,所以导致页面中只有表头,没有表格数据。
这种情况多发生在有ajax请求的页面代码中,此时只需要将渲染页面的代码打包,在所有数据都加载完成之后,再调用统一渲染,其实问题是很好解决的。
至此,问题是解决了,其实是一个很小的问题,但是很容易被忽略。望大家引以为鉴。