I can 前端-06 静态网页到动态网页的过渡

来源：互联网发布：阿里云虚拟编辑：程序博客网时间：2024/06/01 08:25

B/S运行原理

这里写图片描述

ASP.NET

前面的总结学习中，不论是HTML、CSS还是JavaScript，是在浏览器端解析、显示，属于前端技术。没有数据的贮存的交互，只能称之为是静态的网页。

数据贮存、复杂逻辑处理还是必须依赖于后端，也就是所谓的服务器端，也叫服务器技术，例如PHP。ASP.NET也是其中一种，架构于.NET平台上，以C#或VB为开发语言，用于建设Web应用程序，运行在IIS中。

IIS是微软的服务器，用来运行Web应用程序的服务器。

数据传递

前后端合作无非是数据的传递。

前端将用户的输入、用户点击了什么这样的请求传到后端
后端想办法获取到用户的输入、用户的操作
后端按照业务处理后，将新的数据或指令返回到前端
前端接收到后端的数据，处理操作

一般处理程序

1. 前端发送数据

(1) 输入请求输入，点击提交

<form action="LoginHandler.ashx"  method="post">账号：<input type = "text" name="uname" />密码：<input type = "text" name="upwd" /></form>

(2) form中的信息会被自动封装在一个叫Request的对象中

这里写图片描述

(3) form的action将Request对象通过http传递到LoginHandler.ashx

2. 后端接收数据

(1) ashx文件叫一般应用程序

这里写图片描述

(2) 继承了IHttpHandler

有一个方法ProcessReqyest，参数HttpContext上下文context，请求与响应通过Http来传递，因此这个上下文的能力是有处理请求与响应，这个对象有两个属性，Request和Response。Request就是前端发送来的数据，根据语法Params[“标签的name”]来获取value。

就有了

3. 后端返回数据

使用context的响应对象Response.Write(“输入内容：Real knowledge comes from practice”)返回到前端

4. 前端显示

返回后前端显示，发现在提交前后，有两处不同

【URL不同】
点击登录前，页面的URL是xx.html，提交后，经过一般应用程序处理后，页面的URL变成了xx.ashx

【界面渲染不同】
点击登录前，我们页面有html的各种界面效果，提交后，经过一般应用程序处理后，页面上只有一行文字：输入内容：Real knowledge comes from practice，没有了html。

5. 反思

解决界面渲染不同，有一种极其笨的方法，在后台处理完逻辑后，返回一个字符串，其中包含html代码。

但是，后台逻辑处理仅需要4行简单的代码，却需要做那么多额外的事情，对于复杂的页面……呵呵。

public void ProcessRequest(HttpContext context){    context.Response.ContentType = "text/html";    string num1 = context.Request.Params["num1"];    string num2 = context.Request.Params["num2"];    int result = Convert.ToInt32(num1) + Convert.ToInt32(num2);    string html = @"<!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><title>计算器</title></head>                        <body>                            <form action='Handlers/CalHandler.ashx' method='post'>                                <input type='text' name='num1' value=" + num1                         + @" />+<input type='text' name='num2' value=" + num2 +                         @" />=<input type='text' name='result' value=" + result +                         @" /><input name='btncal' type='submit' value='计算' />                            </form>                        </body></html>";       context.Response.Write(html);}