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. JS学习之事件流

    本文是原创文章,如需转载,请注明文章出处 JS和AS师出同源,所以事件流的3个阶段也跟AS一样,分别是捕获阶段,目标阶段,冒泡阶段. 下面写了个例子可以清晰的看出事件流的顺序: eventTest.h ...

  2. centos 6.5重置Root密码

    按任意键进入菜单界面 在开始引导的时候,进入开机启动界面(如下图) 然后按一下键盘上面的"e" 3.进入如下图界面,我这边选择第二个按下键盘上的"e"键.(不同 ...

  3. Sprint1（第七天11.20）

    Sprint1(11．20)   Sprint1第一阶段 1．类名:软件工程-第一阶段 2．时间:11.14-11.23 3．选题内容:web版-餐厅到店点餐系统 4．我们详细分析了点餐系统实现的具体 ...

  4. js解析网址获取需要的数据

    /** * 获取地址栏内容,返回pathnamearrneed对象 * @param {Object} len 从第几位开始获取你需要的值 */ function myLocationId(len) ...

  5. 如何实现自定义的android WebView错误页

    一般来说,可能第一时间想到的是自定义一个html来替代webview内置的异常页面.  但是实际操作时,这种方法比较困难. 这里介绍一个简单的替代方案,希望能有所帮助. 可以采用嵌套layout的方式 ...

  6. Calculator（补）

    MyGitHub 刚刚开始时确实是连题目都看不懂= =,从第二行的新建类开始,就不知题目所云.所以我的困难比很多同学都要 开始得早一些--从题目第二行开始. 准确的说,当我按照题目要求新建了一个sca ...

  7. Galera集群server.cnf参数调整--Innodb存储引擎内存相关参数（一）

    在innodb引擎中,内存的组成主要有三部分:缓冲池(buffer pool),重做日志缓存(redo log buffer),额外的内存池(additional memory pool).

  8. iOS UIWebView 添加tap手势 和 添加button 遇到的问题

    今天应产品需求,在UIWebView 上添加一个 单机手势和双击手势,再加一个UIButton,UIButton 绑定一件事情,结果遇到了点击button 的点击事件的时候,单机手势 的响应事件,被响 ...

  9. tweenmax.js 文档

    TweenMax 参考http://bbs.9ria.com/thread-214959-1-1.html TweenMax 可能是很多人都用的,包括我 但 是最近发现大量的运用就总会产生这样或那样的 ...

  10. 【转】Weblogic的集群

    原文链接:http://www.cnblogs.com/HondaHsu/p/4267972.html 一.Weblogic的集群 还记得我们在第五天教程中讲到的关于Tomcat的集群吗? 两个tom ...