Web请求响应简单整理
简单对Web请求响应如何处理进行的整理,难免有理解不到位,理解有偏差的地方,如有理解有误的地方,希望大牛批评指正。
1.Web开发的定义
首先看看微软对Web开发的定义:
Web开发是一个指代网页或网站编写过程的广义术语。网页使用 HTML、CSS 和 JavaScript编写。这些页面可能是类似于文档的简单文本和图形。页面也可以是交互式的,或显示变化的信息。编写交互式服务器页面略微复杂一些,但却可以实现更丰富的网站。如今的大多数页面都是交互式的,并提供了购物车、动态可视化甚至复杂的社交网络等现代在线服务。
通俗的说,Web开发就是我们说的做网站.它分为网页部分和逻辑部分也就是我们说的前台页面展示与后台业务逻辑处理。前台负责与用户的交互显示数据,用到HTML标签布局页面,CSS样式渲染页面,JavaScript脚本(或AJAX、JQuery、Extjs)编写动态交互性强的页面;后台编写处理一些复杂业务逻辑的程序.可以用C#,JAVA,PHP等语言。
2.Web请求响应简单理解
客户端浏览器对服务器端进行一次请求的演示图:

<1>.客户端发送请求。客户端浏览器向服务器发送请求URL;
<2>.服务器接收请求。服务器接收到该浏览器发送的请求;
<3>.服务器生成HTML。服务器解析请求的URL,根据URL确定请求的目标资源文件;
这个资源文件通常是一个动态页面(如ASP,PHP,JSP,ASPX等文件)的网络地址(MVC结构的程序例外)。Web服务器根据动态页面文件的内容和URL中的参数,调用相应的资源(数据库数据或图片文件等等)组织数据,生成HTML页面。
<4>.服务端响应请求。生成HTML文档以后,服务器响应浏览器的请求,将生成的HTML文档发送给客户端浏览器;
<5>.客户端接收响应。浏览器接收服务端发出的请求得来HTML文档;
<6>.客户端解析HTML。浏览器对HTML文档进行解析,并加载相关的资源文件(JS,CSS,多媒体资源,内嵌网页)等,(在这里浏览器解悉完HTML文档以后,就会进行呈现,但同时也会向服务器发送请求来请求其它相关的资源文件)
<7>.服务器发送资源文件。服务器接到浏览器对资源文件的请求,将相应的资源文件响应给客户端浏览器;
<8>.客户端加载资源文件。客户端浏览器将接收服务器发送的资源文件,整理并呈现到页面中;
<9>.客户端从上到下加载。在进行页面呈现的时候,浏览器会从上到下执行HTML文档,当遇到相应的页面脚本的时候,会对脚本进行分析,并解释执行相应的脚本代码。
在第6步以后,我们就可以看到一部分页面内容了,不过可能是纯文本内容,没有样式,没有图片或其它资源。待到浏览器请求得到某资源的时候就会进行组织呈现,直到整个页面所有资源加载完毕,显示完成,请求响应完毕。
3.客户端解析HTML
<1>.解析HTML结构;
<2>.加载外部脚本和样式表文件;
<3>.解析并执行脚本代码;
<4>.构造HTML DOM模型;
<5>.加载图片等外部文件。
加载顺序实例:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
<style type="text/css">
body
{
font-sie: 12px;
}
</style>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js.js" type="text/javascript"></script>
</head>
<body>
<div>
<script type="text/javascript">
function f1() { }
</script>
<img src="1.gif" />
</div>
<script type="text/javascript">
function f2() { }
</script>
</body>
</html>

html → head → title → #text(网页标题) → style → 加载样式 → 解析样式 → link → 加载外部样式表文件 → 解析外部样式表 → script → 加载外部脚本文件 → 解析外部脚本文件 → 执行外部脚本 → body → div → script → 加载脚本 → 解析脚本 → 执行脚本 → img → script → 加载脚本 → 解析脚本 → 执行脚本 → 加载外部图像文件 → 页面初始化完毕
4.onload和ready的差异
这里需要注意的是onload和ready的差异:
一是ready,表示DOM文档树已经加载解析解析完成(不包含图片等非文字媒体文件);
二是onload,指页面上所有的资源(包含图片等文件在内的所有元素)都加载完毕。
说ready比onload快最显著的是比如一个页面上有一个很大的图片,加载要好久,onload只有在图片加载完成之后执行,而ready不必等图片加载完成。
这种差异与window.onload和$(document).ready()的区别也是一致的吧。
5.Web相关技术和标准


