js轮询

作者: wanggs | 来源:发表于2017-08-07 22:27 被阅读0次

我是在用于点击支付的时候开启轮询,结束了 就停止

简单例子

<div id="result"></div>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.slim.min.js"></script>

    <script type="text/javascript">
        $(function () {

            window.setInterval(function () {

                $.get("/timeline",
                    {"timed": new Date().getTime()},
                    function (data) {
                        $("#logs").append("[data: " + data + " ]<br/>");
                    });
            }, 3000);

        });
</script>
package com.kaishengit.dao;

import com.kaishengit.entity.Message;
import com.kaishengit.util.DbHelp;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import java.util.List;

public class MessageDao {

    public List<Message> findAll() {
        String sql = "select * from t_message order by id desc";
        return DbHelp.query(sql,new BeanListHandler<>(Message.class));
    }

    public List<Message> findByMaxId(int maxId) {
        String sql = "select * from t_message where id > ? order by id desc";
        return DbHelp.query(sql,new BeanListHandler<>(Message.class),maxId);
    }
}
package com.kaishengit.entity;

public class Message {

    private Integer id;
    private String message;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}
package com.kaishengit.service;

import com.kaishengit.dao.MessageDao;
import com.kaishengit.entity.Message;

import java.util.List;

public class MessageService {

    private MessageDao messageDao = new MessageDao();

    public List<Message> findAll() {
        return messageDao.findAll();
    }

    public List<Message> findByMaxId(int maxId) {
        return messageDao.findByMaxId(maxId);
    }
}
package com.kaishengit.web;

import com.google.gson.Gson;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

public class BaseServlet extends HttpServlet {

    /**
     * 给客户端响应一个JSON数据
     * @param object 要被转成JSON的对象
     * @param response
     * @throws IOException
     */
    public void renderJSON(Object object,HttpServletResponse response) throws IOException {
        String json = new Gson().toJson(object);
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json;charset=UTF-8");

        PrintWriter out = response.getWriter();
        out.print(json);
        out.flush();
        out.close();
    }
}
package com.kaishengit.web;

import com.google.gson.Gson;
import com.kaishengit.entity.Message;
import com.kaishengit.service.MessageService;
import org.apache.commons.lang3.StringUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/timeline")
public class TimeLineServlet extends BaseServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String maxId = req.getParameter("maxId");
        int id = 0;
        if(StringUtils.isNumeric(maxId)) {
            id = Integer.parseInt(maxId);
        }


        MessageService messageService = new MessageService();
        List<Message> messageList = messageService.findByMaxId(id);
        renderJSON(messageList,resp);
    }
}
# jdbc config  C:\Program Files\Java\jdk1.8.0_101\bin\native2ascii.exe
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql:///db_22
jdbc.username=root
jdbc.password=rootroot
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="result"></div>
<script src="/static/js/jquery-1.11.3.min.js"></script>
<script>
    $(function () {
        var maxId = 0;

        function call(){
            $.get("/timeline",{"maxId":maxId}).done(function(data){
                if(data.length) {
                    for(var i = 0;i < data.length;i++) {
                        var item = data[i];
                        var html = "<h3>"+item.message+"</h3>";
                        if(maxId == 0) {
                            $(html).appendTo($("#result"));
                        } else {
                            $(html).prependTo($("#result"));
                        }
                    }
                    maxId = data[0].id;
                }
            }).error(function(){
                alert("服务器错误");
                clearInterval(st);
            });
        }
        call();

        var st = setInterval(call,5000);



    });
</script>
</body>
</html>

相关文章

  • 回调函数

    浏览器的事件轮询 首先js是单线程的,js异步是浏览器事件轮询的结果。事件轮询的字面意思就是事件循环。事件轮询的步...

  • js轮询

    我是在用于点击支付的时候开启轮询,结束了 就停止 简单例子

  • js事件轮询机制

    这段代码的执行顺序,根据执行顺序分析、JS事件轮询原理 执行逻辑 从代码执行角度来看 首先分析同步代码、在面的代码...

  • go+gin+websocket实现轮询

    go+gin+webSocket实现轮询 js[^webSocket实时获取系统时间] go router ser...

  • 16.3 JavaScript的执行机制

    浏览器事件轮询机制 js执行为单线程 网络请求、setTimeout、addEventListener属于异步事件...

  • js事件轮询event Loop

    一步步来 首先我们要知道什么是线程,进程 引用官方说法:进程是操作系统资源分配的基本单位,而线程是任务调度和执行的...

  • JS轮询查找接口

  • js中宏任务、微任务执行顺序

    如上图所示,在js中先执行主线程中的所有任务,再轮询执行所有的微任务,最后轮询执行所有的主任务。定时器属于宏任务p...

  • 负载均衡算法1--轮询

    轮询算法分为简单轮询(Round-Robin)和加权轮询(Weighted-Round-Robin)。 简单轮询(...

  • 理解Node.js的事件轮询

    前言 总括 : 原文地址:理解Node.js的事件轮询 Node小应用:Node-sample 智者阅读群书,亦阅...

网友评论

    本文标题:js轮询

    本文链接:https://www.haomeiwen.com/subject/ojlzlxtx.html