一种防止ajax请求重复提交的方法与系统与流程

文档序号:15445929发布日期:2018-09-14 23:21阅读:1691来源:国知局

本发明涉及互联网通信技术领域,特别是一种防止ajax请求重复提交的方法与系统。



背景技术:

在网页请求处理中,当用户点击按钮,提交需求时,则向服务器请求资源,不作处理时,多次点击后会有很多个请求在等待,会出现页面卡顿甚至崩溃的问题。

现阶段,web页面的ajax请求控制重复提交的方法普遍为控制发起请求按钮的点击,即当发出请求后,将请求按钮禁止点击,当收到响应后或者一段时间之后再将按钮的禁用状态去掉,从而恢复正常,用户可以继续点击并发送请求。具体为当触发ajax请求时,改变提交按钮上的文字并将按钮设置为不可点击状态,当ajax请求完成时,改变提交按钮上的文字并将按钮设置为可点击状态。

但是由此带来的问题是不可避免的是当页面卡顿导致js执行延迟,还是会出现连击操作,出现重复提交数据的问题。



技术实现要素:

本发明的目的是提供一种防止ajax请求重复提交的方法与系统,旨在解决当页面卡顿导致js执行延迟时出现的连击操作会导致重复提交请求的问题,有效避免页面频繁出现卡死状况,提升用户体验。

为达到上述技术目的,本发明提供了一种防止ajax请求重复提交的方法,包括以下步骤:

s101、读取待发送ajax请求的url、参数、记录时间以及当前时间,保存至sessionstorage中;

s102、根据存储时间差对存储数据进行定时清理;

s103、比对下一个ajax请求和存放至sessionstorage中的url、参数,根据比对结果决定请求是否发送。

优选地,所述待发送ajax请求的url、参数、记录时间以及当前时间以对象的形式存入sessionstorage中的数组。

优选地,所述存储时间差为当前时间与记录时间的差值。

优选地,所述步骤s102具体为:

设置定时函数,每隔一段时间周期便获取sessionstorage数据;

遍历sessionstorage数据中数组每条数据的记录时间和当前时间,记录存储时间差;

当存储时间差大于设定值时,删除数组中该条请求数据;

将修改后的数组重新存入sessionstorage。

优选地,所述步骤s103具体为:

获取sessionstorage数据作为data1;

在下一个ajax请求创建xmlhttprequest阶段时,读取该请求的url和参数,并将其作为data2;

遍历data1中的每个对象,查看是否存在url和参数为data2的对象数据;

如果存在,为重复提交,抛弃该请求;如果不存在,则继续发送请求。

本发明还提供了一种防止ajax请求重复提交的系统,包括:

url和参数存储模块,用于读取待发送ajax请求的url、参数、记录时间以及当前时间,保存至sessionstorage中;

存储数据自动清理模块,用于根据存储时间差对存储数据进行定时清理;

判断请求是否发送模块,用于比对下一个ajax请求和存放至sessionstorage中的url、参数,根据比对结果决定请求是否发送。

优选地,所述待发送ajax请求的url、参数、记录时间以及当前时间以对象的形式存入sessionstorage中的数组。

优选地,所述存储时间差为当前时间与记录时间的差值。

优选地,所述存储数据自动清理模块具体包括:

请求数据定时获取单元,用于设置定时函数,每隔一段时间周期便获取sessionstorage数据;

存储时间差获取单元,遍历sessionstorage数据中数组每条数据的记录时间和当前时间,记录存储时间差;

请求数据删除单元,用于当存储时间差大于设定值时,删除数组中该条请求数据;

重新存储单元,用于将修改后的数组重新存入sessionstorage。

优选地,所述判断请求是否发送模块具体包括:

第一数据获取单元,用于获取sessionstorage数据作为第一数据;

第二数据获取单元,用于在下一个ajax请求创建xmlhttprequest阶段时,读取该请求的url和参数,并将其作为第二数据;

发送请求判定单元,用于遍历第一数据中的每个对象,查看是否存在url和参数为第二数据的对象数据,如果存在,为重复提交,抛弃该请求;如果不存在,则继续发送请求。

发明内容中提供的效果仅仅是实施例的效果,而不是发明所有的全部效果,上述技术方案中的一个技术方案具有如下优点或有益效果:

与现有技术相比,本发明通过将ajax请求的url和参数保存至sessionstorage,通过比对创建请求的记录时间和当前时间,根据设定的存储时间进行请求数据的自动清理,并根据下次请求的url和参数在sessionstorage中查找是否有相同请求,从而避免请求重复发送,解决了当页面卡顿导致js执行延迟时出现的连击操作会导致重复提交请求的问题,可有效避免页面频繁出现卡死状况,提升用户体验。

本发明完全基于浏览器端本地存储功能的数据,通过js进行数据分析实现,不需要等待服务端返回数据,能够在不影响用户体验的情况下避免请求重复提交。

附图说明

图1为本发明实施例中所提供的一种防止ajax请求重复提交的方法流程图;

