前端通信:ajax设计方案(二)---集成轮询技术

简介: 上一篇文章介绍了ajax技术核心方法,和跨域的问题(只要后台支持跨域默认post就可以),这篇文章讲解一下使用ajax实现的轮询技术,至于iframe,SSE服务器单向推送,以及webSocket双工通道暂时不涉及。

上一篇文章介绍了ajax技术核心方法,和跨域的问题(只要后台支持跨域默认post就可以),这篇文章讲解一下使用ajax实现的轮询技术,至于iframe,SSE服务器单向推送,以及webSocket双工通道暂时不涉及

一些概念:

  短轮询:浏览器通过循环或者setTimeout方法,每隔一段时间往后台发送一次请求,无线循环

  长轮询:不停的向后台请求数据,但是后台如果检测不到数据变动,就会将这个请求挂掉。如果检测到数据变动,就会响应这个请求变动数据

区别概念:

  长连接:在进行http数据传输的时候,在数据传输层一直开着一个TCP通道,所有请求资源文件都是通过复用这个通道去请求数据,有超时时间

  短连接:如果http进行的短连接,即每次浏览器发送请求,都会创建TCP通道,然后传输完成了再进行销毁,重复操作,消耗很大

 

主要区别:

  1. http的长短轮询,通过代码层,向后台请求数据。
  2. Http的长短连接,实际上就是TCP协议传输层是否复用一个TCP协议。

 

主要业务方面:及时性比较高的应用(web端聊天系统),或者需要后台等待响应的应用(比如付款,等待完成响应)。

关键代码:

     /*
         * 长轮询的实现
         *   a. 业务上只需要得到服务器一次响应的轮询
         *   b. 业务上需要无限次得到服务器响应的轮询
         *
         *   param: url   请求接口地址
         *          data  请求参数
         *          successEvent    成功事件处理
         *          isAll           是否一直请求(例如,等待付款完成业务,只需要请求一次)
         *          timeout         ajax超时时间
         *          timeFrequency   每隔多少时间发送一次请求
         *          error           错误事件
         *          timeout         超时处理
         * */
        longPolling:function(url,data,successEvent,isAll,timeout,timeFrequency,errorEvent,timeoutEvent){
            var ajaxParam ={
                time:timeout,
                type:"post",
                url:url,
                data:data,
                async:false,
                success:function(date){
                    successEvent(data);
                    var timer = setTimeout(
                        function(){
                            tempObj.longPolling(url,data,successEvent,isAll,error,timeoutEvent);
                        },timeFrequency);
                    //业务需求判断,是否只需要得到一次结果
                    if (!isAll) clearTimeout(timer);
                },
                //如果走了error说明该接口有问题,没必要继续下去了
                error:errorEvent,
                timeout:function(){
                    timeoutEvent();
                    setTimeout(function(){
                        tempObj.longPolling(url,data,successEvent,isAll,error,timeoutEvent)
                    },timeFrequency);
                }
            };
            ajax.common(ajaxParam);
        }

 

考虑到业务需求,集成了一次isAll参数有2个意义

  1. 聊天系统会要一直需求轮询,不间断的向后台使用数据,所以isAll = true
  2. 等待付款业务只需要得到后台一次响应是否支付成功,所以isAll = false

 

稍微提及一下遇到的一些问题:

问题

