I can 前端-06 静态网页到动态网页的过渡
2017-12-04 01:07
239 查看
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); }
控件+事件
1. 前端发送数据
(1) 创建Web窗体
(2) 绘制界面
2. 后端接收数据
(1) 创建登录按钮的事件
(2) 获取前端输入的值
发现与反思
首先,获取前端输入的值,发现很轻松,不需要Request……,服务器后台可以直接操控前台的UI对象,是因为前台每个UI对象带有属性runat = "sever"
其次,点击登录后,返回到前端,URL没变,UI的效果还在。这是为什么呢?
从图中可以分析出两点。
第一,我们使用这样控件的方式,解析的结果仍然是表单,仍然具备提交到后台的能力,从解析的结果来看,服务器控件(工具栏的控件)就是封装了HTML控件。
第二,解析后的每个控件后面都有隐藏的值(红色部分),隐藏于封装了返回的HTML,所以UI效果效果仍然在。意思是这样的开发方式,我们只需要关注我们自己需要的部分,ASP.NET会封装HTML到替换的地方。
总结ASP.NET的web窗体这样的开发方式
在开发模式上,做到了前后台分离
在一般应用程序的开发方式中,HTML部分和ashx是两个部分,保留HTML效果,ashx文件返回前台代码。
在开发体验上,前后台更容易传递
相关文章推荐
- 利用XMLHTTP将动态网页生成静态网页
- 【转】比较经典的介绍静态链接和动态链接网页对于搜索收录的文章
- 静态网页、伪静态网页和动态网页的区别于相似
- 前端探秘-静态页面与动态页面(静态网站与动态网站)
- 静态网页VS动态网页
- jsp实现将动态网页转换成静态页面的方法
- 静态网页与动态网页
- 在动态页面里象静态页面一样控制整个网页的缓存和更新
- 静态网页和动态网页的区别
- 利用python抓取网页各种类型内容(静态、动态)
- 静态网页与动态网页
- 通用PHP动态生成静态HTML网页的代码
- 前端探秘-静态页面与动态页面(静态网站与动态网站)
- 如何用Python,C#等语言去实现抓取静态网页+抓取动态网页+模拟登陆网站
- [原创]动态网页和静态网页
- 静态网页与动态网页的总结
- 静态网页与动态网页的区别
- 通用PHP动态生成静态HTML网页的代码
- 动态网页搜索与静态网页搜索
- 不懂程序的人如何理解网页的动态与静态之的区别