由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——理论篇

时间：2022-03-12 01:37:03

工作两年多了，我会经常尝试给公司小伙伴儿们解决一些问题，几个月下来我发现初入公司的小朋友最爱问的问题就三个

1. 我想前台调用后台的XXX方法怎么弄啊？

2. 我想后台调用前台的XXX JavaScript方法怎么弄啊？

3. 怎么用JavaScript找到/创建/修改XXX这个服务器端控件啊？

每次我会跟小朋友分析一下为什么会有如此荒诞不经的想法，然后说原来你做XXX啊，那你应该这样，可发现这种模式太失败了，因为隔几天我又会听到小朋友还是有类似的疑惑。

我决定以后再有谁问这个问题，我就让谁给我讲讲HTTP协议，几次过后效果非凡啊，看看这两个问题和HTTP协议有什么关系吧

HTTP协议

HTTP协议即超文本传输协议 (HTTP-Hypertext transfer protocol) 是分布式，协作式，超媒体系统应用之间的通信协议。是万维网（world wide web）交换信息的基础。是一种详细规定了浏览器和万维网服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。

这是从百度上抄来的定义，感觉味同嚼蜡，反正我要是问人什么是HTTP，要是这么回答我，我肯定得急，所以还有

HTTP协议允许将超文本标记语言 (HTML) 文档从 Web 服务器传送到 Web 浏览器。HTML 是一种用于创建文档的标记语言，这些文档包含到相关信息的链接。您可以单击一个链接来访问其它文档、图像或多媒体对象，并获得关于链接项的附加信息。

还是不明白，看看HTTP的请求-响应模型就清楚了

HTTP协议规定的交互很简单，客户端向服务器发送包含着信息的请求（绝逼不是整个HTML页面），服务器接到请求后，根据请求信息生成响应（什么响应都可能，多数是HTML页面文本），然后把响应发给浏览器（如果响应是HTML页面的话，浏览器就加载这个新页面了）

由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——理论篇

HTTP的请求-响应模型非常简单，可是初入门的时候我们会误会它很深

浏览器到底向服务器请求什么了

请求不是整个HTML页面，小朋友们在ASP.NET的codeBehind中经常试图去Request对象中找页面的某个DIV，认为请求就是整个HTML页面，理由也很充分，我能够找到服务器端控件，怎么就找不到HTML控件呢。访问百度首页一下看看浏览器究竟请求了什么

当我们在浏览器地址栏输入uri回车或者页面form提交，浏览器会把请求打成包，HTTP请求包(GET/POST等请求方法)由三个部分构成,

<request-line>
<headers>
<blank line>
[<request-body>]

request-line：俗称请求行，类似于这样 Get / HTTP /1.0，用来说明请求类型、要访问的资源路径（/ 表示跟路径）以及使用的HTTP版本。

headers: 也就是我们常说的HTTP Headers，访问百度首页的时候是一个这样的东东

由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——理论篇

需要注意的是heasers中包括了该域下的cookie

blank line：这就是一个空行，还是必须的

request-body：这个在post请求时有用，是页面表单元素的name和value，也就是在Resquest.Forms中能取到的内容，在百度上搜索得到，request body是这样的

由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——理论篇

是的，HTTP 请求包中就这些内容，没有什么div啊，什么服务器端控件啊什么的了

为什么能在codeBehind中操作服务器端控件，页面上却不能用JavaScript来做

简单的说服务器端控件是服务器的，服务器并没有把这个给客户端，给客户端的只是服务器端控件render的html文本，所以服务器端找到服务器端控件（你看人家都叫服务器端控件了），客户端找不到。看起来很高端深奥，实际很简单，看看服务器交给浏览器的是什么，和Request格式类似，Response格式如下

<status-line>
<headers>
<blank line>
[<response-body>]

status-line：表示请求的状态码，也就是我们常见的200、301、404、500神马的

headers：一些响应的数据，还是上面例子，在百度上搜索得到，response headers是这样的

由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——理论篇

content-type是不是很熟悉？值得注意的是response headers中同样包含cookie

blank-line:仍旧是不可或缺的空白行

response-body：响应内容，访问百度首页response body 大概这样，其实也就是百度首页的HTML代码

由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——理论篇

也就是说，也就是说response body在一般情况下就是得到的就请求页面的HTML，浏览器接收到response后会按照response body重新加载渲染页面内容。写过Web Control的同学肯定知道，服务器端控件render成什么了

看一个最简单的页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FrontBehind.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:Button ID="btnServer" runat="server" Text="Server" OnClick="btnServer_Click" />

    </div>

    </form>

