人妻第一页香蕉网,亚洲VA欧美VA人人爽成人影院,亚洲欧美日韩在线一区

下面我們通過實做AJAX對Dorado中的AJAX操作做一定的了解。頁面功能描述：首先我們設計一個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;
    }
}

頁面上放置三個按鈕:button1, button2, button3

單擊button1的時候，調用spring中的一個bean的方法toUpperCase,并將我們傳入的字符串轉換為大寫，并返回到前臺瀏覽器中;

單擊button2的時候，調用spring中的一個bean的方法multiply,并將我們傳入Map對象(含多個key)中的兩個數字相乘，并將計算結果返回到前臺瀏覽器中;

單擊button1的時候，調用spring中的一個bean的方法getSystemInfo，并將Java中的一個Map對象返回到前臺瀏覽器中;

如果完成了以上的三個功能，我們就很容易解決這些AJAX技術問題:

如何調用Spring中bean中指定的業(yè)務方法;
如何傳入一個單值給后臺，并將調用結果為單值的值如何返回到前臺;
如何傳入一個map到后臺，并將運算結果返回到前臺；
如何調用后臺的業(yè)務方法，并將計算結果為map的值返回到前臺；

掌握了以上基本技術之后，再將它們綜合應用一下，如JS中指定map參數，ajax調用結束之后返回map對象，并在前端使用。這樣我們就可以解決大部分的ajax調用問題了。

toUpperCase

下面我們還是在HelloWorld中實做這個范例,由于HelloWorld中已經定義過Ajax這個Bean了，我們不再重復定義，我們在com.bstek.dorado.sample.training目錄中新建一個名稱為Ajax的View,并在其中添加一個AjaxAction控件和Button控件，其中AjaxAction是Action的一種，我們在控件的基礎知識中簡單介紹過它代表了頁面上的一種動作，是不可見的對象。但是它可以被其他可見控件使用，例如單擊按鈕時觸發(fā)Action。我們設置AjaxAction控件的相關屬性：

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

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

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

multiply

下面我們接著做multiply的ajax調用，同樣我們再添加一個AjaxAction和一個Button。我們設置AjaxAction控件的相關屬性：通過toUpperCase實例的制作，我們知道了"ajax#multiply"，它最終代表的含義是調用Ajax這個類的multiply方法。executingMessage是用于在Ajax調用時給客戶一個提示信息,在Ajax調用結束之后會自動消失,這樣對于某些耗時的ajax調用來說這種顯示效果更為人性化。再設置Button控件的相關屬性: Ajax乘法定義action屬性的效果是，單擊按鈕的時候自動觸發(fā)toUpperCaseAction。另外與toUpperCase范例不同,這次我們直接在Button上定義caption，其實這幾種定義caption的方式都可行，根據實際場景靈活運用就是了。例如我們希望動態(tài)改變按鈕綁定的action時,我們就可以考慮將caption定義在action中。另外，當Ajax這個類的multiply方法被調用時需要兩個參數，我們希望給用戶一個自定義輸入參數的機會，而不是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);
            });
        }
    });

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

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

當map對象傳到Ajax類的時候，發(fā)現沒有匹配的方法，這個時候Dorado的自動方法適配機制會自動的將map拆為num1和num2，從而調用到multiply方法。有關自動方法適配我們后面還會再講。multiply做的工作就是將num1和num2相乘，并將結果返回。我們在Button的onClick代碼中利用了一個回調函數將計算結果顯示出來(回調函數用法會在后面的JavaScript基礎中進一步說明)。這樣我們就完成了第二個按鈕的開發(fā)，在瀏覽器中打開這個頁面(http://localhost:8080/sample-center/com.bstek.dorado.sample.training.Ajax.d)查看效果：

getSystemInfo

下面我們做getSystemInfo的ajax調用，同樣我們再添加一個AjaxAction和一個Button。我們設置AjaxAction控件的相關屬性： ajax#getSystemInfo 通過toUpperCase實例的制作，我們知道了"ajax#getSystemInfo"，它最終代表的含義是調用Ajax這個類的getSystemInfo方法。再設置Button控件的相關屬性: 定義action屬性的效果是，單擊按鈕的時候自動觸發(fā)getSystemInfo。另外，當Ajax這個類的getSystemInfo方法調用成功后返回的是一個Properties對象,這也是一個Map對象，我們希望在瀏覽器中看到最終的返回值，那么我們在Ajax.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調用結束后Java層返回的結果。由于返回的是一個Map對象，在瀏覽器中接受的時候會自動轉為JSON對象，這樣我們就可以直接通過info.product,info.veneor,info.version范圍map中的內容。這樣我們就完成了第三個按鈕的開發(fā)，在瀏覽器中打開這個頁面(http://localhost:8080/sample-center/com.bstek.dorado.sample.training.Ajax.d)查看效果：

實作Ajax

toUpperCase

multiply

getSystemInfo