97久久超碰国产精品…,久久无码捆绑免费精品视频,叼嘿视频免费看

下面我們通過實做AJAX對Dorado中的AJAX操作做一定的了解。頁面功能描述：首先我們設(shè)計一個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的時候，調(diào)用spring中的一個bean的方法toUpperCase,并將我們傳入的字符串轉(zhuǎn)換為大寫，并返回到前臺瀏覽器中;

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

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

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

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

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

toUpperCase

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

其中我們特別關(guān)注其service屬性,"ajax#toUpperCase"是一個服務(wù)名稱，根據(jù)Dorado中的服務(wù)定位表達式，它最終代表的含義是調(diào)用Ajax這個類的toUpperCase方法，至于服務(wù)表達式的概念我們后面再講，這兒我們只要記住這個字符串最終會調(diào)用到Ajax這個類的toUpperCase方法就可以。而parameter的值就代表了調(diào)用toUpperCase方法傳入的參數(shù)值。再設(shè)置Button控件的相關(guān)屬性: 屬性值 action toUpperCaseAction 定義action屬性的效果是，單擊按鈕的時候自動觸發(fā)toUpperCaseAction。我們可以注意到Button上的顯示內(nèi)容我們都沒有定義，該處根據(jù)Action的綁定規(guī)則它會自動顯示action對應(yīng)的caption，而toUpperCaseAction中我們已經(jīng)定義了caption了。另外，當(dāng)Ajax這個類的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代碼的寫法后面我們會有專門的章節(jié)進行說明，此處我們記住self.get("returnValue")的含義就是獲得ajax調(diào)用返回的結(jié)果就可以。這樣我們就完成了第一個按鈕的開發(fā)，在瀏覽器中打開這個頁面(http://localhost:8080/sample-center/com.bstek.dorado.sample.training.Ajax.d)查看效果：

multiply

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

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

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

getSystemInfo

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

實作Ajax

toUpperCase

multiply

getSystemInfo