B/S系统就是Browser/Server，浏览器/服务器系统，即，客户在浏览器操作，而代码实现的具体处理以及数据库操作等，则由后台服务器来完成，男耕女织，相得甚欢。比如我们查询成绩，我们通过浏览器输入个人信息，并且把个人信息发送到后台，后台获取了你的信息后作一系列处理并从数据库中查出你的成绩，千回百转，最后把成绩返回到浏览器页面，展示在你的眼前，这就是典型的B/S系统。

　　而浏览器展示的静态页面，我们叫做HTML（超文本标签语言），其实所谓超文本，它归根结底是文本，就跟doc，txt一样，只不过它超级的地方在于，它会堂而皇之的把信息展示在你面前，你打开一个网页，不同部分有不同的颜色，按钮，图案，可以选择，可以输入，单选，复选，头是头，尾是尾，这都是HTML超级的地方。它其实把一个页面分成了不同部分。比如说你要把文本的头部写在<HEAD>里面，把内容写在<BODY>里面，如果一个页面分为不同的框架，把每个框架写在<frame>里面等等，各司其职，相得益彰。又比如，它定义了很多标签，用<span>、<div>把每一小块内容分开，可以输入文字的标签<input>,选择项标签<select>,按钮标签<button>等等。

　　浏览器这边是客户来输入和查看的，而由服务器具体来处理，在JavaWeb中是由Servlet容器来处理的。它其实就是一个有组织，有纪律的Java程序。客户端通过HTML输入一些信息（比如学号），Servlet会通过HttpServletRequest对象拿到你的学号，然后调用其他程序处理（用学号去数据库查询，查到你的成绩返回给Servlet）,Servlet拿到成绩，传给HttpServletResponse对象，由它返回给前台页面，一气呵成，有条不紊。当然，如果这个Servlet处理不了你的请求，它就会把你的请求转发给另一个Servlet（使用RequestDispatcher来转发），然后另一个Servlet来处理。

　　有时候比如你登录一个页面，每次访问时都需要重新登录，比较麻烦，而浏览器和Servlet达成默契，合谋出一个叫Cookie（缓存）的东西，把缓存放到客户端，你如果第二次登录时，系统会读取缓存，直接提取你的用户名和密码，就不需要你再输入了，当然，除了登录，其他浏览信息等都可以放入缓存。但是由于缓存是放在客户端的，也就是存储在我们的电脑上，所以，无法存储较大的信息，难当大任，这时就要用到Session（会话）了，它会把大量的数据保存在服务器端。

　　回到浏览器端，HTML不能只是干巴巴的黑白文字框框，需要对各个部分，按钮是什么颜色的，图片放在什么位置，输入框多大，这些东西都需要装饰，而装饰工具就是CSS(学名叫：层叠样式化表单)，你可以把HTML的每一个部位取出来，用CSS来给它喷漆、涂油、打蜡等，莺歌燕舞，栩栩如生。而且，HTML不能上天，你在浏览器输入你的学号，需要一种介质把它传递给Servlet。这种介质就是<form>表单的提交。也就是说，你把你要传输的信息都写在<form>里，然后通过提交（如submit按钮等）操作把信息传送给后台。

　　每次你想查询一个信息，把输入条件传递给后台Servlet，然后Servlet搜索结果返回给网页，这时，网页会刷新，然后展示你要的信息。但是有时候你不想要刷新，比如你正在看一个广告或者其他模块，一刷新，正在看的东西就没了，重新回到初始状态，谈笑间，樯橹灰飞烟灭。这时就用到了ajax。用它提交条件信息，当后台返回结果后，不需要刷新，就可以在无形中把信息展示给你，而不影响你正在观阅的其他内容，大音希声，大象无形，拥有安静而高雅的姿态。