参考博客:
《DOM加载顺序》
《深入理解BS结构应用程序》
Web请求响应简单整理的更多相关文章
- .NET Web开发技术简单整理
在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...
- 转载:.NET Web开发技术简单整理
在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...
- .NET Web开发技术简单整理 转
.NET Web开发技术简单整理 原文:http://www.cnblogs.com/SanMaoSpace/p/3157293.html 在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何 ...
- web请求响应
转载自:SanMaoSpace 1.Web开发的定义首先看看微软对Web开发的定义:Web开发是一个指代网页或网站编写过程的广义术语.网页使用 HTML.CSS 和 JavaScript编写.这些页面 ...
- Web 请求响应原理(转)
用Java实现Web服务器 减小字体 增大字体 摘要:WWW的工作基于客户机/服务器计算模型,由Web 浏览器(客户机)和Web服务器(服务器)构成,两者之间采用超文本传送协议(HTTP)进行通信,H ...
- Fiddler修改http请求响应简单实例
Fiddler是一个http调试代理,它能够记录并检查所有你的电脑和互联网之间的http通讯. 主要功能 设置断点,查看Fiddle说有的进出的数据(指cookie,html,js,css等文件,这些 ...
- ASP.NET Web API 记录请求响应数据到日志的一个方法
原文:http://blog.bossma.cn/dotnet/asp-net-web-api-log-request-response/ ASP.NET Web API 记录请求响应数据到日志的一个 ...
- Web Service之Soap请求响应内容中文编码解密
java模拟Soap请求测试Web Service接口,发现Web Service响应内容中的中文竟然是编码格式.比如: 中文:退保成功 Soap中文编码:退保成功 我仔细分析后发现,退编码实际上 ...
- Http协议简单解析及web请求过程
HTTP协议: HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统. 基于HTTP协议的客户端/服务器请求响应机制的信息交换过程包含下面几个步骤: 1) ...
随机推荐
- Spark Streaming揭秘 Day27 Job产生机制
Spark Streaming揭秘 Day27 Job产生机制 今天主要讨论一个问题,就是除了DStream action以外,还有什么地方可以产生Job,这会有助于了解Spark Streaming ...
- Spark Streaming揭秘 Day21 动态Batch size实现初探(下)
Spark Streaming揭秘 Day21 动态Batch size实现初探(下) 接昨天的描述,今天继续解析动态Batch size调整的实现. 算法 动态调整采用了Fix-point迭代算法, ...
- 初识shell脚本
shell字符串.shell数组.shell echo指令.shell test命令.shell if语句.shell case语句.shell for语句.shell while语句.shell b ...
- 【socket】Socket的三个功能类TCPClient、TCPListener 和 UDPClient
Socket的三个功能类TCPClient.TCPListener 和 UDPClient (转) 应用程序可以通过 TCPClient.TCPListener 和 UDPClient 类使用传输控制 ...
- 【BZOJ2049】 [Sdoi2008]Cave 洞穴勘测
Description 辉辉热衷于洞穴勘测.某天,他按照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘测,辉辉发现这片区域由n个洞穴(分别编号为1到n)以及若干通道组成,并且每条通道连接了恰好 ...
- 正则表达式通过Unicode属性匹配
原文链接:http://zochen.iteye.com/blog/690716 Unicode 编码并不只是为某个字符简单定义了一个编码,而且还将其进行了归类. \pP 其中的小写 p 是 prop ...
- collectionView代码创建
@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout> @p ...
- bnuoj 20832 Calculating Yuan Fen(暴力模拟)
http://www.bnuoj.com/bnuoj/problem_show.php?pid=20832 [题意]: 给你一串字符串,求一个ST(0<ST<=10000),对字符串中字符 ...
- BZOJ 3173 [Tjoi2013] 最长上升子序列 解题报告
这个题感觉比较简单,但却比较容易想残.. 我不会用树状数组求这个原排列,于是我只好用线段树...毕竟 Gromah 果弱马. 我们可以直接依次求出原排列的元素,每次找到最小并且最靠右的那个元素,假设这 ...
- BZOJ 1710: [Usaco2007 Open]Cheappal 廉价回文
Description 为了跟踪所有的牛,农夫JOHN在农场上装了一套自动系统. 他给了每一个头牛一个电子牌号 当牛走过这个系统时,牛的名字将被自动读入. 每一头牛的电子名字是一个长度为M (1 &l ...