由ASP.NET所謂前臺調用後臺、後臺調用前臺想到HTTP——實踐篇（一）

在由ASP.NET所謂前臺調用後臺、後臺調用前臺想到HTTP——理論篇中描述了一下ASP.NET新手的三個問題及相關的HTTP協議內容，發現了爲何.NET程序員會問這些問題而Java程序員不多（畢業前及大四實習都是在用Java），爲了防止成爲口水貼，提早聲明一下，本文不是在說.NET與Java的優劣，糾結於此問題的朋友可能不適合看下面內容。

固然不是由於Java程序員不用ASP.NET控件，我以爲.NET程序員很大一部分就輸在.NET平臺尤爲是Visual Studio的易用性上了，根本無需瞭解HTTP協議，就能夠經過拖拽控件作出網頁，也不用瞭解表單提交等最基本知識就能夠作到頁面和服務器通訊，甚至不知道客戶端與服務器在通訊。

Java就不一樣了，IDE比較不智能，沒有拖來拖去的控件，甚至Java初學者想寫出「Hello World」都得花上一天時間研究環境變量配置，不瞭解表單和post就取不到input的值，想作網站首先得了解Tomcat等服務器。沒有什麼便利性可言的Java在強迫咱們學習，事情必須明白了，才能作出來，而.NET把這些都封裝好了，拿來就能用，不少在校大學生沒學過Java的話都不知道ASP.NET Web Application怎麼在脫離Visual Studio的狀況下運行，更不用說簡單的IIS配置了，根本不知服務器爲什麼物，被.NET寵壞了。

balabala說了這麼多廢話，意思就是.NET在以其易用性溺愛咱們，.NET程序員不能一直沉浸在我把XXX給作出來了就很知足的狀態，而得有一種刨根問底的精神去鑽研其原理，相信已經這麼作的同窗在看到網上沸沸揚揚的.NET與Java優劣之爭的時候都會報之於呵呵。言歸正傳，先看看理論篇中最後提煉的幾個問題。

服務器端如何影響客戶端元素與行爲

這個問題通俗講就是，怎麼在服務器端修改頁面DIV或者「調用」JavaScript。若是瞭解了理論篇中的HTTP協議的講解就應該知道服務器修改頁面DIV或者調用JavaScript是不可能的，服務器只能給瀏覽器一個全新的頁面（不考慮Ajax）。那麼是否是這個問題就無解了呢？確實是！可是，然而能夠利用服務器給瀏覽器全新頁面這一特性來達到好像服務器修改了客戶端頁面的效果。

來嘗試一下在」服務器「端修改頁面上的一個DIV爲span

<form id="form1" runat="server">
        <div id="test">改我</div>
        <div>
            <asp:Button ID="btnModify" runat="server" Text="Modufy" OnClick="btnModify_Click" />
        </div>
    </form>

對於這種需求通常有兩種思路：

思路一

把須要更改的地方作成服務器端控件，這樣就能夠在服務器端使用規則，把想要的效果修改到全新的HTML文本中，而後傳給瀏覽器，所以能夠這樣把頁面改動一下,把欲改動部分用服務器端控件表示

<div id="test">
        <asp:Literal ID="ltrNew" runat="server">改我</asp:Literal></div>
    <div>
        <asp:Button ID="btnModify" runat="server" Text="Modufy" OnClick="btnModify_Click" />
    </div>

這樣就能夠在Button的Click事件處理程序中修改DIV中的文字了

protected void btnModify_Click(object sender, EventArgs e)
        {
            ltrNew.Text = "改好了";
        }

看到這裏可能剛入門ASP.NET的同窗都要問了：您這是.NET科普嘛？這樣確是比較弱，雖然經常使用但不少和頁面交互的地方須要JavaScript來處理，並非簡單的改變文字就能夠作到的，這時候就要換換思路了

思路二

原本應該客戶端作的事情就應該讓客戶端來作。拿上面的例子，可能頁面上已經有JavaScript方法來處理修改DIV內文字了，欠的就是服務器端調用了。

function modifyDivLiteral(newliteral) {
            //..............
            //一系列不是服務器改文字能處理的操做，好比建立新的Array、改變Div背景顏色，調用其餘JavaScript函數
            //............
            document.getElementById('test').innerHTML = newliteral;
        }

