Silverlight中通過Javascript的XmlHttp調用服務器端內容的同步與異步問題

  在做Silverlight開發時,經常需要以調用WebService的形式與服務器端進行交互。例如在Silverlight嵌入到SharePoint的項目中,常需要Silverlight調用SharePoint的WebService來與SharePoint交換信息。如果直接在Silverlight中通過C#的webclient訪問WebService將涉及權限問題,需要將'clientaccesspolicy.xml'部署到服務器上對應的位置(參考《 Silverlight 2beta2 調用 SharePoint的WebService......),所以一般採用javascript的方式用xmlhttp向服務器發送請求。

  javascript的XmlHttp發送請求時有兩種方式:同步發送和異步發送。如果採用同步發送的方式,xmlhttp.send會阻塞整個線程,導致包括Silverlight在內的頁面處於停滯等待狀態,直到xmlhttp得到服務器端的反饋。而採用異步發送的方式,則可避免線程被阻塞。

  這裏我們用一個簡單的例子來說明這個問題(示例在Silverlight 2.0 RTM環境下調試通過,源代碼可在這裏下載)。

  在Silverlight的Page.xmal頁面上放置兩個按鈕分別同步和異步獲取服務器端ServerSimulationPage.aspx頁面的內容。爲模擬實際環境,在ServerSimulationPage.aspx頁面加載時調用了一個sleep函數延時3秒,並且返回的頁面內容包含了瞬時時間以便查看頁面內容是否更新過。我們期望在用戶點擊按鈕時就顯示一個提示用戶等待的信息,直到成功得到服務器端的頁面內容後再關閉提示用戶等待的信息。

  當點“Get Page Content from Server(Sync Mode)”按鈕時,Silverlight調用Javascript函數getPageContentSync:

 

// 同步方式獲取
private void btnGetPageContentSync_Click(object sender, RoutedEventArgs e)
{
     OpenTipInfo();

     // 調用Javascript 以便利用XmlHttp 同步獲取服務器端數據
     object objReturn = HtmlPage.Window.Invoke("getPageContentSync", "ServerSimulationPage.aspx");
     if (objReturn != null)
         GetPageContentSuccess(objReturn.ToString());
}

 

// 以“同步”方式從服務器獲取頁面內容
        function getPageContentSync(url) {
            var xmlhttp = getXmlHttp();
            if (xmlhttp) {
                xmlhttp.open("GET", url, false);     //false表示同步調用,會阻塞進程,導致頁面等待,即提示信息不及時顯示出來
                xmlhttp.send();
                return xmlhttp.responseText;         //同步調用,可以返回結果。這裏最好要判斷一下返回的狀態 xmlhttp.status
            }
        }

 

  由於xmlhttp.open的最後一個參數是false,表示xmlhttp以同步的方式向服務器發送請求。當xmlhttp.send()運行後,線程就在此等待,直到服務器端運行完畢並返回結果給xmlhttp,然後再將xmlhttp.responseText的內容返回給Silverlight。這個過程中雖然在Silverlight中運行“  object objReturn = HtmlPage.Window.Invoke("getPageContentSync", "ServerSimulationPage.aspx"); ” 之前已經OpenTipInfo() 了,但由於線程被xmlhttp.send阻塞,所以整個過程用戶感覺在獲取到ServerSimulationPage.aspx頁面內容之前Silverlight頁面一直停滯在那裏,並且似乎看不到任何提示用戶等待的信息。

 

  但如果採用異步方式則能解決這一問題。當點擊按鈕“Get Page Content from Server(Async Mode)”時,響應Silverlight事件:

 

// 異步方式獲取
        private void btnGetPageContentAsync_Click(object sender, RoutedEventArgs e)
        {
            OpenTipInfo();

            // 調用Javascript 以便利用XmlHttp 異步獲取服務器端數據
            HtmlPage.Window.Invoke("getPageContentAsync", "ServerSimulationPage.aspx");
        }

 

  該事件中,首先OpenTipInfo()顯示提示用戶等待信息,然後調用javascript函數getPageContentAsync,但在運行“HtmlPage.Window.Invoke("getPageContentAsync", "ServerSimulationPage.aspx");”時並不期待其立即返回結果。在javascript的getPageContentAsync函數裏異步方式獲取服務器端頁面內容:

 

// 以“異步”方式獲取服務器端頁面內容
        function getPageContentAsync(url) {
            var xmlhttp = getXmlHttp();
            if (xmlhttp) {
                xmlhttp.onreadystatechange = function() { doStateChange.apply(xmlhttp) }    //當返回狀態改變時,通知函數doStateChange
                xmlhttp.open("GET", url, true);     //true表示異步調用,false表示同步調用。如果爲false,則會阻塞進程,導致頁面等待,即提示信息不及時顯示出來
                xmlhttp.send();
            }
        }

        // 當XmlHttp的返回狀態改變時,進行相應處理
        function doStateChange()
        {
            if (this.readyState == 4)
            {
                if (this.status == 200)     //調用成功,正確獲得了返回信息
                {
                    var ctl = document.getElementById("silverlightControl");
                    if (ctl)
                        ctl.content.Page.GetPageContentSuccess(this.responseText);
                }
                else                        //調用失敗,未返回正確的頁面信息
                {                   
                    var ctl = document.getElementById("silverlightControl");
                    if (ctl)
                        ctl.content.Page.GetPageContentFailed();
                }
            }
        }

 

  這裏函數getPageContentAsync中同樣利用xmlhttp向服務器發送請求,但是以異步的方式發送請求“xmlhttp.open("GET", url, true);  ”,並且xmlhttp.send()後並不期望馬上得到返回結果,所以getPageContentAsync函數沒有返回任何值。但在我們監聽了xmlhttp.onreadystatechange事件:

                        xmlhttp.onreadystatechange = function() { doStateChange.apply(xmlhttp) } 

  當xmlhttp接收到服務器端的反饋時就立即通知doStateChange函數,在doStateChange函數裏我們可以判斷是否服務器端已經運行完畢並返回了正確結果。當得知已經成功獲取服務器端的頁面內容後,就立即調用Silverlight裏的相應事件,通知Silverlight做相應處理;如果得知獲取服務器端內容失敗,也要立即通知Silverlight做相應處理。

  這裏涉及到Javascript調用Silverlight的函數的問題,所以在Silverlight裏必須暴露出相應的函數供Javascript調用:

 

// 獲取頁面內容成功 此方法暴露給Javascript調用
        [ScriptableMember]
        public void GetPageContentSuccess( string pageContent)
        {
            txtContent.Text = pageContent;
            CloseTipInfo();
            HtmlPage.Window.Alert("Get page content successfully!");
        }

        // 獲取頁面內容失敗 此方法暴露給Javascript調用
        [ScriptableMember]
        public void GetPageContentFailed()
        {
            CloseTipInfo();
            HtmlPage.Window.Alert("SORRY! Get page content failed!");
        }

  當然,xmlhttp調用其它的WebService也是類似原理。

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章