</body>

</html>

页面上只有一个服务器端的控件（不要太计较），看看生成的页面内容

由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——理论篇

服务器端的控件Button经过处理后交给客户端时已经变成了一个 submit类型的input，页面上通过JavaScript当然找不到这个服务器端控件了，有兴趣同学可以看看Web Control的render control方法，所有的Web Control在Page render的时候都会调用此方法，将服务器端控件按照自己规则render成浏览器认识的HTML，然后放到Resoponse中。

浏览器从噢乖服务器得到的是全新的HTML文本（不考虑Ajax），没有其它服务器控件神马的。

在编码的时候的页面和浏览器拿到的页面有什么关系

可能偶同学会对上面的理论有疑问，我们在编程的时候写的页面，上面有很多服务器端控件，和最终浏览器展示的页面有什么关系？！这就需要我们讲讲动态网页的前世今生。

最开始的时候页面全都是静态的HTML文本，浏览器做的事情就是告诉服务器我要哪个页面，服务器传给你这个页面，就像张三家开了个砖窑，你需要了就会吼一嗓子，张三，给我块砖！然后张三扔给你。

但是这样好单调，有时候页面内容相当有规律，但是页面是静态的就得准被很多页面，也没法做到和用户交互，于是产生了ASP等服务器脚本语言，可以根据用户参数或者预设条件来修改页面部分内容，不再简单返回浏览器静态页面文件内容，而是根据规则生成HTML文本，然后返回给浏览器。

后来面向对象的普及及模块儿化编程等等思想的影响，有一些常用的规则，比如画出个日历啊我们可以写成一个单独的模块儿，然后通过指令使其嵌在页面内，用的时候写一条指令就可以了，这就是ASP.NET 中例如Button等的Web Control，也就是服务器端控件。

如果服务器判断出浏览器请求的是带有服务器脚本的页面的时候（一般根据拓展名或者Map关系判断），就会交给固定类型脚本的“解释器”去处理这些脚本，转换成HTML语句，然后返回给客户端。

所以浏览器呈现的页面是我们根据开发时候定义的规则，动态生成的HTML文本加载渲染的结果

HTTP工作流程

  1. 一次HTTP操作称为一个事务，其工作过程可分为四步：
    首先客户机与服务器需要建立连接。只要单击某个超级链接，HTTP的工作开始。

    建立连接后，客户机发送一个请求给服务器，请求方式的格式为：统一资源标识符（URL）、协议版本号，后边是MIME信息包括请求修饰符、客户机信息和可能的内容。

    服务器接到请求后，给予相应的响应信息，其格式为一个状态行，包括信息的协议版本号、一个成功或错误的代码，后边是MIME信息包括服务器信息、实体信息和可能的内容。

    客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上，然后客户机与服务器断开连接。

HTTP特点

通过上面的说明可以看出HTTP协议有几个特征

1.HTTP协议永远都是客户端发起请求，服务器回送响应。这样就限制了使用HTTP协议，无法实现在客户端没有发起请求的时候，服务器将消息推送给客户端。必须是客户端给服务器要，而不能服务器主动给客户端。

2.HTTP协议是一个无状态的协议，同一个客户端的这次请求和上次请求是没有对应关系。也就是说你连续两次访问百度，这两次之间没有什么关系（不考虑缓存），不会像你去亲戚家串门，上次去了，这次就认识你了。要想让它们有关系我们注意到request header和resonse header都有cookie，Session等客户端状态维护就是基于此实现的。

3.在请求时并不是页面所有内容都被发往服务器

4.在客户端就已经没有什么服务器端控件、方法、属性了，只有HTML文本

几个问题

总而言之有一句需要注意：HTTP协议并不是浏览器把整个页面发给服务器，然后让服务器做少许改动传回给浏览器，而是浏览器发送少量数据参数传给服务器，服务器根据特定页面规则和浏览器参数生成全新页面传回给浏览器，浏览器更新加载这个全新页面（不考虑Ajax）。浏览器呈现的页面和服务器之间并不能通过所谓调用来交互。

理论知识就这么多，下一篇中就要即使一下开头提的三个问题了，修改罗列一下

1.服务器端如何影响客户端元素与行为

2.客户端如何”调用“服务器端方法

3.JavaScript如何操作服务器控件render的HTML，以实现交互

PS：如果还有同学对HTTP协议有疑惑，可以看看之前为了跟小伙儿伴们将HTTP而写的一个课件

相关文章