下面我們通過(guò)實(shí)做AJAX對(duì)Dorado中的AJAX操作做一定的了解。 頁(yè)面功能描述： 首先我們?cè)O(shè)計(jì)一個(gè)Spring的JavaBean:

package com.bstek.dorado.sample.basic;

 
import java.util.Properties;
import org.springframework.stereotype.Component;
import com.bstek.dorado.annotation.Expose;
import com.bstek.dorado.core.DoradoAbout;

 
@Component
public class Ajax {

 
    @Expose
    public String toUpperCase(String str) {
        return "input:\n" + str + "\n\n" + "output:\n"
                + str.toUpperCase();
    }

 
    @Expose
    public int multiply(int num1, int num2) {
        return num1 * num2;
    }

 
    @Expose
    public Properties getSystemInfo() {
        Properties info = new Properties();
        info.setProperty("product", DoradoAbout.getProductTitle());
        info.setProperty("vendor", DoradoAbout.getVendor());
        info.setProperty("version", DoradoAbout.getVersion());
        return info;
    }
}

頁(yè)面上放置三個(gè)按鈕:button1, button2, button3

• 單擊button1的時(shí)候，調(diào)用spring中的一個(gè)bean的方法toUpperCase,并將我們傳入的字符串轉(zhuǎn)換為大寫(xiě)，并返回到前臺(tái)瀏覽器中;

• 單擊button2的時(shí)候，調(diào)用spring中的一個(gè)bean的方法multiply,并將我們傳入Map對(duì)象(含多個(gè)key)中的兩個(gè)數(shù)字相乘，并將計(jì)算結(jié)果返回到前臺(tái)瀏覽器中;

• 單擊button1的時(shí)候，調(diào)用spring中的一個(gè)bean的方法getSystemInfo，并將Java中的一個(gè)Map對(duì)象返回到前臺(tái)瀏覽器中;

如果完成了以上的三個(gè)功能，我們就很容易解決這些AJAX技術(shù)問(wèn)題:

• 如何調(diào)用Spring中bean中指定的業(yè)務(wù)方法;
• 如何傳入一個(gè)單值給后臺(tái)，并將調(diào)用結(jié)果為單值的值如何返回到前臺(tái);
• 如何傳入一個(gè)map到后臺(tái)，并將運(yùn)算結(jié)果返回到前臺(tái)；
• 如何調(diào)用后臺(tái)的業(yè)務(wù)方法，并將計(jì)算結(jié)果為map的值返回到前臺(tái)；

掌握了以上基本技術(shù)之后，再將它們綜合應(yīng)用一下，如JS中指定map參數(shù)，ajax調(diào)用結(jié)束之后返回map對(duì)象，并在前端使用。這樣我們就可以解決大部分的ajax調(diào)用問(wèn)題了。

toUpperCase

下面我們還是在HelloWorld中實(shí)做這個(gè)范例,由于HelloWorld中已經(jīng)定義過(guò)Ajax這個(gè)Bean了，我們不再重復(fù)定義，我們?cè)赾om.bstek.dorado.sample.training目錄中新建一個(gè)名稱(chēng)為Ajax的View,并在其中添加一個(gè)AjaxAction控件和Button控件，其中AjaxAction是Action的一種，我們?cè)诳丶幕A(chǔ)知識(shí)中簡(jiǎn)單介紹過(guò)它代表了頁(yè)面上的一種動(dòng)作，是不可見(jiàn)的對(duì)象。但是它可以被其他可見(jiàn)控件使用，例如單擊按鈕時(shí)觸發(fā)Action。 我們?cè)O(shè)置AjaxAction控件的相關(guān)屬性：

其中我們特別關(guān)注其service屬性,"ajax#toUpperCase"是一個(gè)服務(wù)名稱(chēng)，根據(jù)Dorado中的服務(wù)定位表達(dá)式，它最終代表的含義是調(diào)用Ajax這個(gè)類(lèi)的toUpperCase方法，至于服務(wù)表達(dá)式的概念我們后面再講，這兒我們只要記住這個(gè)字符串最終會(huì)調(diào)用到Ajax這個(gè)類(lèi)的toUpperCase方法就可以。而parameter的值就代表了調(diào)用toUpperCase方法傳入的參數(shù)值。 再設(shè)置Button控件的相關(guān)屬性: 屬性 值 action toUpperCaseAction 定義action屬性的效果是，單擊按鈕的時(shí)候自動(dòng)觸發(fā)toUpperCaseAction。我們可以注意到Button上的顯示內(nèi)容我們都沒(méi)有定義，該處根據(jù)Action的綁定規(guī)則它會(huì)自動(dòng)顯示action對(duì)應(yīng)的caption，而toUpperCaseAction中我們已經(jīng)定義了caption了。 另外，當(dāng)Ajax這個(gè)類(lèi)的toUpperCase方法執(zhí)行結(jié)束之后，我們希望在瀏覽器中看到最終的返回值，那么我們定義toUpperCaseAction的onSuccess事件: 輸入如下代碼：

dorado.MessageBox.alert(self.get("returnValue"));

