Ajax基石脚本异步并发调用参数传递

简介:

在Ajax开发框架中,最基本的划分是服务器端和客户端。服务器端相对来说比较简单,只要是可以开发动态网页的语言都可以胜任;客户端浏览器就是JScript/JavaScript的天下了,好像没有看到有VBScript做的Ajax客户端库,就算它只支持IE。由于客户端依赖于脚本并运行在浏览器中,似乎比服务器端的可实现和可管理性还要差些。

    这里我说一下Ajax中的A, Asynchronous调用的一些问题。如果我们在异步调用时不为方法传递任何的参数,那么这个问题也就简单甚至不存在了。但是事实上,我们开发一些稍微复杂些的功能时,对于"脚本异步并发调用参数传递"这个功能是很需要的。说的严重些,可以把这个功能看成Ajax客户端框架能否真正Asynchronous的基石。对于异步调用参数传递的问题,可以看我以前的一篇文章"使用匿名函数为setInterval传递参数"。虽然文中的示例很好地解决了参数传递问题,但是我们看看下面的示例,看会发现什么呢?

None.gif function foo()
ExpandedBlockStart.gif ContractedBlock.gif dot.gif{
InBlock.gif     var param = 100;
InBlock.gif    window.setTimeout( function()
ExpandedSubBlockStart.gif ContractedSubBlock.gif     dot.gif{
InBlock.gif        intervalRun(param);
ExpandedSubBlockEnd.gif    }, 0);
InBlock.gif    param = 0;
ExpandedBlockEnd.gif}
None.gif
None.gif function intervalRun(times)
ExpandedBlockStart.gif ContractedBlock.gif dot.gif{
InBlock.gif    alert(times);
ExpandedBlockEnd.gif}

    我们执行foo,会得到什么样的alert结果呢?100? or 0?,答案是:0。其实写过内嵌函数就知道,这里要真确的传入100,需要这样改写foo方法:
None.gif function foo()
ExpandedBlockStart.gif ContractedBlock.gif dot.gif{
InBlock.gif     var param = 100;
InBlock.gif     var __param = param;
InBlock.gif    window.setTimeout( function()
ExpandedSubBlockStart.gif ContractedSubBlock.gif     dot.gif{
InBlock.gif        intervalRun(__param);
ExpandedSubBlockEnd.gif    }, 0);
InBlock.gif    param = 0;
ExpandedBlockEnd.gif}
// 这样添加一个变量来存储param就可以了,这下执行foo得到的alert结果就是:100。

    上面这个修正本身没有问题,可是如果我在并发执行的情况下,就可能又有新的问题。示例代码:
None.gif function doTick()
ExpandedBlockStart.gif ContractedBlock.gif dot.gif{
InBlock.gif     var tick =  new Date().getTime();
InBlock.gif    var __tick = tick;
InBlock.gif     var foo =  function()
ExpandedSubBlockStart.gif ContractedSubBlock.gif     dot.gif{
InBlock.gif        GetTick(__tick);
ExpandedSubBlockEnd.gif    };
InBlock.gif    window.setTimeout(foo,  3000);
ExpandedBlockEnd.gif}
None.gif
None.gif function GetTick(tick)
ExpandedBlockStart.gif ContractedBlock.gif dot.gif{
InBlock.gif     //  to do something depend on tick parameter
ExpandedBlockEnd.gif
}

    当我们在调用doTick方法时,如果以小于3000ms的频率并发,将会导致前一次的tick变量被后面执行的执行过程修改的问题,从而导致GetTick方法取到错误的tick参数。也就是说必须把doTick方法看成一个,需要"本身执行时间+3000ms"才能运行完的方法,然后再保证 并行的执行doTick方法才不会出错。这样的限制条件显然是不可接受的,那么我们该怎么办呢?

    其实我们只需要使用内嵌函数自身帮助我们传递参数就行了,修改后的示例如下:
None.gif function doTick()
ExpandedBlockStart.gif ContractedBlock.gif dot.gif{
InBlock.gif     var tick =  new Date().getTime();
InBlock.gif     var foo =  function()
ExpandedSubBlockStart.gif ContractedSubBlock.gif     dot.gif{
InBlock.gif         var __tick = foo.params[0];
InBlock.gif        GetTick(__tick);
ExpandedSubBlockEnd.gif    };
InBlock.gif    foo.params = [tick];
InBlock.gif    window.setTimeout(foo, 0);
ExpandedBlockEnd.gif}

    由于内嵌函数构造出一个Closure Scope,它将帮组我们保存参数的Context,使我们获得真正的"异步并发调用参数传递"效果。

    注意:Closure Scope是JScript编程中危险的高级技术,使用不当极易造成IE Memory Leak。


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

目录
相关文章
|
4月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
67 0
|
4月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
25天前
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
42 3
|
3月前
|
XML 移动开发 前端开发
JS设置Ajax为同步或异步
JS设置Ajax为同步或异步
29 0
|
3月前
1.ajax同步和异步区别 2.post和get区别
1.ajax同步和异步区别 2.post和get区别
25 0
|
4月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
47 3
|
4月前
|
JSON 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
|
4月前
|
XML 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
|
前端开发 数据可视化 JavaScript
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
113 0
|
XML 前端开发 JavaScript
ajax 异步
Ajax(异步JavaScript和XML)是一种用于创建优雅的、可交互的Web内容的技术。它使用XMLHttpRequest对象作为后台与服务器端通信的桥梁,并使用JavaScript处理和展示从服务器端返回的数据。 Ajax可以使用户界面更加实时和响应迅速,因为它只需要通过JavaScript处理和展示从服务器端返回的部分数据,而无需重新加载整个页面。这也意味着,用户可以在不必等待整个页面重新加载的情况下,就可以获取和操作服务器端的数据。 Ajax的工作原理是,当用户触发某个操作时,JavaScript代码会向服务器发送一个HTTP请求,并在服务器端返回响应后,使用JavaScript处理
51 0