success:function(date){
     successEvent(data);
   //此处使用递归,不停递归自己 tempObj.longPolling(url,data,successEvent,isAll,error,timeoutEvent); },

浏览器报错:

Uncaught RangeError: Maximum call stack size exceeded.
    at Object.common (ajax-1.2.js:202)
    at Object.longPolling (ajax-1.2.js:280)
    at Object.success (ajax-1.2.js:266)
    at XMLHttpRequest.xhr.onload (ajax-1.2.js:160)
    at Object.common (ajax-1.2.js:202)
    at Object.longPolling (ajax-1.2.js:280)
    at Object.success (ajax-1.2.js:266)
    at XMLHttpRequest.xhr.onload (ajax-1.2.js:160)
    at Object.common (ajax-1.2.js:202)
    at Object.longPolling (ajax-1.2.js:280)
common @ ajax-1.2.js:202
longPolling @ ajax-1.2.js:280
success @ ajax-1.2.js:266
xhr.onload @ ajax-1.2.js:160
(anonymous) @ index.html:42
(anonymous) @ index.html:43

ajax-1.2.js:202 Uncaught RangeError: Maximum call stack size exceeded.
    at Object.common (ajax-1.2.js:202)
    at Object.longPolling (ajax-1.2.js:280)
    at Object.success (ajax-1.2.js:266)
    at XMLHttpRequest.xhr.onload (ajax-1.2.js:160)
    at Object.common (ajax-1.2.js:202)
    at Object.longPolling (ajax-1.2.js:280)
    at Object.success (ajax-1.2.js:266)
    at XMLHttpRequest.xhr.onload (ajax-1.2.js:160)
    at Object.common (ajax-1.2.js:202)
    at Object.longPolling (ajax-1.2.js:280)

 

英文解释:

超出最大调用堆栈大小。

问题原因:

递归调用过多导致的栈溢出问题说明

问题解释:

函数调用的参数是通过栈空间来传递的,在调用过程中会占用线程的栈资源。而递归调用,只有走到最后的结束点后函数才能依次退出,而未到达最后的结束点之前,占用的栈空间一直没有释放,如果递归调用次数过多,就可能导致占用的栈资源超过线程的最大值,从而导致栈溢出,导致程序的异常退出。js可以调用自身,这里不停的调用longPolling方法,在方法里面不停的调用自己,导致GC(垃圾回收)一直不释放,越来越大,导致资源超过最大上限,直接崩溃。然后级联一层一层的抛出崩溃信息

解决方案:

使用settimeout解决该问题

方案解释:

因为Javascript是单线程的,有个排队的处理队列,所以settimeout相当于有一个计时器,不停的向这个队列每隔一段时间塞进一个处理事件。因为这样,相当于longPolling方法每次都走完了,GC就将该方法的资源释放了,然后再执行,再释放。

 

代码已集成github:https://github.com/GerryIsWarrior/ajax     点颗星星是我最大的鼓励,下一步研究ajax的上传文件技术(H5的)

 

PS:对于轮询这个技术,虽然平时用的少,但是在一些特殊的业务场景能发挥很大的作用。在浏览器,没有完完全全支持H5的境况下,这个还是要考虑的。毕竟H5的那些webSocket还是需要H5兼容的。而且,研究这一块,对原声js,和计算机的一些底层技术还是很有帮助的,像堆栈溢出,不仅仅是前端,后端也会遇到。这样的话,自己底层更夯实,对于以后上层的发展也会有更好的增长。

 

目录
相关文章
|
21天前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
28天前
|
前端开发 JavaScript API
惊呆了!这些前端技术竟然能让你的网站实现无缝滚动效果!
【10月更文挑战第30天】本文介绍了几种实现网页无缝滚动的技术,包括CSS3的`scroll-snap`属性、JavaScript的Intersection Observer API以及现代前端框架如React和Vue的动画库。通过示例代码展示了如何使用这些技术,帮助开发者轻松实现流畅的滚动效果,提升用户体验。
111 29
|
14天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
27 5
|
21天前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
27 3
|
21天前
|
数据采集 前端开发 安全
前端测试技术
前端测试是确保前端应用程序质量和性能的重要环节,涵盖了多种技术和方法
|
1月前
|
前端开发 数据可视化 搜索推荐
深入剖析极态云优雅的前端框架设计方案(上)
最近在体验极态云,这款低代码软件开发产品,发现其前端框架设计方案很优雅很强大! 在接下来的学习过程中,我将持续输出自己对极态云前端框架设计方案的深入理解,包括具体的使用技巧、优势分析以及可能的应用场景等方面的内容,希望能为大家提供有价值的参考。
|
26天前
|
编解码 前端开发 JavaScript
前端界的黑科技:掌握这些技术,让你的网站秒变未来感十足!
【10月更文挑战第31天】前端技术日新月异,黑科技层出不穷,让网页更加美观、交互更加丰富。本文通过响应式布局与媒体查询、前端框架与组件化开发等案例,展示这些技术如何让网站充满未来感。响应式布局使网站适应不同设备,前端框架如React、Vue则提高开发效率和代码质量。
35 3
|
28天前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
62 4
|
28天前
|
前端开发 JavaScript 测试技术
前端小白逆袭之路:如何快速掌握前端测试技术,确保代码质量无忧!
【10月更文挑战第30天】前端开发技术迭代迅速,新手如何快速掌握前端测试以确保代码质量?本文将介绍前端测试的基础知识,包括单元测试、集成测试和端到端测试,以及常用的测试工具如Jest、Mocha、Cypress等。通过实践和学习,你也能成为前端测试高手。
41 4
|
26天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
25 2