在action的onSuccess事件中,self代表了action本身,returnValue表示Ajax調(diào)用結(jié)束后Java層返回的結(jié)果。該處關(guān)于JS代碼的寫(xiě)法后面我們會(huì)有專(zhuān)門(mén)的章節(jié)進(jìn)行說(shuō)明，此處我們記住self.get("returnValue")的含義就是獲得ajax調(diào)用返回的結(jié)果就可以。 這樣我們就完成了第一個(gè)按鈕的開(kāi)發(fā)，在瀏覽器中打開(kāi)這個(gè)頁(yè)面(http://localhost:8080/sample-center/com.bstek.dorado.sample.training.Ajax.d)查看效果：

multiply

下面我們接著做multiply的ajax調(diào)用，同樣我們?cè)偬砑右粋€(gè)AjaxAction和一個(gè)Button。 我們?cè)O(shè)置AjaxAction控件的相關(guān)屬性： 通過(guò)toUpperCase實(shí)例的制作，我們知道了"ajax#multiply"，它最終代表的含義是調(diào)用Ajax這個(gè)類(lèi)的multiply方法。executingMessage是用于在Ajax調(diào)用時(shí)給客戶(hù)一個(gè)提示信息,在Ajax調(diào)用結(jié)束之后會(huì)自動(dòng)消失,這樣對(duì)于某些耗時(shí)的ajax調(diào)用來(lái)說(shuō)這種顯示效果更為人性化。 再設(shè)置Button控件的相關(guān)屬性: Ajax乘法 定義action屬性的效果是，單擊按鈕的時(shí)候自動(dòng)觸發(fā)toUpperCaseAction。另外與toUpperCase范例不同,這次我們直接在Button上定義caption，其實(shí)這幾種定義caption的方式都可行，根據(jù)實(shí)際場(chǎng)景靈活運(yùn)用就是了。例如我們希望動(dòng)態(tài)改變按鈕綁定的action時(shí),我們就可以考慮將caption定義在action中。 另外，當(dāng)Ajax這個(gè)類(lèi)的multiply方法被調(diào)用時(shí)需要兩個(gè)參數(shù)，我們希望給用戶(hù)一個(gè)自定義輸入?yún)?shù)的機(jī)會(huì)，而不是toUpperCase用例中直接定義在parameter屬性中，如下圖: 則我們給button1的onClick代碼中添加如下的JS:

      var action = view.get("#action1");
    dorado.MessageBox.prompt("Please input two numbers here",{
        defaultText: "3,5",
        callback: function(text){
            var nums = text.split(",");
            var parameter = {
                num1: nums[0],
                num2: nums[1]
            };
            action.set("parameter", parameter).execute(function(result){
                dorado.MessageBox.alert(nums[0] + " * "+ nums[1] + " = " + result);
            });
        }
    });

其中我們通過(guò)Dorado提供的MessageBox做用戶(hù)輸入界面,MessageBox的具體用法參考:http://dorado.bstek.com/jsdoc/class.html?symbol=dorado.MessageBox. 我們將用戶(hù)輸入的值利用js的split拆分為兩個(gè)數(shù)字，num1和num2封裝到parameter中(可以想象成一個(gè)Map)，并將這個(gè)parameter設(shè)置給action去調(diào)用服務(wù)器端的multiply方法。 我們回過(guò)頭在看看multiply方法：

@Expose
public int multiply(int num1, int num2) {
    return num1 * num2;
}

當(dāng)map對(duì)象傳到Ajax類(lèi)的時(shí)候，發(fā)現(xiàn)沒(méi)有匹配的方法，這個(gè)時(shí)候Dorado的自動(dòng)方法適配機(jī)制會(huì)自動(dòng)的將map拆為num1和num2，從而調(diào)用到multiply方法。有關(guān)自動(dòng)方法適配我們后面還會(huì)再講。multiply做的工作就是將num1和num2相乘，并將結(jié)果返回。我們?cè)贐utton的onClick代碼中利用了一個(gè)回調(diào)函數(shù)將計(jì)算結(jié)果顯示出來(lái)(回調(diào)函數(shù)用法會(huì)在后面的JavaScript基礎(chǔ)中進(jìn)一步說(shuō)明)。 這樣我們就完成了第二個(gè)按鈕的開(kāi)發(fā)，在瀏覽器中打開(kāi)這個(gè)頁(yè)面(http://localhost:8080/sample-center/com.bstek.dorado.sample.training.Ajax.d)查看效果：

getSystemInfo

下面我們做getSystemInfo的ajax調(diào)用，同樣我們?cè)偬砑右粋€(gè)AjaxAction和一個(gè)Button。 我們?cè)O(shè)置AjaxAction控件的相關(guān)屬性： ajax#getSystemInfo 通過(guò)toUpperCase實(shí)例的制作，我們知道了"ajax#getSystemInfo"，它最終代表的含義是調(diào)用Ajax這個(gè)類(lèi)的getSystemInfo方法。 再設(shè)置Button控件的相關(guān)屬性: 定義action屬性的效果是，單擊按鈕的時(shí)候自動(dòng)觸發(fā)getSystemInfo。 另外，當(dāng)Ajax這個(gè)類(lèi)的getSystemInfo方法調(diào)用成功后返回的是一個(gè)Properties對(duì)象,這也是一個(gè)Map對(duì)象，我們希望在瀏覽器中看到最終的返回值，那么我們?cè)贏jax.js中定義getSystemInfoAction的onSuccess事件:

    var info = self.get("returnValue");
    dorado.MessageBox.alert("product : " + info.product + "\n" +
        "vendor : " + info.vendor + "\n" +
        "version : " + info.version);

在action的onSuccess事件中,self代表了action本身,returnValue表示Ajax調(diào)用結(jié)束后Java層返回的結(jié)果。由于返回的是一個(gè)Map對(duì)象，在瀏覽器中接受的時(shí)候會(huì)自動(dòng)轉(zhuǎn)為JSON對(duì)象，這樣我們就可以直接通過(guò)info.product,info.veneor,info.version范圍map中的內(nèi)容。 這樣我們就完成了第三個(gè)按鈕的開(kāi)發(fā)，在瀏覽器中打開(kāi)這個(gè)頁(yè)面(http://localhost:8080/sample-center/com.bstek.dorado.sample.training.Ajax.d)查看效果：