　　我们不能把所有的信息都让后台Java来处理，这会让服务器很累，而且很麻烦。况且，我们需要一些酷炫的设计，想要通过直接操作HTML就能实现，比如，验证输入的学号格式正不正确，比如，在某个恰当时候弹出一个提示框，比如我想HTML任我摆布，在传递到后台Java之前我就要做到这些，兵马未动，粮草先行，JavaScript就是为你而来，它就是为了更方便操作HTML而发明的一种编程语言。我们可以定义一些对象来更好的封装请求，可以定义一些方法来操作HTML的各个部位，可以编写一个事件，当鼠标点击某个按钮时触发等等。而DOM（文档对象模型）就是为了辅助JavaScript的这一使命的，它把HTML的各个元素都封装成一个个对象，通过JavaScript来操作这些对象。而且，DOM还把HTML的元素描绘成一个树形结构，每个元素对应每个节点和位置，更方便我们对HTML进行增删改查。不同于DOM，JavaScript使用BOM(浏览器对象模型)来把浏览器的相关信息封装成对象，以方便操作浏览器（如果返回一页，前进一页，历史记录等等）。DOM只是操作HTML底层结构的，有时候它也中气不足，比如当我点击某个按钮时，想要在弹出一个提示框的同时，同时按钮要变色，也就是说，我想同时给按钮绑定两个事件，这时就用到DOM2了。DOM2，DOM3扩展了DOM，让JavaScript对HTML有了更好的交互能力。很多时候，我们提交的请求信息太多，后台在处理这些信息的时候会显得手忙脚乱，而JSON应运而生，它把一系列的请求信息封装成有规律的字符串，方便客户端发送，也方便服务器端处理，无规矩不成方圆，JSON就是规矩。

　　JavaScript操作HTML已经如此便利，但是它看起来依然很笨拙，即使用它取出一个小小的HTML按钮，也需要输入很长的代码（getElementsById...）,所以就有了JQuery，它是基于JavaScript框架开发的，用它可以使用很少的代码达到使用纯JavaScript同样的效果，四两拨千斤，然而它本质上就是JavaScript。而且由于历史原因，IE浏览器的很多规则跟其他新锐浏览器都不同，导致JavaScript经常要为IE和其他浏览器写不同的代码，比如给按钮增加事件函数时要用不同的方法等，然而JQuery统一了这个问题，横扫六合，让IE和其他浏览器有着同等规则的待遇。

　　我们之前说过，前端HTML的请求信息发送到后台Servlet，Servlet把结果输出到前端，那么如果要输出的结果中含有大量的静态HTML代码需要返回，那么一行一行的html要在这后台java代码中拼凑，最后返回前端，HTML和Java代码揉成一坨，实在不雅观。jsp的出现让整个世界都清新了。JSP柔合了html和servlet，它实质上就是一个变态的Servlet，当服务器在编译时，会把jsp先转化成Servlet，然后按照Servlet的处理方式往下进行。JSP嵌入了HTML和Servlet，有自己的格式，有自己的指令，有自己的对象，有自己的一整套规则，但是它的一颦一笑，在其转化而成的Servlet文件中，都能找到对应的影子。它让后台Java只处理该处理的逻辑，而把繁琐的html拼接、指令以及很多剪不断理还乱的代码柔合成一体，冰轮离海岛，乾坤分外明。

　　问题又来了，即使有了JSP，土著Servlet依然要处理很多逻辑，如果逻辑特别多，每次Servlet都要忙里忙外，又是处理请求参数，又是拿着参数去数据库查询结果，又是顾这，又是顾那，应接不暇。在系统庞大的时候，Java代码又变成新的一坨。MVC（Model，View，Controller）解决了这个问题，它理顺了模型（比如成绩单对象），展现层（比如JSP页面），控制层（要处理的逻辑），丁是丁，卯是卯，三足鼎立，共治天下。而Struts2和Spring框架就是典型的MVC模式，并在此基础上张扬了个性。（比如，Struts2会把 每个请求信息拦截下来，做一些处理后再交给Servlet。而Spring的特色更为别致，有很多本该在Java中实现的代码，通过XML配置就可以完成，即使不懂编程语言也能够参与其中，真正是老少皆宜，雅俗共赏）。

