Web应用开发基本原理.docx

1、Web应用开发基本原理Web应用开发基本原理Web应用原理简介Web应用是基于HTTP协议的，Web应用也被常常被称为B/S(Browser/Server，浏览器/服务器)应用，这是针对传统的C/S(Client/Server，客户端/服务器模式)模式而言的。但是Web应用其实也是一种客户端/服务器的应用，只不过客户端使用的是统一协议的浏览器而已。 传统的C/S结构是两层结构，客户端直接和数据库连接，这种模式存在着非常大的安全隐患，目前已经逐步消亡了。但是作为3层结构(UIBizServerDB)的结构会长期和B/S结构共存。优点缺点B/S 具有分布性特点，可以随时随地进行业务处理。 业务扩展

2、简单方便，通过增加网页即可增加服务器功能。 维护简单方便，只需要改变网页，即可实现所有用户的同步更新。 开发简单，共享性强。 个性化特点明显降低，无法实现具有个性化的设计要求。 操作的习惯性是以鼠标为最基本的操作方式，无法满足快速操作的要求。 页面动态刷新，响应速度明显降低。 专用性打印输出难以实现，尤其对票据等打印，难以实现套打输出。 无法实现分页显示，给数据库访问造成较大的压力。 功能弱化，难以实现传统模式下的特殊功能要求。 界面组件扩展性差C/S 客户端实现与服务器的直接相连，没有中间环节，因此响应速度快。 客户操作界面设计灵活，容易满足客户自身的个性化要求。 界面组件丰富 客户端实现与

3、服务器常常是以长连接相连的，因此会降低并发数。 由于是针对性开发，因此缺少通用性的特点，业务变更或改变不够灵活，需要重新设计和开发，增加了维护和管理的难度，进一步的业务拓展困难较多。 需要专门的客户端安装程序，分布功能弱，不能够实现快速部署安装和配置。 兼容性差，对于不同的开发工具，相互之间很难兼容，具有较大的局限性。若采用不同工具，需要重新改写程序。 开发成本较高,需要具有一定专业水准的技术人员才能完成。Web基本交互图C/S模式的交互模型 客户端将数据传输给服务器 服务器将数据传递给客户端Web交互的基本模型： 浏览器将数据传输给服务器 服务器将显示和操作代码传递给浏览器浏览器的作用 数据

4、收集 传输协议 解释显示语言/解释脚本 响应用户操作Web传输协议网络堆栈对于Web开发主要是使用Web应用层和HTTP层的协议进行开发的，Web应用层具有多种协议：HTML：显示语言，使用统一的Marker Language解释客户端显示组件以及其摆放规则。DHTML：HTML的对象模型，主要和脚本引擎一起提供页面操作/动态页面显示等功能。CSS：界面风格描述，主要用于描述组件的特性。Javascript/VBScript：脚本引擎主要用于结合DHTML提供页面操作/动态页面显示等功能。VML：图形化建模语言。在除了物理层的以下各层，Web服务器一般都能为应用服务提供相应的接口：输入：链路层

5、：MAC地址 IP层：IP地址 TCP层：TCP端口 HTTP层：HTTP Headers(QueryString/Cookie /Accept-Type/Content-Type等) Web应用层：ViewState/ Form服务器端组件状态等输出： HTTP层：HTTP Headers(QueryString/Cookie/Accept-Type/Content-Type等) Web应用层：HTML/Javascript/HTC/xml/pic等 HTTP协议Http协议格式 URL格式:/?，主要由几部分构成：1. protocol在这里的协议是HTTP2. domain一般的格式是:

6、，如果没有端口号，HTTP缺省为803. virtual path虚拟路径，第一个字符是”/”，代表相对于服务器Web应用根的路径。4. queryString参数值，以:模式的多个域的组合，域和域之间以”&”分割。注意：这里的每个域的名称在QueryString中可能不是唯一的。 HTTP头主要是指:模式的多个域的组合，域和域之间以回车（rn）分割，如果出现两个回车，就证明HTTP头已经结束。注意：HTTP域在HTTP头中不是唯一的。 Form提交格式以:模式的多个域的组合，域和域之间以”&”分割。注意：这里的每个域的名称在QueryString中可能不是唯一的。 请求(Request) H

7、TTP/ method：主要有两种，一种是POST，一种是GET。通常POST会带Content-Length的HTTP头，用来传输数据。url：访问服务器的虚拟路径，比如我们在浏览器中输入”http:/localhost/webapp/webapp1.aspx”,那么虚拟路径是指”/webapp/webapp1.aspx”。version：当前HTTP协议是1.1版本content：如果HTTP头中存在Content-Length，则在content部分就会有对应长度的（字节为单位）内容。 回应(Response)HTTP/ version：当前HTTP协议是1.1版本statusCode：

