javascript总结（四）ajax局部刷新与RPC

目录
（一）有关框架
（二）文件组织与代码组织
（三）JS与FLASH交互
（四）ajax局部刷新与RPC
  (五）获取设置元素样式与监听元素事件
  (六）页面元素的创建调整与关联
（七）浏览器兼容性问题
（八）WEB软件的前端架构实践

文章中的代码只为表达文章意义，非真正能执行的代码。
不同目的ajax请求

一、使用ajax进行局部更新
目前项目中的主要几种
1、切换到新的TAB时局部更新
自定义实现了TabPanel，主要通过在元素上设置属性来设置参数，这样做的好处是不必在代码中写参杂页面控制逻辑。结构如下，当子节点没有设置相关属性时，从父节点设置的属性中获取。

<h3>新闻</h3>
<ul renderTo="#newsContent" class="tabpanel" url="http://www.a.com/?category=$0&count=$1" >
    <li>
          <a  data="tech,8" renderTo="#newsContent" class="tab on" before="js code" after="js code">科技</a>
    </li>
    <li>
         <a data="economic,9" class="tab">经济</a>
    </li>
    <li></li>
</ul>
<div id="newsContent">

</div>

属性含义：
renderTo： 渲染到哪个元素
url: 请求的地址的模板
data：替换url中的参数
before: 载入前要执行的代码
after： 载入后要执行的代码

2、弹出一个浮动窗口，内容由ajax获取
这个实现也比较简单，写一下调用示例:

ibm.popup({
   url: " http://www.a.com/login",
   params: {theme: "sky"},
   html: "",   //如果指定了内容，则不会发起请求
   modal: true, //窗口是否为模态
   time: -1, //指定时间内自动关闭
   success: function(){  
       ibm.initLogin();
   }
})

3、点击一个按钮后进行局部更新
简单的直接onclick="jQuery('selExp').load('url')";
复杂的直接调用业务方法

4、通过RPC请求新增一条数据或删除一条数据后进行局部更新
为了保持前端无状态，删除或添加后都局部刷新整个列表，除非这样做会导致系统负担，才手动操作DOM做假的增加删除。
如果这一块的HTML比较多，导致更新局部的时候获取的HTML比较大，或者用户做这种局部更新比较频繁，就考虑把模板放到前端，然后每次只请求数据，然后由前端完成渲染工作。相关介绍见金大为的文章。雏凤清音 -- 面向数据的前端编程方法


二、使用ajax提交表单
比较简单，主要使用jQuey+插件validation来做。
表单的参数由元素name指定，不用用户输入的参数通过<input type="hidden" />来实现，一般不在JS方法中对提交的后台的参数进行增加或修改操作。

三、使用ajax进行远程过程调用（RPC）
RPC我们遵行的是JSON RPC规范。根据是否跨域，我们有两种实现，不跨域的时候是POST请求，跨域情况下，我们采用导入脚本的方式。当然，RPC接口是统一的，是否跨域根据URL自动判断，晒一下方法签名

	
   /**
     * @param {String} url 
     * @param {Object} params 
     * @param {Function | String} successFn 成功后的回调
     *       如果为字符串，将显示该消息，且不显示返回数据中的消息
     *       未提供此参数，判断成功后，尝试从返回数据中提取消息进行显示
     * @param {Function | String} failFn 失败后的回调
     *       如果为字符串，将显示该消息，且不显示返回数据中的消息
     *       未提供此参数，在判断RPC操作失败时，将尝试从返回数据中提取错误消息进行显示
     */
	rpc: function(url, params, successFn, failFn) {
          //code
        }

    //使用示例
   rpc("http://www.a.com/user/updateMoney", {value: money}, function(data){
        jQuery("#userMoney").text(data.money)
   }) 

RPC操作超过2秒后没有得么响应，将弹出一个系统繁忙提示的DIV模拟模态弹出窗口，防止用户重复点击提交。
在我们的项目中，后台程序统一了一个响应前端RPC的方法，处理前端响应的业务代码中在响应请求时调用那个方法，以使得统一以及返回数据遵行JSON RPC规范。
其它RPC的实现也有很多，如PHP RPC


全局ajax设置及错误处理
用jQuery实现统一的ajax全局设置还是比较简单的
网络连接中断，超时以及当HTTP HEAD中state code非200时都会报错。
目前以下代码无法在IE下驱分出网站连接中断与超时，FF下与CHROME下可以。
代码看起来比较乱

function initAjax() {
        jQuery.ajaxSetup({
			timeout: 10000,
                        cache: false
        });
        $(document.body).ajaxComplete(function(event, request, ajaxOption, state){
                   if(!Comm.browser.isIE  && state == "timeout"){
                          Comm.onceError("请求超时,请稍候重试!");
                   }
                }).ajaxError(function(event, request, ajaxOption,  thrownError){
                    var passError = /&passerror=|^passerror=/;
                    var hasJsonName = /&jsonName=|^jsonName=/;
                    var data = ajaxOption.data;
                    var isJsonRPC = data && hasJsonName.test(data) && (!passError.test(data));
                    try{
                            if(!Comm.browser.isIE && (!request || request.status == 0)){
                                    Comm.onceError("网络连接中断,请检查你的网络连接");
                                    return;
                            }
                            var state_code = request.status.toString().substr(0, 3);
                            if (state_code != "200") {
                                    var msg = '';
                                    msg = $HTTP_STATE_CODE[state_code];
                                    if(msg) msg = msg[1] || msg[0];
                                    if (!msg) msg = "请求数据失败，请稍后重试";
                                    if (state_code == "401") Comm.error(msg, function() {
                                            top.location.href = "http://www.a.com/login";
                                                    return;
                                            });
                                    if (isJsonRPC) Comm.error(msg);
                            }
                    }catch(e){
                            if(Comm.browser.isIE)Comm.onceError("请求超时,请稍候重试!");
                    }
            })
    }

评论

5 楼 86asm 2010-04-06  

bellstar 写道

qiren83 写道

一个做过后端开发的人 最终走在前端是需要勇气的

想知道楼主现在的月薪多少 在哪家上班（如果是大公司的话）

谢谢 期待你的回答

我做程序员以来，一直就偏向于喜欢研究前端技术，因为前端的纷乱以及不成熟，更有机会创新，以目前WEB化的趋势，随着HTML5的到来，前端技术的重要性将更加突出。目前在一小公司做WEB GAME。

  的确，web前端技术太杂乱了。调试起来也比较麻烦，该死的ie6问题还不少

4 楼 bellstar 2010-04-05  

qiren83 写道

一个做过后端开发的人 最终走在前端是需要勇气的

想知道楼主现在的月薪多少 在哪家上班（如果是大公司的话）

谢谢 期待你的回答

我做程序员以来，一直就偏向于喜欢研究前端技术，因为前端的纷乱以及不成熟，更有机会创新，以目前WEB化的趋势，随着HTML5的到来，前端技术的重要性将更加突出。目前在一小公司做WEB GAME。

3 楼 qiren83 2010-04-05  

一个做过后端开发的人 最终走在前端是需要勇气的

想知道楼主现在的月薪多少 在哪家上班（如果是大公司的话）

谢谢 期待你的回答

2 楼 xiaochong4 2010-04-01  

有图才有真相!

1 楼 pouyang 2010-03-31  

能附上下载就更好了