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) ...
随机推荐
- EXTJS 3.0 资料 控件之 combo 用法
EXTJS combo 控件: 1.先定义store //年款 var comboData_ReleasYear = [ ['], ['], ['], ['] ]; 2.定义combo控件 { lay ...
- python学习笔记15(面向对象编程)
虽然Python是解释性语言,但是它是面向对象的,能够进行对象编程. 一.如何定义一个类 在进行python面向对象编程之前,先来了解几个术语:类,类对象,实例对象,属性,函数和方法. 类是对现实世界 ...
- Runtime 实现 动态添加属性
利用动态加载为对象添加一个 block 点击属性; .h 文件 #import <UIKit/UIKit.h> @interface UIView (Tap) /** * 动态添加手势 * ...
- Angular与React的一些看法
Angular - React之争 Angular和React无疑是目前最受追捧的两个前端框架,谷歌也发现Angular1.x不足的地方,开始开发2.0版本,脸书发现React的组件化和虚拟DOM非常 ...
- 安装oracle 11g详细过程仅供参考
- Visual Studio 中TODO List的使用
http://msdn.microsoft.com/en-us/library/txtwdysk.aspx 工欲善其事,必先利其器 When the Task List is open, you ca ...
- hdu 1213
简单并查集 #include <cstdio> #include <cstring> #define maxn 30005 int fa[maxn],ans[maxn],n,m ...
- uva 10730
题意:如果数列中没有三个元素的子序列构成等差数列输出yes 不然no 标记每个数出现的位置 然后从0开始寻找三个元素的等差数列 如果这三个元素的位置满足条件则原数列中存在等差数列 #include ...
- Java Code Examples for org.springframework.http.HttpStatus
http://www.programcreek.com/java-api-examples/index.php?api=org.springframework.http.HttpStatus
- POJ 2200 A Card Trick(模拟)
题目链接 题意 : 一共52张牌(A, 2, 3, 4, 5, 6, 7, 8, 9, 10, J, Q, K)花色分别是C,D,H,S ...给助理5张牌,然后助理需要重新排一下次序,把第一张牌给观 ...