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 Integer(-128~127)值的==和equals比较产生的思考

    最近在项目中遇到一个问题,两个值相同的Integer型值进行==比较时,发现Integer其中的一些奥秘,顺便也复习一下==和equals的区别,先通过Damo代码解释如下: System.out.p ...

  2. asp.net登录时验证码的制作与验证

    1.新建一个页面,ImageCode.aspx 2.在Page_Load中添加如下代码 string tmp = RndNum(4); HttpCookie a = new HttpCookie(&q ...

  3. Asp.net有关GridView的使用

    一.带提示语句的删除 二.使用config里面的连接字符串 三.鼠标移到GridView某一行时改变该行的背景色方法 四.两个事件 五.GridView实现自动编号 不难写

  4. Discuz！ X3.1直接进入云平台列表的方法

    Discuz! X3.1已经改版,后台不能直接进云平台列表,不方便操作,操作云平台服务时,大家可以这样操作: 1.登录后台:2.访问域名进入云平台列表http://你域名/admin.php?fram ...

  5. 神经网络模型之AlexNet的一些总结

    说明: 这个属于个人的一些理解,有错误的地方,还希望给予教育哈- 此处以caffe官方提供的AlexNet为例. 目录: 1.背景 2.框架介绍 3.步骤详细说明 5.参考文献 背景: AlexNet ...

  6. angularjs 嵌套控制器，子控制器访问父控制器

    <pre> http://www.lovelucy.info/understanding-scopes-in-angularjs.html http://blog.csdn.net/jfk ...

  7. Sublime Text 3 使用问题答疑

    命令面板/命令模式:ctrl+shift+pctrl+cctrl+v → ctrl+shift+v粘贴时会保持原格式(缩进)ctrl+sctrl+z撤销ctrl+y恢复撤销在当前行下面添加一行:ctr ...

  8. 关于rem的学习

    网页常见单位px.em.rem:其中rem是css3新出的单位,官网是这样定义的:“font size of the root element”,意思是:相对长度单位,相对于根元素(即html元素)f ...

  9. jQuery查找——parent/parents/parentsUntil/closest

    jquery的parent(),parents(),parentsUntil(),closest()都是向上查找父级元素,具体用法不同 parent():取得一个包含着所有匹配元素的唯一父元素的元素集 ...

  10. 使用C++11的一点总结

          C++11已不是新鲜技术,但对于我来说,工作中用得还不够多(前东家长时间使用gcc3.4.5,虽然去年升了4.8.2,但旧模块维护还是3.4.5居多:新东家用的是4.4.6,不能完整支持C ...