发布一个JQuery的AjaxUpdater插件

       其实JQuery已经提供了很多基于Ajax的调用方法，那为什么还要做这样一个Ajax插件呢！其实目的很简单就是为了调用更方便。这个插件的特点就是允许通过HTML属性描述来进行一个Ajax操作的定义；也就是说通过使该插件只要简单的属性描述就能实现Ajax请求和局部更新的功能。

首先做一个小例程来看一下插件基础功能：

    <input ajaxupdater="url:Sink1Page.aspx;updater:updater1" ajaxparams="State:AttributePost" type="button" value="AjaxUpdate" />

    <div id="updater1">

   

    </div>

    <div id="updater2">

        &nbsp;</div>

    </form>

    <script>

        $('#updater2').AjaxUpdater({url:'Sink1Page.aspx'},{State:'ScriptPost'});

    </script>

上面HTML描述了两个Ajax请求:

第一个是描述Button在点击后引发Ajax请求并把请求的内容更新到updater1的DIV中。

第二个就是页面加载后进行Ajax请求并把请求的内容更新到updater2的DIV中。

功能似乎很简单调用过程和JQuery具备的Ajax方法差别不大。接下来做个相对复杂又比较常用的Ajax请求，通过HTML属性描述一个基于Ajax的用户注册信息提交的功能（包括数据验证处理）。为了得到验证功能必须把之前做的验证插件引进来。

相关处理脚本文件引用：

    <script src=jquery-latest.js></script>

    <script src=validator.js></script>

<script src =AjaxUpdater.js></script>

具本定义的HTML代码:

        <table id="table1">

            <tr>

                <td style="width: 100px">

                    用户名</td>

                <td style="width: 100px">

                    <input id="Text1" type="text" validator="type:string;nonnull:true;tip:请输入用户名!" />

                                     </td>

            </tr>

            <tr>

                <td style="width: 100px">

                    性别</td>

                <td style="width: 100px">

                    <select id="Select1" validator="type:string;nonnull:true;tip:请选择性别!">

                        <option value="男">男</option>

                        <option value="女">女</option>

                    </select>

                </td>

            </tr>

            <tr>

                <td style="width: 100px">

                    出生日期</td>

                <td style="width: 100px">

                    <input id="Text2" type="text" validator="type:date;nonnull:true;tip:请输入出生日期!" /></td>

            </tr>

            <tr>

                <td style="width: 100px">

                    邮件地址</td>

                <td style="width: 100px">

                    <input id="Text3" type="text" validator="type:string;regex:\\w+([-+.']\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*;nonnull:true;tip:请输入邮件地址!" /></td>

            </tr>

            <tr>

                <td style="width: 100px">

                </td>

                <td style="width: 100px">

                    <input id="Button1" ajaxupdater="url:Sink2Page.aspx;updater:update1;validator:table1"

                     ajaxparams="username:#Text1;sex:#Select1;birthdate:#Text2;email:#Text3"

                     type="button" value="注册" /></td>

            </tr>

        </table>

        <dir id="update1">

            </dir>

HTML代码中的每个输入元素都定义了validator属性，它是用于提供给validator.js脚本进行验证处理用的。接下来就是通过属性描述一个Ajax把数据提交并更新的相关元素功能：

<input id="Button1" ajaxupdater="url:Sink2Page.aspx;updater:update1;validator:table1"

                     ajaxparams="username:#Text1;sex:#Select1;birthdate:#Text2;email:#Text3"

                     type="button" value="注册" />

描述信息分两部分

第一部分是描述Ajax提交的配置信息ajaxupdater属性:

属性成员分别明：url提交的路径，updater提交后更新的区域，validator对某个区域下的元素进行验证处理。

第二部分就是描述提交的数据信息ajaxparams属性：

参数定义的是成[员名称：成员值]，如果成员值用#开头描述即表示获取相关元素值。成员与成员之前通过[;]分隔开。

整个过程实现除了引入相关脚本文件外，并不需要编写任何脚本。不过实际应用也并不是这么简单，往往要根据完成的结果进行别的处理，这个时候就要引入一个提交完成的回调函数。

 

下载例程和插件源码