JQuery的AjaxUpdater上傳插件。

其實(shí)JQuery已經(jīng)提供了很多基于Ajax的調(diào)用方法，那為什么還要做這樣一個(gè)Ajax插件呢！

其實(shí)目的很簡(jiǎn)單就是為了調(diào)用更方便。

這個(gè)插件的特點(diǎn)就是允許通過HTML屬性描述來進(jìn)行一個(gè)Ajax操作的定義；

也就是說通過使該插件只要簡(jiǎn)單的屬性描述就能實(shí)現(xiàn)Ajax請(qǐng)求和局部更新的功能。

描述信息分兩部分

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

屬性成員分別明：url提交的路徑，updater提交后更新的區(qū)域，validator對(duì)某個(gè)區(qū)域下的元素進(jìn)行驗(yàn)證處理。

第二部分就是描述提交的數(shù)據(jù)信息ajaxparams屬性：

參數(shù)定義的是成[員名稱：成員值]，如果成員值用#開頭描述即表示獲取相關(guān)元素值。成員與成員之前通過[;]分隔開。

整個(gè)過程實(shí)現(xiàn)除了引入相關(guān)腳本文件外，并不需要編寫任何腳本。不過實(shí)際應(yīng)用也并不是這么簡(jiǎn)單，往往要根據(jù)完成的結(jié)果進(jìn)行別的處理，這個(gè)時(shí)候就要引入一個(gè)提交完成的回調(diào)函數(shù)。

首先做一個(gè)小例程來看一下插件基礎(chǔ)功能： 

    <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描述了兩個(gè)Ajax請(qǐng)求:

• 第一個(gè)是描述Button在點(diǎn)擊后引發(fā)Ajax請(qǐng)求并把請(qǐng)求的內(nèi)容更新到updater1的DIV中。
  

• 第二個(gè)就是頁面加載后進(jìn)行Ajax請(qǐng)求并把請(qǐng)求的內(nèi)容更新到updater2的DIV中。
  

功能似乎很簡(jiǎn)單調(diào)用過程和JQuery具備的Ajax方法差別不大。接下來做個(gè)相對(duì)復(fù)雜又比較常用的Ajax請(qǐng)求，通過HTML屬性描述一個(gè)基于Ajax的用戶注冊(cè)信息提交的功能（包括數(shù)據(jù)驗(yàn)證處理）。為了得到驗(yàn)證功能必須把之前做的驗(yàn)證插件引進(jìn)來。

相關(guān)處理腳本文件引用： 

<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:請(qǐng)輸入用戶名!" />
</td>
</tr>
<tr>
<td style="width: 100px">
性別</td>
<td style="width: 100px">
<select id="Select1" validator="type:string;nonnull:true;tip:請(qǐng)選擇性別!">
<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:請(qǐng)輸入出生日期!" /></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:請(qǐng)輸入郵件地址!" /></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="注冊(cè)" /></td>
</tr>
</table>
<dir id="update1">
</dir>

HTML代碼中的每個(gè)輸入元素都定義了validator屬性，它是用于提供給validator.js腳本進(jìn)行驗(yàn)證處理用的。接下來就是通過屬性描述一個(gè)Ajax把數(shù)據(jù)提交并更新的相關(guān)元素功能： 

<input id="Button1" ajaxupdater="url:Sink2Page.aspx;updater: update1;validator:table1"
ajaxparams="username:#Text1;sex: #Select1;birthdate:#Text2;email:#Text3"
type="button" value="注冊(cè)" />