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) ...
随机推荐
- 制作复选框(Toggle)
怎样判断是否应当使用复选框 复选框,就是对一个选项做上一个标记,表示这个选项已经被选中了.在游戏中,复选框一般用来做一些选项的控制,这种选项一般都只有两种答案:是和否.例如,单击一下开启音乐的复选框, ...
- 【学习总结】 init & initWithFrame & initWithCoder
//当我们所写的程序里没用用Nib文件(XIB)时,用代码控制视图内容,需要调用initWithFrame去初始化 - (id)initWithFrame:(CGRect)frame { if (se ...
- owa Your request can't be completed right now. Please try again later.
Your request can't be completed right now. Please try again later.
- 使用maven配置基本Mybatis
Mybatis 也称为是ibatis,主要体现在普通.底层SQL查询.存储过程.高级映射的持久化框架! 优点: 1.消除了几乎所 ...
- (转)汇编bne的问题
网址:http://blog.csdn.net/lwj103862095/article/details/8073571 memsetup: @ 设置存储控制器以便使用SDRAM等外设 mov ...
- ionic修改loading背景色
.loading{ background-color: #387ef5 !important; } 只需要在自定义css文件中设置即可
- struts2+hibernate-jpa+Spring+maven 整合(2)
1.修改pom.xml 1. 添加 slf4j-api <dependency> <groupId>org.slf4j</groupId> <artifac ...
- svn is already locked解决方案
在出错文件夹下,鼠标右键TortoiseSVN->Clean up. SVN错误:Attempted to lock an already-locked dir 1.出现这个问题后使用“清理”功 ...
- centos7安装chrome及加载poatman开发插件
为什么要安装chrome?因为centos7的默认浏览器firefox的实在是不习惯,上面占了太多,本来显示器就不大... 好了,首先下载chome的rpm安装包(如果需要的可以留言,我有备份) 然后 ...
- 【莫比乌斯反演】关于Mobius反演与gcd的一些关系与问题简化(bzoj 2301 Problem b&&bzoj 2820 YY的GCD&&BZOJ 3529 数表)
首先我们来看一道题 BZOJ 2301 Problem b Description 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd( ...