一口气从CSS讲到Servlet再到JSP、Struts2，清蒸JavaWeb的前前后后。的更多相关文章

  1. [css]【转载】CSS样式分离之再分离

    原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5 ...

  2. Servlet转发到JSP页面的路径问题

    一.现象与概念 1. 问题 在Servlet转发到JSP页面时,此时浏览器地址栏上显示的是Servlet的路径,而若JSP页面的超链接还是相对于该JSP页面的地址且该Servlet和该JSP页面不在同 ...

  3. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  4. css 讲浮动，haslayout，BFC的文章

    这篇专门讲BFC和haslayout的 这篇就不用说了,讲浮动的,张鑫旭大神的 , 这一系列有三篇

  5. HTML+CSS基础小笔记再整理

    1. font的两个必须要写的:font-size 和 font-family text-indent 首行缩进(em)1em=一个文字大小 text-algin 对齐方式:left.center.r ...

  6. 假期对html，css，前端的再学习

    1.观看了相关教学视频40分钟. 2.学习内容: 一 HTML 介绍 1. 什么是 HTML? 超文本标记语言: 超文本:比普通文本功能更加强大 标记语言:使用一组标签对内容进行描述的一门语言,它不是 ...

  7. 聊聊Servlet、Struts1、Struts2以及SpringMvc中的线程安全

    前言 很多初学者,甚至是工作1-3年的小伙伴们都可能弄不明白?servlet Struts1 Struts2 springmvc 哪些是单例,哪些是多例,哪些是线程安全? 在谈这个话题之前,我们先了解 ...

  8. Servlet组件之 jsp 技术

    JSP 简称java服务器页面(java server page),jsp和servlet实现了我们的开发需求.对于jsp技术我们首先需要知道他的组成    HTML+java+jsp内置对象=jsp ...

  9. （转）聊聊Servlet、Struts1、Struts2以及SpringMvc中的线程安全

    前言 很多初学者,甚至是工作1-3年的小伙伴们都可能弄不明白?servlet Struts1 Struts2 springmvc 哪些是单例,哪些是多例,哪些是线程安全? 在谈这个话题之前,我们先了解 ...

随机推荐

  1. Sprint1（第一天11.14）

    Sprint1第一阶段 1.类名:软件工程-第一阶段 2.时间:11.14-11.23 3.选题内容:web版-餐厅到店点餐系统 4.团队博客地址: http://www.cnblogs.com/qu ...

  2. 点击按钮div显示，点击div或者document，div隐藏

    $("button").click(function(event){ event.stopPropagation(); if($("div").is(':hid ...

  3. htmlunit官网简易教程（翻译）

    1 环境搭建: 1)下载 从链接:http://sourceforge.net/projects/htmlunit/files/htmlunit/ 下载最新的bin文件 2)关于bin文件 里面主要包 ...

  4. 设计模式学习笔记－Adapter模式

    Adapter模式,就是适配器模式,使两个原本没有关联的类结合一起使用. 平时我们会经常碰到这样的情况,有了两个现成的类,它们之间没有什么联系,但是我们现在既想用其中一个类的方法,同时也想用另外一个类 ...

  5. C#验证码的生成

    HTML <ul> <li>验证码:</li> <li> <img src="/Login/GetValidateCode?ID=1&q ...

  6. 《Linux内核设计与实现》课本第五章学习笔记——20135203齐岳

    <Linux内核设计与实现>课本第五章学习笔记 By20135203齐岳 与内核通信 用户空间进程和硬件设备之间通过系统调用来交互,其主要作用有三个. 为用户空间提供了硬件的抽象接口. 保 ...

  7. Windows Store App JavaScript 开发：选取文件和文件夹

    前面提到过,文件打开选取器由FileOpenPicker类表示,用于选取或打开文件,而文件夹选取器由FolderPicker类表示,用来选取文件夹.在FileOpenPicker类中,pickSing ...

  8. Window远程连接Linux系统（CentOS7）

    新开的云服务器是CentOS系统,基本操作按照腾讯云的介绍 http://www.qcloud.com/wiki/%E4%BB%8E%E6%9C%AC%E5%9C%B0Windows%E6%9C%BA ...

  9. WebApi系列~基于RESTful标准的Web Api

    微软的web api是在vs2012上的mvc4项目绑定发行的,它提出的web api是完全基于RESTful标准的,完全不同于之前的(同是SOAP协议的)wcf和webService,它是简单,代码 ...

  10. 【仿真】Lattice_Diamond_调用Modelsim_仿真

    仿真前的准备工作:在modelsim中添加lattice仿真库:1.去除modelsim安装目录下modelsim.ini的只读属性.2.打开modelsim,更改目录File>Change d ...