`
airlulu
  • 浏览: 3322 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

关于用XHR实现浏览器端pause()功能

阅读更多
关于pause功能已经有很多讨论。
看了很多资料,基本得到的结论是除了sjax,无法完整实现pause功能。
但是如果直接用应用服务器来处理这个同步XHR请求,随着pause时间越长,后台的http线程池会被消耗光。
我想了个方案(前提是servlet 3.0出来前),通过内嵌jetty,在特定的端口专门提供这种pause服务,这样就不会占用应用服务器的http线程了。
不知道可行不?大家提提建议
分享到:
评论
8 楼 airlulu 2009-02-04  
hax 写道
JSF自己有校验机制,为什么不用呢?

如果要自己的校验,则可以直接使用同步校验啊。或者直接在返回页面中产生校验失败的信息(就如同传统的表单页面)——毕竟即使使用ajax,服务器总是要校验数据的。

月影的文章地址是:http://bbs.51js.com/viewthread.php?tid=66361
但是注意,此文只适用于有志于探索JS的同志,不建议在实际应用中采用。


ajax可以增强用户体验。
又不想修改richfaces。

月影用的是闭包原理,并不能阻止form submit事件往外传递,恢复时也不能使form继续提交,不能满足我的要求
7 楼 hax 2009-02-04  
JSF自己有校验机制,为什么不用呢?

如果要自己的校验,则可以直接使用同步校验啊。或者直接在返回页面中产生校验失败的信息(就如同传统的表单页面)——毕竟即使使用ajax,服务器总是要校验数据的。

月影的文章地址是:http://bbs.51js.com/viewthread.php?tid=66361
但是注意,此文只适用于有志于探索JS的同志,不建议在实际应用中采用。
6 楼 airlulu 2009-02-04  
hax 写道
pause没有好的方法。
用隐藏的模态对话框是一个方式,但是IE-only,而且现在模态对话框已经无法隐藏了。

用同步xhr只是能实现效果,但是如jindw所说,显然也不是好方法。


一般而言,如果有了yield,编程上就不需要pause了。如果你有什么场景觉得需要pause,可以拿出来大家探讨探讨。


最后,月影在51js上写过一篇文章描述如何通过源代码操作来实现pause(实际上就是代码生成),这个方式理论上可以延伸到实现yield(其实类似于把另一种语言转换或说编译为js啦),但是没有见到进一步深入下去。



场景是这样的:
我的项目里面使用了richfaces,以异步请求方式对表单内容进行后台校验并返回校验结果,这个是在表单提交按钮点击后做的(按钮的onclick事件,受JSF的限制,很难通过javascript去控制表单以JSF的标准提交)。
这样就有个问题,如果校验是异步进行的,没等校验结果返回,onclick事件就成功执行,然后表单就提交了,达不到校验的效果(根据校验结果决定是否提交表单)。
所以,需要有个办法阻止代码在发出异步请求后继续往下走,直到异步请求返回,我实现了一个pause()函数,功能类似Thread.sleep(),是通过模态窗口实现的,但是模态窗口实现有缺陷(大家都知道了,这里不做说明了)。


我尝试了一下XHR的做法,由于每次pause只100毫秒,而且等待异步请求返回时间不长,再加上timeout设置,客户端基本感觉不到假死现象。

附上代码,里面没有timeout设置
前台
	var starttime = new Date().getTime();
	var now = null;
	var gap = 10000;	//超过10秒认为网络不通
	while(null == isValidatePass){  //isValidatePass由校验的异步请求返回后的回调函数中设置
		now = new Date().getTime();					
		if(now - starttime >= gap){
			alert('超时,请稍后再试');
			//throw "超时 " + gap;
			break;
		}else{
			pause(100);
		}
	}



pause函数

function pause(numberMillis) {
	//var dialogScript = 'window.setTimeout(' + ' function () { window.close(); }, ' + numberMillis + ');';
	// For IE5.
	//var result = window.showModalDialog('javascript:document.writeln(' + '"<script>' + dialogScript + '<' + '/script>")');
	 var url = "/test.jsp?delay=" + numberMillis + "&" + Math.random();
	 //alert(url);
	 xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
	 //调用远程服务器,method参数为“get”,使用同步方式

	 xmlHttpRequest.open("GET", url, false);
	 xmlHttpRequest.send(null); 
}


5 楼 hax 2009-02-04  
pause没有好的方法。
用隐藏的模态对话框是一个方式,但是IE-only,而且现在模态对话框已经无法隐藏了。

用同步xhr只是能实现效果,但是如jindw所说,显然也不是好方法。


一般而言,如果有了yield,编程上就不需要pause了。如果你有什么场景觉得需要pause,可以拿出来大家探讨探讨。


最后,月影在51js上写过一篇文章描述如何通过源代码操作来实现pause(实际上就是代码生成),这个方式理论上可以延伸到实现yield(其实类似于把另一种语言转换或说编译为js啦),但是没有见到进一步深入下去。

4 楼 kimmking 2009-02-01  
假死问题很严重。随便找个用户问问看。
3 楼 airlulu 2009-02-01  
jindw 写道
呵呵,见过不怕死的,没见过自己伸出脖子送死的。

xhr pause会让浏览器假死,而且因为JS语法的一些历史原因,这个状态短期内不要指望有很大的变化。


假死不要紧吧(其实是因为richfaces是异步调用,我想用它来做校验,等服务器校验结果返回后再决定是否提交表单,所以想用pause来延迟一段时间,直到服务器结果返回),而且同步XHR不是可以设置超时吗?
2 楼 kimmking 2009-01-31  
jindw 写道
呵呵,见过不怕死的,没见过自己伸出脖子送死的。

xhr pause会让浏览器假死,而且因为JS语法的一些历史原因,这个状态短期内不要指望有很大的变化。

ls说的很有道理。
不过lz的想法很有创意,这样倒是可以解决一些问题,但是带来的新问题更大。
1 楼 jindw 2009-01-31  
呵呵,见过不怕死的,没见过自己伸出脖子送死的。

xhr pause会让浏览器假死,而且因为JS语法的一些历史原因,这个状态短期内不要指望有很大的变化。

相关推荐

    XHR Proxy Tool插件(chrome浏览器)

    通过指定使用XHR Proxy Tool插件,NEI用户可以直接在浏览器中进行接口测试,无需额外的工具如Postman。这大大提高了开发效率,特别是在团队协作和接口验证的场景下。 **与Postman的对比** Postman是另一款流行的API...

    JavaScript - XHR实现短信验证码注册登录完整示例:JavaScript - XHR.js和附件说明

    在JavaScript - XHR.js这个示例中,我们将探讨如何利用XHR对象实现用户注册和登录过程中的短信验证码功能。 首先,我们需要了解XHR对象的基本用法。在JavaScript中,可以通过`new XMLHttpRequest()`创建一个实例,...

    dotnet-叶子浏览器基于Cef访问网页时自动抓取结构化xhr数据

    标题中的“dotnet-叶子浏览器基于Cef访问网页时自动抓取结构化xhr数据”指出,这个项目是一个使用.NET框架...通过深入研究其源代码,开发者可以学习到如何利用CefSharp库实现浏览器功能,以及如何捕获和处理网络请求。

    一个用于通过XHR2在浏览器上预加载资源的1kbJavaScript库

    本项目是一个仅1kb大小的JavaScript库,专为通过XMLHttpRequest Level 2(XHR2)在浏览器中实现资源预加载而设计。这个小巧的库提供了高效且灵活的方式来加载各种类型的文件,并且具有进度跟踪功能,使开发者能够更...

    ajax 浏览器后退前进按钮功能实现

    总之,要实现在使用Ajax时保持浏览器的后退和前进功能,关键在于正确管理历史记录。通过结合`pushState`、`popstate`以及事件监听,我们可以确保用户的导航体验不受影响,同时保持页面的无刷新特性。在实际项目中,...

    flash html5实现浏览器兼容的文件上传

    综上所述,实现浏览器兼容的文件上传,需要结合Flash和HTML5的技术特性,通过检测浏览器的支持情况,采取适当的策略。同时,注意安全性和性能优化,提供良好的用户体验。在实际项目中,可以参考开源的文件上传组件,...

    前端开源库-mock-xhr

    在前端开发中,Mock XHR 是一种非常重要的技术,它允许开发者在没有真实网络环境的情况下进行单元测试和功能测试。这个开源库“mock-xhr”就是专为这种目的设计的,它提供了一个XMLHttpRequest(XHR)的模拟实现,...

    不同浏览器创建XMLHttpRequest,兼容各种浏览器(王兴魁老师视频笔记)

    解决方法是使用JSONP(JSON with Padding)或者在服务器端设置CORS(Cross-Origin Resource Sharing)策略。 此外,XMLHttpRequest的其他高级特性,如`XMLHttpRequest Level 2`引入的`FormData`对象、上传文件、...

    前端项目-i18next-xhr-backend.zip

    【前端项目-i18next-xhr-backend.zip】是一个与前端国际化(i18n)相关的压缩包,其中包含了用于i18next的xhr后端层实现。i18next是广受欢迎的JavaScript国际化框架,它提供了强大的语言管理和翻译功能,支持多种...

    真正的多文件上传,可以显示进度条,并可随时终止上传

    "真正的多文件上传,可以显示进度条,并可随时终止上传"这个主题,正是关于如何实现这样一个高效且用户体验良好的上传系统。此系统采用Flash组件SwfUpload来实现,它提供了丰富的功能,包括多文件选择、上传进度显示...

    自己封的XHR,实现JAVA与JS直接通信

    自己封的XHR,实现JAVA与JS直接通信,起到连接JAVA与JS的桥梁,使用方法直接在JS中引入XhrAjax.js,传入参数带回返回值即可,但是要注意回调的时候要eval()激回一下返回值!

    10+1个你可能没注意到的GoogleChrome浏览器内建功能技巧[整理].pdf

    Google Chrome 浏览器提供了设置管理功能,用户可以使用设置管理功能来管理浏览器的设置,自定义浏览器的行为。 +1. 使用 Chrome 记忆力管理功能 Google Chrome 浏览器提供了记忆力管理功能,用户可以使用记忆力...

    ajax实例,兼容各个主流浏览器

    这个实例是为了实现跨浏览器的Ajax局部刷新功能,确保在所有主流浏览器中都能正常工作。以下将详细介绍Ajax的工作原理以及如何实现跨浏览器兼容性。 ### 1. Ajax的工作原理 Ajax的核心是XMLHttpRequest对象,它...

    ajax兼容所有浏览器详解

    详细介绍了使用ajax如何兼容各种浏览器

    ext-2.0.2含localXHR.rar

    综合来看,"ext-2.0.2含localXHR.rar"这个压缩包提供了一种改进的开发环境,允许开发者在本地进行Ajax操作,同时提供了更优质的帮助文档,以便于理解和使用ExtJS 2.0.2的功能。对于需要离线开发和测试ExtJS应用的...

    php 使用html5 XHR2实现上传文件与进度显示功能示例

    【PHP使用HTML5 XHR2实现文件上传及进度显示】\n\n在现代网页开发中,HTML5引入了许多新特性,其中包括对文件上传的支持。利用HTML5的XMLHttpRequest Level 2(XHR2)API,我们可以实现文件上传的同时,实时显示上传...

    ajax通用函数,兼容市面所有浏览器,纯javascript实现

    }这个通用 `ajax` 函数通过使用 JavaScript 实现了一个跨浏览器的 AJAX 请求。它首先检查是否支持 `ActiveXObject`(针对旧版 Internet Explorer)或 `XMLHttpRequest` 对象。然后,它会初始化一个请求,设置请求...

    AjAX JavaScript中使用表单实现留言功能

    总结起来,使用AJAX和JavaScript实现留言功能主要包括以下步骤: 1. 创建HTML表单,包含输入框和提交按钮。 2. 使用JavaScript监听表单的提交事件,阻止默认行为。 3. 创建XMLHttpRequest对象,设置请求方法、URL和...

    Android图片浏览器报告[参照].pdf

    本次图片浏览器的设计实现了一个功能强大且实用的图片浏览器,可以浏览png、jpg等格式的图片,还可以浏览本地文件、SCDCARD和USBHOST存储的图片,以及手机设备里的其他图片。其设计思路和编程技巧为移动开发应用提供...

Global site tag (gtag.js) - Google Analytics