highcharts与ajax的应用

本文介绍了一种通过分页加载方式处理大数据的方法,有效避免了浏览器因数据量过大而出现卡顿的问题。具体实现上,利用Ajax进行前后端交互,前端采用定时器控制请求频率,后端则负责按需分发数据。


当获取大数据量时,为了缓解浏览器的压力,以免造成页面停留,需要把后台的数据分批提取到页面。方法:

<1>前台js:

<script type="text/javascript">
  var lastdata = [];
  function showdata(beginid){
   
       $.ajax({
    
        type:'POST',//默认是GET
        url:'ajax.do',//设置数据传递的action
        cache:'false',//是否从浏览器缓存中请求信息
   data:'index='+beginid,
      dataType:'json',//预期从action接收的数据类型,还可以是xml(返回XML文档)、html(纯文本html)、script(纯文本Javascript)
       
       success:function(json){//请求成功调用success方法
         var e = [];//每次返回的100条记录
         var index = 0;//当前的记录数
         var total = 0;//总记录数
         
         //获取数据块
         $.each(json,function(i,n){
         
          if(i < 20){
           e.push(n);
          }else if(i==20){
           index = n;
          }else{
           total = n;
          }
         });
         
     lastdata = lastdata.concat(e);//合并两个数组
     //alert(lastdata);
         
        
         
         //根据返回的数据块画实时图
         $("#drugchart").load("highcharts/drugChart.jsp",function(){
     _yizheng = lastdata;
     initChart();
    });
     
     
    //设置延迟时间
    setTimeout(function(){
     if(index < total){
           showdata(index+20);//每次取20个数据
          }else{
           lastdata = [];//取完所有数据后,重置数据集
           alert('game over');
          }
    },2000);
        }
       });
      }
 
 </script>


<2>后台action:

 public ActionForward execute(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response)
   throws IOException, InterruptedException {

  response.setContentType("text/html;charset=utf-8");

  String index = request.getParameter("index");// 当前记录id
  int currentid = 0;// 当前返回的记录数下标
  int total = 0;// 总记录数

  if (!"".equals(index) && index != null) {
   currentid = Integer.parseInt(index);
  }
  PrintWriter pw = response.getWriter();

  List all = new ArrayList();

  for (int i = 0; i < 100; i++) {
   double num = Math.random() * 100;
   all.add((int) num);
  }

  List each = new ArrayList();
  for (int i = currentid-20; i < currentid; i++) {// 根据ajax传递的id将数据分块传递,每次取20个数据
   if(currentid<=all.size()){
    each.add(all.get(i));
   }
  }
  
  JSONArray json = JSONArray.fromObject(each);// 转化成json对象
  json.put(each.size(), currentid);// currentindex ->json
  json.put(each.size() + 1, all.size());// total ->json
  pw.println(json);
  
  System.out.println("each json is "+json);
  // pw.println(currentid);
  return null;

  // return new ActionForward("/ajax.jsp");
 }

评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值