图2为本发明实施例中所提供的一种防止ajax请求重复提交的系统框架图。

具体实施方式

为了能清楚说明本方案的技术特点,下面通过具体实施方式,并结合其附图,对本发明进行详细阐述。下文的公开提供了许多不同的实施例或例子用来实现本发明的不同结构。为了简化本发明的公开,下文中对特定例子的部件和设置进行描述。此外,本发明可以在不同例子中重复参考数字和/或字母。这种重复是为了简化和清楚的目的,其本身不指示所讨论各种实施例和/或设置之间的关系。应当注意,在附图中所图示的部件不一定按比例绘制。本发明省略了对公知组件和处理技术及工艺的描述以避免不必要地限制本发明。

下面结合附图对本发明实施例所提供的一种防止ajax请求重复提交的方法与系统进行详细说明。

如图1所示,本发明实施例公开了一种防止ajax请求重复提交的方法,包括以下步骤:

s101、读取待发送ajax请求的url、参数、记录时间以及当前时间,保存至sessionstorage中。

在ajax请求创建xmlhttprequest阶段,读取该请求的url和参数作为字符串a,并将创建xmlhttprequest时的时间作为记录时间,记作字符串b;

获取当前时间,作为字符串c;

将字符串a、b、c作为一个对象存入sessionstorage。sessionstorage用于本地存储一个会话中的数据,只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。将所有的ajax请求以数组的形式存放至sessionstorage中,将所述待发送ajax请求的url、参数、记录时间以及当前时间以对象的形式存入sessionstorage中的数组,方便对请求进行管理。

s102、根据时间差对存储数据进行定时清理。

通过设置定时函数,每隔一段时间周期便获取sessionstorage数据;

由于sessionstorage数据中包含待发送ajax请求的记录时间和当前时间,因此可以根据记录时间和当前时间的差值决定是否对存储数据进行清理。

遍历sessionstorage数据中的记录时间和当前时间,当记录时间与当前时间的时间差大于设定值时,删除数组中的该条数据;时间差设定值的大小可以根据需求进行设定。通过对一定之间之前的数据清除,从而有效保证了sessionstorage中数据的实时性。

将修改后的数组重新存入sessionstorage中。

s103、比对下一个ajax请求和存放至sessionstorage中的url、参数,根据比对结果决定请求是否发送。

获取sessionstorage数据作为data1,在下一个ajax请求创建xmlhttprequest阶段时,读取该请求的url和参数,并将其作为data2;

遍历data1中的每个对象,查看是否存在url和参数为data2的对象数据;

如果存在,则表示之前已经有相同的ajax请求发送,为重复提交,因此抛弃请求;如果不存在,则继续发送请求。

本发明实施例通过将ajax请求的url和参数保存至sessionstorage,通过比对创建请求的记录时间和当前时间,根据设定的存储时间进行请求数据的自动清理,并根据下次请求的url和参数在sessionstorage中查找是否有相同请求,从而避免请求重复发送,解决了当页面卡顿导致js执行延迟时出现的连击操作会导致重复提交请求的问题,可有效避免页面频繁出现卡死状况,提升用户体验。

本发明实施例完全基于浏览器端本地存储功能的数据,通过js进行数据分析实现,不需要等待服务端返回数据,能够在不影响用户体验的情况下避免请求重复提交。

如图2所示,本发明实施例还公开了一种防止ajax请求重复提交的系统,包括:

url和参数存储模块,用于读取待发送ajax请求的url、参数、记录时间以及当前时间,保存至sessionstorage中;所述待发送ajax请求的url、参数、记录时间以及当前时间以对象的形式存入sessionstorage中的数组。

存储数据自动清理模块,用于根据存储时间差对存储数据进行定时清理;所述存储时间差为当前时间与记录时间的差值。

所述存储数据自动清理模块具体包括:

请求数据定时获取单元,用于设置定时函数,每隔一段时间周期便获取sessionstorage数据;

存储时间差获取单元,遍历sessionstorage数据中数组每条数据的记录时间和当前时间,记录存储时间差;

请求数据删除单元,用于当存储时间差大于设定值时,删除数组中该条请求数据;

重新存储单元,用于将修改后的数组重新存入sessionstorage。

判断请求是否发送模块,用于比对下一个ajax请求和存放至sessionstorage中的url、参数,根据比对结果决定请求是否发送。

所述判断请求是否发送模块具体包括:

第一数据获取单元,用于获取sessionstorage数据作为第一数据;

第二数据获取单元,用于在下一个ajax请求创建xmlhttprequest阶段时,读取该请求的url和参数,并将其作为第二数据;

发送请求判定单元,用于遍历第一数据中的每个对象,查看是否存在url和参数为第二数据的对象数据,如果存在,为重复提交,抛弃该请求;如果不存在,则继续发送请求。

以上所述仅为本发明的较佳实施例而已,并不用以限制本发明,凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等,均应包含在本发明的保护范围之内。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1