8、服务器传回的访问的整数状态码，一般成功的是200或者201，跳转是302，服务器内部错误是500，请求错误是400，没有页面是404statusDescription：状态描述，针对状态码的描述信息content：和请求是一样的特殊的HTTP头 Content-Length放在HTTP头后的内容长度 Content-Type放在HTTP头后的内容类型以及字符集编码，常见内容类型有POST的类型一般是application/x-www-form-urlencodedXML类型的数据使用”text/xml”HTML类型的数据使用”text/html”javascript类型的数据使用”text/j

9、avascript” Content-Encoding编码规则，用于表明 Set-Cookie服务器传递的，专门用于设定浏览器cookie的(可以设定Cookie的名值对，有效路径，以及是否强制使用安全通道等) Cookie浏览器传递的，将服务器设定的cookie返回给服务器例子 用户在浏览器输入URL，访问该URL 用户在浏览器中输入内容，点击”提交”按钮，提交内容Web应用服务器传统的Web应用服务器仅仅是一个HTTP协议处理器，框架提供了基本的HTTP模型，包括QueryString/Form/HTTP头/Cookie/Session等，而ASP/JSP仅仅多了动态生成接口的方法（ASP

10、是解释执行的）。 以下我们将介绍基本对象模型Request客户端请求对象，一般最重要的属性/方法有： QueryString获取请求的QueryString，一般的都会将名值对做成Hashtable。但是由于QueryString的域名称不是唯一的，因此Hashtable中记录的实际上是Array。在.NET当中，使用缺省的 Form获取请求中Content(使用POST)的内容，一般的都会将名值对做成Hashtable。但是由于Form的域名称不是唯一的，因此Hashtable中记录的实际上是Array Params是将QueryString和Form合成一块。 Header获取请求的HTT

11、P头，一般的都会将名值对做成Hashtable。但是由于HTTP域名称不是唯一的，因此Hashtable中记录的实际上是Array Content-Type内容类型以及内容编码。 RequestStream将Content作为流来操作。Response服务器应答对象，一般最重要的属性/方式有： Header设定响应的HTTP头 Content-Type内容类型以及内容编码。 Write将数据写在输出的Buffer中，该输出Buffer以后将直接写在HTTP相应的Content部分。在传统的Web服务器中，可以支持Web网页的HTML和服务器脚本嵌套，实际上在该服务器页面编译之后，其结果就是Re

12、sponse.Write方法。例子：服务器脚本服务器代码生成后的程序 Response.Write(“”); Response.Write(1); Response.Write(“”);SessionSession主要作用是用于纪录会话的状态，其实质是服务端是一个记录名值对的Hashtable，其还有一个全局唯一标示的SessionID。服务器将这个Session保留在SessionTable中（SessionID和Session对的Hashtable）。在传输的时候服务器会将SessionID通过Cookie的方式传递给客户端，因此在客户端也可以看作服务器对象指针。执行过程如下： 服务器制作

13、Session，并将Session放在SessionTable（Hashtable）中，然后将SessionID打包到Cookie中传递给浏览器。如果服务器要记录状态，则利用这个Session对象将状态名和状态值记录起来。 浏览器在浏览服务器的其他网页的时候将Cookie传递回服务器 服务器如果需要找到当前会话的某个状态值，则将Cookie解开拿到SessionID，并在SessionTable中找到Session，然后在Session中通过状态名获取该状态值。一般的SessionTable添加/找到Session的步骤，是由框架做的。ApplicationApplication变量的主要目的

14、在于纪录全局的状态，也是一个名值对的HashtableHTML/DHTML和HTTP的接口HTML/DHTML和HTTP的接口其实是单向接口说明执行方式打包方式Form/Input元素form.submit方法Form在提交的时候（执行form.submit或者点击submit类型的input按钮的时候）会把Form提交到HTTP接口中去。Form提交首先收集该Form内所有的（包括子Form）的input元素的value值（如果多个submit，则选择点击的那个），然后打包。*点击或者脚本执行按照method指定的方法，缺省是POSTA元素的href属性用户点击该超连后，页面路由到该href

15、指定的页面当中。点击GETsrc属性/ behavior的url属性/ import的implementation属性在浏览器获得回应生成页面时候，会自动打包申请HTML语言自动执行GETdocument.location=脚本执行GETwindow方法集合opennavigateshowModalDialogshowModalessDialog脚本执行GET*form提交的伪码function form_submit() /收集所有form内部的tag为input的元素 var elms = event.srcElement.form.all.tags(“input”); var postString = ; for(var i=0;ielms.length;i+) var elm = elmsi; if(elm.type=submit & elm!=event.srcElement) continue; if(elm.name=null | elm.name.length=0) continue; if(postString.length!=0) postString += &; postString += elm.name+=+elm.value; HttpPost(postString);