同步和异步的区别?

  • 同步就是等这个方法请求完成后,再执行下一个请求方法
  • 异步就是在你请求这个方法的时候,可以在当前的页面写一个ajax请求后台查询对应数据,然后在后台返回数据,这就在请求页面同时也在请求数据返回其数据,这就是异步请求

前台onclick事件绑定两个方法,分别到后台请求两个方法,然后后台两个方法分别指向model数据给同一个前端页面,这是同步请求,会打开两个页面导致数据不一致

同步请求:

  • 这是前台onclick绑定的两个方法
  <input class="btn btn-primary" type="button" onclick="putOnRrecordAffix(),putOnRrecord()" value="备案函打印"/>
  • 这是onclik对应绑定的方法
 //备案函通知书打印(windows.print)
        function putOnRrecord(){
            var arr = new Array();
            if ($(".unclaimedId:checked").length === 0) {
                $.jBox.alert('请至少选择一条数据打印');
                return false;
            } else {
                //获取需要打印的数据
                $(".unclaimedId:checked").each(function () {
                    if ($(this).attr("checked") === "checked") {
                        arr.push($(this).val());
                    }
                });
            }
            url = "${ctx}/bz/unclaimed/putOnRrecord?projectArr=" + arr;
            window.open(url);
        }

   //备案函附件列表打印(windows.print)
        function putOnRrecordAffix(){
            var arr = new Array();
            if ($(".unclaimedId:checked").length === 0) {
                $.jBox.alert('请至少选择一条数据打印');
                return false;
            } else {
                //获取需要打印的数据
                $(".unclaimedId:checked").each(function () {
                    if ($(this).attr("checked") === "checked") {
                        arr.push($(this).val());
                    }
                });
            }
            url = "${ctx}/bz/unclaimed/putOnRrecordAffix?ids=" + arr;
            window.open(url);
        }
  • 这是后台对应两个方法,返回同样数据给前端的页面,只能等请求一个页面完成后再打开一个页面,所以会打开两个页面,这就是同步请求
  /**
     * 打印公告函附件
     *
     * @param bzUnclaimed
     * @param request
     * @param model
     * @return
     */
    @RequestMapping(value = "putOnRrecordAffix")
    public String putOnRrecordAffix(BzUnclaimed bzUnclaimed, String[] ids, HttpServletRequest request, Model model) {
        if (ids != null) bzUnclaimed.setProjectArr(ids);
        List<BzUnclaimed> list = bzUnclaimedService.appendixForm(bzUnclaimed);
        model.addAttribute("list", list);
        if (list.size() > 0) {
            model.addAttribute("announcementDate", list.get(0).getAnnouncementDate());
            model.addAttribute("announcementEndDate", list.get(0).getAnnouncementEndDate());
            BzUnclaimed bzUnclaimeddata = new BzUnclaimed();
                BzUnclaimed bzUnclaimed1 = list.get(0);
                String serialNumber = bzUnclaimed1.getSerialNumber();
                Date announcementDate = bzUnclaimed1.getAnnouncementDate();
                Date announcementEndDate = bzUnclaimed1.getAnnouncementEndDate();
                int count = list.size();
                bzUnclaimeddata.setAnnouncementDate(announcementDate);
                bzUnclaimeddata.setAnnouncementEndDate(announcementEndDate);
                bzUnclaimeddata.setCounts(count);
                bzUnclaimeddata.setSerialNumber(serialNumber);
                model.addAttribute("counts", bzUnclaimeddata.getCounts());
                model.addAttribute("serialNumber", bzUnclaimeddata.getSerialNumber());
                SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy 年 MM 月 dd 日");
                String announcementTime = dateFormat.format(bzUnclaimeddata.getAnnouncementDate());
                String announcementEndTime = dateFormat.format(bzUnclaimeddata.getAnnouncementEndDate());
                String nowTime = dateFormat.format(new Date());
                model.addAttribute("announcementTime", announcementTime);
                model.addAttribute("announcementEndTime", announcementEndTime);
                model.addAttribute("nowTime", nowTime);

        }
        return "modules/bz/unclaimedRemains/printPutOnRrecord";
    }



  /**
     * 打印公告函附件
     *
     * @param bzUnclaimed
     * @param request
     * @param model
     * @return
     */
    @RequestMapping(value = "putOnRrecordAffix")
    public String putOnRrecordAffix(BzUnclaimed bzUnclaimed, String[] ids, HttpServletRequest request, Model model) {
        if (ids != null) bzUnclaimed.setProjectArr(ids);
        List<BzUnclaimed> list = bzUnclaimedService.appendixForm(bzUnclaimed);
        model.addAttribute("list", list);
        if (list.size() > 0) {
            model.addAttribute("announcementDate", list.get(0).getAnnouncementDate());
            model.addAttribute("announcementEndDate", list.get(0).getAnnouncementEndDate());
            BzUnclaimed bzUnclaimeddata = new BzUnclaimed();
                BzUnclaimed bzUnclaimed1 = list.get(0);
                String serialNumber = bzUnclaimed1.getSerialNumber();
                Date announcementDate = bzUnclaimed1.getAnnouncementDate();
                Date announcementEndDate = bzUnclaimed1.getAnnouncementEndDate();
                int count = list.size();
                bzUnclaimeddata.setAnnouncementDate(announcementDate);
                bzUnclaimeddata.setAnnouncementEndDate(announcementEndDate);
                bzUnclaimeddata.setCounts(count);
                bzUnclaimeddata.setSerialNumber(serialNumber);
                model.addAttribute("counts", bzUnclaimeddata.getCounts());
                model.addAttribute("serialNumber", bzUnclaimeddata.getSerialNumber());
                SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy 年 MM 月 dd 日");
                String announcementTime = dateFormat.format(bzUnclaimeddata.getAnnouncementDate());
                String announcementEndTime = dateFormat.format(bzUnclaimeddata.getAnnouncementEndDate());
                String nowTime = dateFormat.format(new Date());
                model.addAttribute("announcementTime", announcementTime);
                model.addAttribute("announcementEndTime", announcementEndTime);
                model.addAttribute("nowTime", nowTime);

        }
        return "modules/bz/unclaimedRemains/printPutOnRrecord";
    }

