Flex4:利用HttpService與ASP.NET傳輸JSON資料(登入狀態例)

開發環境：Flash Builder4,Vs2005

1、首先開啟FlashBuilde4,建立一個名為HttpService_Net_Json的flex項目

（圖1）

 

然後下一步,應用程式類型選擇web,應用程式伺服器類型選擇ASP.NET(2)

（圖2）

下一步，出現配置ASP.NET伺服器的設定。我們選擇使用IIS,web應用程式根目錄選擇你IIS下的某個網站所在檔案夾,web應用程式URL設定為你網站的本地地址。注意要確保你當前IIS中已經有此對應的網站。然後我們點擊"驗證配置",提示"web 應用程式根目錄和URL有效"（3）。OK。表示伺服器通了。

（圖3）

下一步我們選擇架構串連為"運行時共用庫(RSL)"(4),這樣可提高Flex發行版的flash載入速度,點擊完成。項目就建好了。

（圖4）

2、介面設計。這塊我不多敘述。跟VS開發環境類似。Flash Builder4內建了豐富的組件。我們將一些Lable、Button、LinkButton、Image、TextInput組件拖到工作區，同時Fb4支援CSS。我們建立一個Login.css的樣式表，對一些組件進行樣式控制。最後成型的介面如5。

 

3、提交資料。

我們要實現一個很簡單的邏輯-登入。當使用者輸入使用者名稱和密碼，按下"登陸"按鈕後，從伺服器端返回成功的標誌則跳轉到default.aspx頁面,否則彈出登陸失敗的相關訊息。

我們採用HtttService與Asp.NET進行互動，伺服器端返回JSON格式的資料，Flex用戶端進行解析後進行相關操作。

首先我們建立一個HttpService（放在delcarations之間）。設定id,提交到的URL,提交方式為POST,resultFormat為Text,返回結果後的任務分配給LoginHandle(event).

resutl屬性簡單點就是當返回結果後，通知用戶端要做的事情。我們分配給一個loginHandle(event)來處理，成功就跳轉，不成功就彈出提示。

mx:resquest是設定需要提交的資料。Flex傳遞的是成對出現的object.所以我們必須設定鍵和索引值。我們這裡只需提交userName和password。注意這裡<userName>和<password>節是區分大小寫,同時要與aspx.cs檔案中的Request中的key對應。比如這邊是userName,那麼cs檔案中就是Request['userName']。

代碼

    <fx:Declarations>
        <!-- 將非可視元素（例如服務、值對象）放在此處 -->
        <mx:HTTPService id="loginService" url="/ajax/login.aspx"  method="POST" resultFormat="text" result="loginHandle(event)">
            <mx:request xmlns=""> 
                <userName>{username.text}</userName> 
                <password>{password.text}</password> 
            </mx:request>            
        </mx:HTTPService>
    </fx:Declarations>

 

好了，一切都準備就緒了。那我們就開始點擊Id為LoginButton的按鈕來進行提交吧。切換到"設計"視圖，在click屬性裡，點擊旁邊的+

開發環境會自動給我們產生一個btnLogin_clickHandler(event)方法（）。是不是和visual studio很像呢？太方便了

我們再切換到“原始碼”視圖，看看發生了什麼變化。

button按鈕多了click屬性

<s:Button x="220" label="登陸" height="60" y="90" alpha="1.0" id="btnLogin" fontFamily="Arial" styleName="button"  click="btnLogin_clickHandler(event)"/>

 

  fx:script之間多了一個function  btnLogin_clcikHandler

<fx:Script>
<![CDATA[
protected function btnLogin_clickHandler(event:MouseEvent):void
{
}
]]>
</fx:Script

 

ok.完善一下這個方法。加入簡單的資料驗證，然後HttpService提交。

代碼

            protected function btnLogin_clickHandler(event:MouseEvent):void
            {
                // 提交登陸時
                if(username.text=="" || password.text==""){
                    Alert.show("使用者名稱或密碼不可為空","提示");return;
                }
                loginService.send();                
            }

 

 

4、處理返回資料。首先我們提交到的ajax/login.aspx.cs代碼如下。在此我們簡單化沒有串連資料庫，直接判斷userName是否為123,密碼是否為456。匹配則登陸成功

返回結果為諸如{"success":"0","msg":"使用者名稱錯誤"}這樣的嚴格的JSON格式,即屬性和值必須都有雙引號。為什麼要強調是嚴格的JSON格式呢，因為發現FLex的JSON庫對非嚴格的格式的JSON格式解析不成功。比如{"success":0,"msg":"使用者名稱錯誤"},{success:0,"msg":"使用者名稱錯誤"}。但是使用過ExtJS的朋友知道。這樣的格式ExtJS是能解析的。我用的JSON庫是

http://as3corelib.googlecode.com/files/as3corelib-.93.zip，裡的as3corelib.swc(下載後放到fb安裝目錄下的sdks\4.0.0\frameworks\libs)。不知是版本問題還是什麼。還請各位不吝賜教。

代碼

        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Clear();
            string name = Request.Form["userName"].ToString();
            string pwd = Request.Form["password"].ToString();
            if (name!="123")
            {
                Response.Write("{\"success\":\"0\",\"msg\":\"使用者名稱錯誤\"}");

            }
            else
            {
                if (name=="123" && pwd="456")
                {
                    Response.Write("{\"success\":\"1\",\"msg\":\"ok\"}");
                }
                else
                {
                    Response.Write("{\"success\":\"0\",\"msg\":\"密碼錯誤\"}");
                }
            }
            Response.End();
        }

 

 好了。伺服器端的JSON格式文主要組織好了。那麼flex用戶端該如何處理呢，看下面

先將返回的結果event.result轉化為String。然後對其進行JSON編碼。最後判斷success屬性

代碼

            protected function loginHandle(event:ResultEvent):void{
                var rawData:String=String(event.result);
                var obj:Object=JSON.decode(rawData,false);
                if(obj.success=="1"){
                    navigateToURL(new URLRequest("/default.aspx"),"_self");
                }
                else{
                    Alert.show(obj.msg,"提示");
                }
            }

 

OK,一切就緒。最後我們將flex匯出發行版本，以便在html或aspx檔案中調用產生的swf檔案。附上整個工程和aspx檔案。

/Files/showker/httpwebservice_net_json包.rar

login.aspx。登陸頁面載入swf.

ajax/login.aspx。處理邏輯返回JSON字串

HttpService_Net_Json。flex發行版本，login.aspx即調用裡面的swf檔案

HttpService_Net_Json_Project。flex項目。可在flash builder4中匯入進行編輯

 

本文轉自：http://www.cnblogs.com/showker/archive/2010/07/24/1784221.html