你看這個函數要作的事情至關複雜，沒發經過服務器改文字作出來，怎麼辦！貌似服務器調用JavaScript方法是個不錯的路子，但前面的理論已經告訴了咱們不可能，服務器給瀏覽器的時一個新的HTML文本，又不是調用函數的句柄，可是若是咱們往新的HTML頁面裏添加的調用此方法的語句不就實現了嗎？來看看咱們怎麼實現向新的HTML文本中添加調用JavaScript的語句。

先在頁面上添加一個literal控件用來存放新追加的調用JavaScript函數語句，至於放在最後是由於執行此語句的時候咱們須要頁面上的元素已經準備好，固然也能夠經過jQuery的ready實現

<form id="form1" runat="server">
    <div id="test">
        改我</div>
    <div>
        <asp:Button ID="btnModify" runat="server" Text="Modufy" OnClick="btnModify_Click" />
    </div>
    </form>
    <script type="text/javascript">
        function modifyDivLiteral(newliteral) {
            //..............
            //一系列不是服務器改文字能處理的操做，好比建立新的Array、改變Div背景顏色，調用其餘JavaScript函數
            //............
            document.getElementById('test').innerHTML = newliteral;
        }
    </script>
    <script type="text/javascript">
        <asp:Literal ID="ltrScript" runat="server"></asp:Literal>
    </script>

這時候事情就簡單了，能夠像剛纔那樣修改文字同樣修改Literal內容，區別只是咱們須要添加的文字是JavaScript語句

protected void btnModify_Click(object sender, EventArgs e)
        {
            this.ltrScript.Text = "modifyDivLiteral('改好了');";
        }

這樣點擊按鈕後效果是這樣的，能夠看到Literal部分已經變成了調用函數的語句，這樣DIV內容就被修改了，咱們就從效果上實現的服務器「調用」JavaScript

      

思路二增強版

效果是有了但是這樣寫好醜陋啊，又得本身加個Literal，搞笑的是還得使用一對script標籤包起來。

確實是，其實還有其餘方法，好比調用Response.Write、Page.Controls.Append啊等等，大同小異，這樣寫最容易理解，一旦咱們知道爲何這樣就可讓服務器「調用」JavaScript後，就能夠用.NET貼心的方法來作此事了，.NET團隊已經想到了開發者會有這樣的需求，特地設計了幾個內置函數解決服務器端向頁面註冊腳本的問題。

Page.ClientScript.RegisterClientScriptBlock

把腳本註冊到頁面頂部

Page.ClientScript.RegisterStartupScript

把腳本註冊到頁面底部

Page.ClientScript.RegisterClientScriptInclude

向頁面註冊腳本文件

關於這Sanger方法具體解釋及用法能夠去網上搜一下資料，前兩個的區別是把腳本註冊到頁面的什麼位置，第三個能夠把一個腳本文件引入頁面，這個例子中應該使用Page.ClientScript.RegisterStartupScript，這時候醜陋的包裝就能夠刪去了

<script type="text/javascript">
        <asp:Literal ID="ltrScript" runat="server"></asp:Literal>
    </script>

正想截屏呢，發現犯了一個錯誤，這個方法把腳本註冊到form的底端，而不是body，因此頁面也要稍微修改一下，把modifyDivLiteral方法往前放一放

<form id="form1" runat="server">
    <div id="test">
        改我</div>
    <div>
        <asp:Button ID="btnModify" runat="server" Text="Modufy" OnClick="btnModify_Click" />
    </div>
     <script type="text/javascript">
         function modifyDivLiteral(newliteral) {
             //..............
             //一系列不是服務器改文字能處理的操做，好比建立新的Array、改變Div背景顏色，調用其餘JavaScript函數
             //............
             document.getElementById('test').innerHTML = newliteral;
         }
    </script>
    </form>

這樣最後生成的頁面是這樣的，是否是達到預期目的了呢

未完待續

總而言之，因爲瀏覽器並非把頁面全文發給服務器，也就是說頁面上的DIV及JavaScript語句並無發送到服務器，在服務器端想修改DIV或者調用JavaScript是不可能的，要麼修改頁面源碼，讓瀏覽器加載新的內容，達到更新目的，要麼就像預定，或者點菜，向頁面注入指令，讓頁面在瀏覽器端作某事。

原本想一篇說完呢，沒想到最簡單的問題內容就這麼多，只好分篇說了，欲知客戶端如何」調用「服務器端方法，且聽下回分解