异步请求:


function putOnRrecords(arr) { //在页面请求的ajax异步方法
    $.ajax({
        type: "get",
        url: "${ctx}/bz/unclaimed/putOnRrecords?projectArr=" + arr,
        dataType: 'JSON',
        async: true,
        success(data) {
            objDece = data;
        }
    })
}
/**
 * 打印备案函数据(lodop.print)
 *
 * @param bzUnclaimed
 * @param request
 * @param response
 * @param model
 * @return
 */
@RequestMapping(value = "putOnRrecords")//后台ajax请求异步方法
public String putOnRrecords(BzUnclaimed bzUnclaimed, HttpServletRequest request, HttpServletResponse response, Model model) {
    List<BzUnclaimed> bzUnclaimedList = bzUnclaimedService.appendixForm(bzUnclaimed);
    BzUnclaimed bzUnclaimeddata = new BzUnclaimed();
    if (bzUnclaimedList.size() > 0) {
        BzUnclaimed bzUnclaimed1 = bzUnclaimedList.get(0);
        String serialNumber = bzUnclaimed1.getSerialNumber();
        Date announcementDate = bzUnclaimed1.getAnnouncementDate();
        Date announcementEndDate = bzUnclaimed1.getAnnouncementEndDate();
        int count = bzUnclaimedList.size();
        bzUnclaimeddata.setAnnouncementDate(announcementDate);
        bzUnclaimeddata.setAnnouncementEndDate(announcementEndDate);
        bzUnclaimeddata.setCounts(count);
        bzUnclaimeddata.setSerialNumber(serialNumber);
    }
    //获取当前日期
    bzUnclaimeddata.setDateTime(new Date());
    return renderString(response, bzUnclaimeddata);
}

总结:所谓的同步就是指阻塞式操作,而异步就是非阻塞式操作

在这里插入图片描述

ajax异步和同步

ajax异步(默认async:true)
异步:并行处理,程序向服务器发送一个请求,在结果返回之前,程序还是可以执行其它操作(以前台界面为例,用户依然可以输入其它信息,并且和服务器进行其它交付),大大节省了用户的时间,也提高用户的体验

二、ajax同步(设置async:false)
同步:顺序处理,程序向服务器发送一个请求,在结果返回之前,程序要一直等待结果返回才可以执行下一步操作

同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。
(注:除非有特殊要求或需求,尽量不要用同步)

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