由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是不可能的，要么修改页面源码，让浏览器加载新的内容，达到更新目的，要么就像预定，或者点菜，向页面注入指令，让页面在浏览器端作某事。

原本想一篇说完呢，没想到最简单的问题内容就这么多，只好分篇说了，欲知客户端如何”调用“服务器端方法，且听下回分解