在上一篇文章中，我介绍了使用 jQuery.render 来呈现本地数据源的相关话题。通过上一篇文章，我们了解到，jQuery.render 支持使用与传统 jQuery 命令调用方式相同的简单而直观地调用来完成对 Array 或 Object 等本地数据类型的呈现，此外，我还简要介绍了模板的话题。
紧接上一篇文章的思路，让我们随本文一起探讨 jQuery.render 是如何使用同样简单直观的方式来解放动态绑定来自服务器的远程数据的。
一、绑定服务器资源
我知道，对于用户体验至上的你来说，异步的视图切换是必需要在所有可能运用的地方必不可少地运用的。因此，绑定服务器的数据并直接显示到视图是一件急于实现的事。
好在，这一切，jQuery.render 出在已经帮您完成。
看如下调用：
1: <div id=“tools”></div>
2:
5: <script> 6: var url = ”/mytools.ashx?s=” + Math.random(); 7: jQuery( ”#tools” ) .render( url, jQuery( ’#tool-tmpl’ ) );8: </script>
是的，您没有看错！上述代码的第 7 行就是绑定服务器数据的所有代码！您只需像指定本地数据一样指定一个字符串作为数据来源，就可以直接使用 jQuery.render 内置的异步 Ajax 机制来从服务器载入资源，并且在载入完成之后直接呈现到已指定的目标位置，在上例中是 jQuery( “#tools” ) 位置。
与上篇文章介绍本地数据不同，说到异步时，需要您自己动手来亲自体验这份快感！
从我的叙述中，您大致也可以感受到，如果以上一篇“本地数据源”作为基础，jQuery.render 在异步呈现过程中帮您完成的工作有：
- 载入数据
- 分析数据
- 绑定到视图
二、再次绑定
要使用 jQuery.render 来绑定服务器资源的原因之一很可能就是因为面要经常更新这一区域的视图数据。
考虑一个文件列表、文章列表、购物车，又或者作为管理员用户，您在不同用户的信息之间点击“上一个”、“下一个”导航。这时，您需要重新绑定视图。
此时，我想顺便提醒一下，虽然 jQuery.render 已经为您提供了很多的便利，但也千万不要忘记了原生的 Javascript 的强大后盾：您要做的就是将上述示例代码中后一个 script 中的所有内容放到一个 function 中，然后在任意时候调用，即可重新完成绑定了。
嗯呵，这部分并不是 jQuery.render 提供的特性。不要怪我耍狡猾，哈哈，毕竟我只是想做个善意的提醒。
三、Ajax 参数？
眼睛明亮的您马上就看出来上面的示例代码的 url 后面被指定了一个 Math.random 的 s 查询参数。
在传统 Ajax 编程实践中，我们经常使用这种方式来防止在异步请求过程中意外的缓存导致的问题。此外，jQuery 的 Ajax 实现中也对这个问题提供了非常漂亮的解决方案：通过给 Ajax 设置一个 cache 为 false 的 option 即可完美解决所有问题。
好吧，我承认，jQuery.render 内部的异步加载确实只是调用了 jQuery.ajax 而已。jQuery.ajax 的 cache 参数默认值为 true，即认可缓存；仅当 dataType 值设为 “script” 或者跨域异步请求时才会默认设为 false。
那现在，在使用 jQuery.render 调用异步资源时，如何利用这些 jQuery.ajax 提供的那么多利好工具呢？
jQuery.render 当然不敢剥夺了您的权利！您仍然能够享受这所有由 jQuery.ajax 提供给您的任何便利——通过 jQuery.render 的第三个参数。
jQuery.render 的第三个参数实际上为它的定制性提供了很大发挥的空间。在后一篇博客中，我将详细地介绍如何定制它们。作为 Ajax 的一个部分，我不得不提前在这里向您泄露参数设置中的 Ajax 配置的部分：
定义一个 Object 类型的对象 A 作为 jQuery.render 的第三个参数，并使用 A 的 ajaxOptions 统一封装所有您认为可以用在传统 jQuery.ajax 的定制参数，即将它们作为 A 的 ajaxOptions 属性的子属性。
一个典型的调用示例如下：
1: jQuery( ’#target‘ ).render( url, jQuery(‘#tmpl‘), {
2: ajaxOptions:{
3: cache: false,
4: dataType: ‘json’,
5: type:‘GET’
6: }
7: });
四、进阶：实现“正在载入”与“重试”
在实际项目中，为了让用户感到程序确实在动，我们往往在载入数据的同时，在界面上给出一个转动的“正在载入”字样，而且在载入超时或出错时，需要为用户提供“重试”功能。
事先声明一下，这事实也与 jQuery.render 无关，有关的是，您会感受到，jQuery.render 从来不会做限制您的事，它只是帮助您提高生产力的工具。所以用 jQuery.render 之后，仍能完美地制作出以前您能做到的任何效果。“正在载入”与“重试”也不例外。
试试这个：
1: function LoadData(){
2: jQuery( ”#target” ).render( url, jQuery(”#tmpl”), {
3: ajaxOptions:{
4: cache: false,
5: beforeSend: function(){
6: this.html(‘正在载入…’ );
7: },
8: timeout: function(){
10: .html( ‘重试’ )
11: .click( LoadData )
12: .appendTo( ”#target” );
13: }
14: }
15: });
16: }
好了，还有什么其他的需求吗？
相信还是有的，那请您继续关注后续文章吧，希望有用。
本文原始地址：https://blog.jijiechen.com/post/using-jquery-render-with-server-data-source-via-ajax.aspx
欢迎转载，如果需要同原作者 ciznx 交流，请点此链接回到原来页面。
com/post/using-jquery-render-with-server-data-source-via-ajax.aspx)。
