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. JAVA字符串05之课程问题解决

    (一)古罗马皇帝凯撒在打仗时曾经使用过以下方法加密军事情报:请编写一个程序,使用上述算法加密或解密用户输入的英文字串. 1.设计思想:首先选择是加密字符串还是解密字符串,两种算法相似.如果要加密字符串 ...

  2. autobench 测试笔记

    yum install texinfo yum install gnuplot #下载 http://httperf.googlecode.com/files/httperf-0.9.0.tar.gz ...

  3. VC++使用Pro*CC++

    几种数据库访问技术的比较 由上所述, Visual C++ 通过以上方法都可以访问Oracle 数据 库, 但是上述方法各有优缺点.ODBC 出现得比较早, 几乎支持所 有的关系型数据库, 而且有MF ...

  4. C#设置通过代理访问ftp服务器

    // 创建FTP连接 private FtpWebRequest CreateFtpWebRequest(string uri, string requestMethod) { FtpWebReque ...

  5. SAP LOGON DATA CHECK

    之前有朋友做过RFC登录验证,后来群里又有很多人问SAP的登录验证函数. 后来自己找找了,看看了,然后改写了一个LOGON DATA CHECK... FUNCTION ZUSER_CHECK_LOG ...

  6. ionic 初入门

    ionic ionic 是webapp开发的一个框架 安装 npm install -g cordova ionic ;  我这两个分开装,因为ionic模块拖不下来,所以只好等待时机.这时候科学上网 ...

  7. Windows Store App JavaScript 开发：模板绑定

    WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控 ...

  8. TortoiseGit 连接Git服务器不用每次输入用户名和密码的方法

    每次git push 都要输入用户名和密码. 虽然安全,但在自己电脑上每次都输有些麻烦,如何记住用户名和密码呢? 试了很多方法,找到这个最简单,亲测可行. 当你配置好git后,在C盘C:\Users\ ...

  9. WPF附加属性

    附加属性实质也是依赖属性,是说一个属性本来不属于某个对象,但由于某种需求被后来附加上的,也就是说把对象放入一个特定环境后才具有的属性 例子:人在学校有年纪和班级两个属性,人放在学校里会获得年级和班级两 ...

  10. asp.net c#过滤html代码,净化DIV SPAN等

    public static string GetSafeHtml(string val) { if (string.IsNullOrEmpty(val)) { return string.Empty; ...