Framework basics: Ajax Design (ii)---integrated Polling Technology

The previous article introduced the AJAX Technology core approach, and Cross-domain issues (as long as background support Cross-domain default Post can), This article explains the use of AJAX implementation of polling technology, as for the Iframe,sse server one-way push, And the WebSocket duplex channel is not currently involved .

Some concepts:

Short Polling: The browser through the loop or settimeout method, every time back to the platform to send a request, wireless loop

Long polling: the request data is kept back and forth, but if the data changes are not detected in the background, the request will be hung off. If a data change is detected, it responds to this request change data

Distinguishing concepts:

Long connection: at the time of HTTP data transmission, the data transmission layer is always open a TCP channel, all the request resource files are multiplexed this channel to request data, there is a time-out

Short Connection: If HTTP makes a short connection, that is, each time the browser sends the request, the TCP channel is created, and then the transfer is completed and then destroyed, repeated operation, consumes a lot

Main Differences:

1. The length of the HTTP polling, through the code layer, to the background to request Data.
2. The length of the HTTP connection, is actually the TCP protocol Transport layer is the reuse of a TCP Protocol.

Main business aspects: high-timeliness applications (web-side chat systems), or applications that need to wait for a response in the background (such as payments, waiting for a response to be completed).

Key Code:

1234567891011121314151617181920212223242526272829303132333435363738394041

/*    * 长轮询的实现    *   a. 业务上只需要得到服务器一次响应的轮询    *   b. 业务上需要无限次得到服务器响应的轮询    *    *   param: url   请求接口地址    *          data  请求参数    *          successEvent    成功事件处理    *          isAll           是否一直请求（例如，等待付款完成业务，只需要请求一次）    *          timeout         ajax超时时间    *          timeFrequency   每隔多少时间发送一次请求    *          error           错误事件    *          timeout         超时处理    * */   longPolling:function(url,data,successEvent,isAll,timeout,timeFrequency,errorEvent,timeoutEvent){       varajaxParam ={           time:timeout,           type:"post",           url:url,           data:data,           async:false,           success:function(date){               successEvent(data);               vartimer = 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);   }

Considering the business requirements, the integration of the Isall parameter has 2 meanings

1. The chat system will always need polling, uninterrupted data is used back to the table, so Isall = True
2. Wait for payment business only need to get background one response whether payment succeeds, so Isall = False

A little mention of some of the problems encountered:

Problem:

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

Browser error:

1234567891011121314151617181920212223242526272829

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:202longPolling @ ajax-1.2.js:280success @ ajax-1.2.js:266xhr.onload @ ajax-1.2.js:160(anonymous) @ index.html:42(anonymous) @ index.html:43ajax-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)

English explanation:

The maximum call stack size is Exceeded.

Cause of the Problem:

Description of stack overflow problem caused by too many recursive calls

Explanation of the Problem:

The parameters of the function call are passed through the stack space, which consumes the Thread's stack resources during the Call. and recursive call, only to go to the last end of the function to exit sequentially, and not before the final end point, the occupied stack space has not been released, if the number of recursive calls too many, it may lead to the stack resources used to exceed the maximum value of the thread, resulting in a stack overflow, causing the program to exit Unexpectedly. JS can call itself, where the call longpolling method, in the method constantly call themselves, resulting in GC (garbage Collection) has not been released, more and more large, resulting in resources exceeding the maximum limit, the direct Crash. Then cascade a layer of throwing crash information

Solution:

Use settimeout to solve the problem

Solution Explanation:

Because JavaScript is single-threaded, there is a queued processing queue, so settimeout is equivalent to having a timer that constantly plugs into a processing event to the queue every once in a while. Because of this, the equivalent of the Longpolling method is finished each time, the GC will release the resources of the method, and then execute, and then Release.

Code has been integrated github:https://github.com/GerryIsWarrior/ajax dot star is my biggest encouragement, next study Ajax upload file technology (H5)

PS: for polling this technology, although usually used less, but in some special business scenarios can play a big role. In the browser, there is no complete support for the situation of H5, this is still to be considered. After all, the H5 of those websocket still need H5 Compatible. moreover, The study of this piece, to the original js, and some of the computer's underlying technology is still very helpful, such as stack overflow, not just the front end, will also encounter. In this way, the bottom of their own more solid, for the future development of the upper layer will also have a better growth.

"forward from http://www.cnblogs.com/GerryOfZhong/p/6135288.html"

Framework basics: Ajax Design (ii)---integrated Polling Technology