简单对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请求响应简单整理的更多相关文章

  1. .NET Web开发技术简单整理

    在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...

  2. 转载：.NET Web开发技术简单整理

    在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...

  3. .NET Web开发技术简单整理 转

    .NET Web开发技术简单整理 原文:http://www.cnblogs.com/SanMaoSpace/p/3157293.html 在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何 ...

  4. web请求响应

    转载自:SanMaoSpace 1.Web开发的定义首先看看微软对Web开发的定义:Web开发是一个指代网页或网站编写过程的广义术语.网页使用 HTML.CSS 和 JavaScript编写.这些页面 ...

  5. Web 请求响应原理(转)

    用Java实现Web服务器 减小字体 增大字体 摘要:WWW的工作基于客户机/服务器计算模型,由Web 浏览器(客户机)和Web服务器(服务器)构成,两者之间采用超文本传送协议(HTTP)进行通信,H ...

  6. Fiddler修改http请求响应简单实例

    Fiddler是一个http调试代理,它能够记录并检查所有你的电脑和互联网之间的http通讯. 主要功能 设置断点,查看Fiddle说有的进出的数据(指cookie,html,js,css等文件,这些 ...

  7. ASP.NET Web API 记录请求响应数据到日志的一个方法

    原文:http://blog.bossma.cn/dotnet/asp-net-web-api-log-request-response/ ASP.NET Web API 记录请求响应数据到日志的一个 ...

  8. Web Service之Soap请求响应内容中文编码解密

    java模拟Soap请求测试Web Service接口,发现Web Service响应内容中的中文竟然是编码格式.比如: 中文:退保成功 Soap中文编码:退保成功   我仔细分析后发现,退编码实际上 ...

  9. Http协议简单解析及web请求过程

    HTTP协议: HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统. 基于HTTP协议的客户端/服务器请求响应机制的信息交换过程包含下面几个步骤: 1)    ...

随机推荐

  1. Spark Streaming揭秘 Day21 动态Batch size实现初探(下)

    Spark Streaming揭秘 Day21 动态Batch size实现初探(下) 接昨天的描述,今天继续解析动态Batch size调整的实现. 算法 动态调整采用了Fix-point迭代算法, ...

  2. 怎样在自己的网站上做自动生成当前url的二维码

    $todoString="www.maomii.com"; generateQRfromGoogle($todoString); /** * google api 最多4296个字 ...

  3. [Git]代码管理工具简单使用

    1 Git简介 Git是分布式的版本控制系统,是Linux内核开发者林纳斯·托瓦兹(Linus Torvalds)为更好地管理Linux内核开发而设计.与CVS.Subversion一类的集中式版本控 ...

  4. Android中获取应用程序(包)的信息-----PackageManager的使用(一)

    本节内容是如何获取Android系统中应用程序的信息,主要包括packagename.label.icon.占用大小等.具体分为两个 部分,计划如下:  第一部分: 获取应用程序的packagenam ...

  5. jquery pass parameter to ajax callback

    $('.del').on('click', function () { var id = $(this).attr('id'); var url = '/m/g2_content_del/' + id ...

  6. 通过分析WP的代码来学习PHP。1

    下载了WP的代码,并且应用到了网站上面,现在也在正常的运行中,地址是:www.freealgorithm.tk .具体的申请过程就不赘述了,学习WP的代码. 他的目录结构就不看了,可以下载同名文件我会 ...

  7. 反射自动填充model

    public static T FillModel<T>(DataRow dr) { ) return default(T); T model = Activator.CreateInst ...

  8. jquery下拉列表选中项改变时获取新选项的属性值

    $("#textSel").change(funtion(){ var selVal=$(this).val(); var selText=$("#textSel opt ...

  9. 自助Linux之问题诊断工具strace

    转  http://www.cnblogs.com/bangerlee/archive/2012/02/20/2356818.html 引言 “Oops,系统挂死了..." “Oops,程序 ...

  10. WPF SplitButton 的杂七杂八

    原文: http://www.codeproject.com/Articles/20612/A-WPF-SplitButton SplitButton.cs using System; using S ...