15分钟快速入门，一文了解Java Web开发

引言

在传统的客户端/服务器（C/S）架构中，服务端作为一个大型的中央信息存储池为信息消费者（客户端）提供服务。在这种软件架构下，当客户端软件需要改变时，它就需要被重新编译，安装，并且对于不同类型的操作系统和计算机，这个问题会显得很麻烦。
而与之相对应的另一种软件架构——浏览器/服务器（B/S）架构就无需安装客户端，只需要有Web浏览器就能与服务器进行信息交换。

java是一门功能强大的、安全的、国际化的编程语言，在并发编程，网络编程，数据库访问和分布式计算等领域皆有应用。由于其具有的可跨平台的特性而被许多程序员选择，它的功能也在使用中被不断扩展，具有很多强大的框架，在企业级网页应用开发中占据主流。
本文主要面向对Web开发没有了解的朋友，以尽可能少的代码介绍Web开发的轮廓，再到细节的扩展。

什么是Web开发

在浏览器/服务器架构中所涉及的程序开发，从静态网页到基于Web的网络程序的编写都可以叫做Web开发。目前根据企业实际采用的开发分工方式，又分为前端开发和后端开发。

浏览器与服务器如何通信（一）

Web早期使用HTTP协议进行通信。HTTP协议名为超文本传输协议，基于TCP/IP协议，是一种无状态，面向连接的请求-响应协议。浏览器和服务器使用该协议进行通信首先要建立连接，TCP/IP协议规定浏览器和服务器通过三次握手建立连接。建立连接后，用户可通过浏览器向服务器发送请求消息，服务器收到请求消息后可以向浏览器发送响应消息，浏览器经过必要的解析后再展示给用户。当不需要通信后，浏览器和服务器通过四次挥手断开连接。

什么是前端？什么是后端？

在上述通信过程中，用户和浏览器的交互属于前端，而服务器对浏览器请求的处理属于后端。
网络上找的某公司前端职位描述如下：

可以看出，前端主要工作职责就是提高用户的浏览器使用体验，对界面进行优化，对页面的性能就行优化以形成良好的前后端交互，提高效率。
而后端主要指的是服务端，负责业务逻辑的处理，数据的处理和持久化存储。

浏览器与服务器如何通信（二）

上面简单地介绍了浏览器服务器通信的原理，以及前后端的划分，接下来说明一下完成一次通信所涉及的技术。

HTML、CSS和javascript

查看平时所使用的网页源代码，它是这样的：

这也就告诉了我们，其实我们所看到的网页，只是浏览器对这些代码解析的结果。
这些代码总共由三种语言组成：HTML（超文本标记语言），CSS（层叠样式表），javascript（一种浏览器脚本语言：不需要编译直接就能被浏览器解析）。
HTML通过它的标签来定义页面中的元素，例如:

这段代码使用了p标签，在网页上定义了一段文字。
仅仅是标签的排列形成不了有美感的页面，这时就需要使用CSS来对HTML元素进行布局，样式调整。

完成了这样的静态页面，还可以使用javascript来增加与用户的交互。

总结：HTML定义网页的元素，CSS定义网页的布局，javascript定义网页的行为。

请求消息和响应消息

打开浏览器的开发者模式，如图，可以看到右边的消息头中有request和response字样，其实就代表着请求消息和响应消息，说明了浏览器与服务器是通过请求-响应来完成通信的，其中request method为get，这个信息后面有用。

Tomcat,Servlet

浏览器发送了请求消息，请求消息最终被传递到服务器。
安装了服务器软件的计算机就可以作为服务器来使用，接下来以Tomcat这个Web应用服务器软件来进行说明。
Tomcat是个开源免费的轻量级服务器软件，在下载安装后即可运行。
运行tomcat后，你就可以在自己的计算机上存储，处理，传递网页给客户端（通常是Web浏览器）。
Servlet 是运行在 Web 服务器或应用服务器上的程序，它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层。它同时也是java的一个接口，通过实现这个接口，我们就可以进行通信。

如图所示，tomcat有两个内置对象request和response。request对象封装了客户端的请求消息，如表单提交的参数、Cookie等。response对象封装的响应消息的字段，可用来设置发给客户端的响应消息。
Servlet接口中的service方法以这两个对象作为参数，通过实现service方法，我们就可以按我们所需的业务逻辑来完成请求响应。 在实现service方法后，我们还需要配置Servlet的url-pattern让该Servlet的实现类与一个url建立映射。

JDBC

大部分时候，业务处理伴随着数据的存储与读取，这时就需要操作数据库。
JDBC的全称为Java DataBase Connectivity ，译为Java数据库连接，其实质是Sun公司定义的一套操作关系型数据库的接口，各大数据库厂商去实现该接口，并为该接口提供相应的数据库驱动jar包。

在需要进行数据库操作时，我们就可以在Servlet中使用JDBC技术来操作关系型数据库。

总结

Web开发即开发不需要安装客户端就能执行的Web程序，包括前端开发和后端开发。
前端开发以开发出用户体验好、能与后端进行高效交互的页面为目的，基础为定义页面元素的HTML、定义布局的CSS和定义行为的javascript。
后端开发通过Servlet来调用服务器的封装了请求消息和响应消息的内置对象来完成请求消息的接收和响应消息的设置，通过JDBC技术来对关系型数据库进行操作以完成业务需求。

这些就够了吗？

虽然上文没有对具体的技术进行讲解，显得Web开发很空洞。但就算详细地介绍上文所提到的各种技术，光靠这些技术也远远满足不了这个时代的Web使用需求，配合其他技术一起使用，才能让Web变得适应性强，完成更加复杂的功能。

框架：提高开发效率的好工具

直白地说，框架就是一个半成品。构建框架的程序员将开发需要大量重复使用的代码就行了一定程度的封装，在之后的程序员开发时可以迅速使用。
例如之前比较流行的Bootstrap，它是一个HTML、CSS、javascript框架。利用它我们可以用少量的代码实现自适应页面大小的响应式布局以及更加美观的效果。
该框架封装了页面中常见的元素，如导航栏，轮播图等等。

还有现在前端主流三大框架React、vue、Angular，后端的Spring全家桶等，它们为开发者提供了很大的便利。想要高效地进行开发，熟练运用框架是一项必备技能。

XML：让未来的应用程序使用 XML 来交换数据吧

XML叫做可扩展标记语言，它的语法类似HTML，但可以自定义标签。由于XML是以文本形式在网络上传输，可根据自定义标签来区分数据类型，因此XML可用来在Web上传输数据和作为配置文件。
例如每个maven项目都有一个pom.xml配置文件：


这个xml文件通过里面的自定义标签区分了标签内容的类别，且格式规范，让其传输、共享、平台变更都更加容易。

Cookie和Session：在通信过程中共享数据

之前提到过HTTP协议是一个无状态的协议，这里的无状态指的是HTTP的每个请求都是独立的，每次请求间的数据不能交互，如果后续的事务处理需要前面请求所传递的参数，则必须重传。比如在淘宝购物，将商品加入购物车最后结算时，购物车需要有我们之前添加的商品。如果不使用一些技术让之前每次添加进购物车的请求数据可以共享，那最后结算时又需要将之前的数据重传，效率显得非常低下。Cookie和Session就是为了解决多次请求间数据不能共享的问题而生。
Cookie和Session统称为会话技术，一次会话包含多次请求与响应，在一次会话内数据可以共享，它们都是Tomcat的内置对象，都记录了访问者的相关信息。其中Cookie是客户端的会话技术，Session是服务端的会话技术。

Cookie将数据存储在客户端浏览器，可用于存储少量不敏感的数据，且有一定大小的数据限制。

Session的实现依赖于Cookie，Session将数据存储在服务器端，Session可以存储任意大小，任意类型的数据，且Session存储相较于Cookie更安全（因为Session不需要将要传递的参数在网络中传递，在网络中传递的只有一个SessionID。）

JSP：一个既能写HTML又能写java代码的页面

JSP的全名为Java Server Pages，即java服务器端页面。JSP与纯HTML页面的最大不同在于它是一个动态资源，即它可以动态地生成HTML页面，动态部分使用java编写，也就具有了java程序易移植的优点。JSP的本质就是一个Servlet。
使用JSP可以简化书写，将纯Servlet和纯静态页面转化为一个动态页面书写，弥补了纯Servlet需要输出大量HTML标签才能响应表现出页面效果的缺点。

EL和JSTL：让代码简化再简化

之前提到的JSP简化了Servlet的书写，而EL和JSTL又简化了JSP的书写。
EL的全称为Expression Language，即表达式语言。它是用来替换和简化JSP中的java代码的。EL表达式只能从域对象中获取值。
JSTL名为JavaServer Pages Tag Library JSP标准标签库，是Apache组织提供的开源的免费的JSP标签，通过这些JSP标签，可以更进一步简化JSP的代码。
在EL中可以使用被JSTL定义的函数，因此将EL与JSTL组合使用效果更好。
JSP中有四大域对象：

• pageScope–>pageContext
• requestScope -->request
• sessionScope -->session
• applicationScope–>application（ServletContext）

不同的域对象能共享数据的范围不同。上述四个域对象的作用域由小到大，分别是：当前页面，单个请求，一次会话，从服务器执行服务到关闭。
如通过这样一段代码，若标签库中定义了函数fn:length，则使用如下代码就可以获取字符串的长度。

${fn:length("Get my length")}

Filter：用于完成通用操作的过滤器

Filter作为Web三大组件之一（另外两个为Servlet和Listener)，使用起来和Servlet类似。Filter也是一个接口，需要实现这个接口来使用Filter。Servlet用来处理请求，而FIlter用来拦截/放行请求。Filter有五种拦截方式：

• REQUEST：默认值，当浏览器直接请求资源时进行拦截。
• FORWARD：拦截转发访问的请求。
• INCLUDE：拦截包含页面的请求。
• ERROR：拦截错误跳转资源。
• ASYNC：拦截异步访问资源。

使用拦截器可以对有一些通用操作的资源先进行处理，再放行请求让Servlet去处理。例如一些资源需要登陆验证后才能访问，可以把登陆验证交给拦截器去处理，验证通过后再放行让请求访问资源，这样就不用为每个资源都增加登陆验证的功能。

Redis：读写速度更快的内存数据库

在实际应用场景中，有一些数据需要经常读取，比如经常显示在页面上的一些新闻内容，好友在线列表等，如果这些数据只存在硬盘中，每次都从硬盘IO，速度是非常慢的，使用Redis就可以解决这个问题。
Redis是一款高性能的NOSQL（Not only SQL)系列的非关系型数据库，R使用Key-Value对来存储数据。其中Key都是字符串，而Value有五种数据结构：

• 字符串:String
• 哈希类型：map
• 列表类型：linkedlist 支持重复元素
• 集合类型：set 不支持重复元素
• 有序集合类型：sortedset 不支持重复元素且有序

Redis在Web开发中的作用如图，它配合关系型数据库使用，将关系型数据库中需要经常使用的数据读取进内存存储起来，可以更好地结合硬盘与内存，从而具有更高的存储效率。由于Redis中的数据存储在内存中，所以当数据需要在以后使用时需要对这些数据进行持久化。

AJAX：部分更新网页的异步技术

AJAX的全称为asynchronized javascript and xml，即异步的Javascript和xml。不使用ajax的页面，每一次请求都要等服务器响应才能进行下一步操作。而使用了ajax，提交完一次请求等待服务器响应的过程中仍然可以进行其他操作。例如注册时输完用户名去校验是否重名，如果不使用ajax，在这个校验过程中不能继续输密码等，而使用ajax就不会受到这次请求提交的影响。
如图所示为同步请求与异步请求的区别：

可以看到，同步请求是一条线，即无法同时发送别的请求，而异步可以。
ajax可以通过原生的javascript来实现（创建核心对象XMLHttpRequest)，也可以通过JQuery来实现。

$.ajax({键值对})
//键值对为请求参数

MVC框架：利于模块分离的设计方式

MVC框架即M（model) —— V（view) —— C（controller)框架，在这个框架中：

• Model（模型）表示应用程序核心（比如数据库记录列表）
• View（视图）显示数据（数据库记录）
• Controller（控制器）处理输入（写入数据库记录）

使用这个框架来进行开发，可以实现各个模块的高内聚，低耦合，在以后模块内容需要发生变化时，少量的修改并不会对其他模块造成影响。

这个框架迁移到Web开发中，就是使用JSP作为视图展示响应的数据，Servlet作为控制器来实现业务逻辑，JavaBean作为模型表示数据。

结语

本文没有深入地介绍Web开发具体的技术细节，具体的技术细节每一个都物穆无穷，在此仅仅介绍了在Web开发中我们会经常涉及到哪些技术，这些技术有什么用。介绍的这些技术也并不全面，一些技术也不是最前沿的，比如现在很流行用微服务架构来替代MVC架构。
作为一个Web开发的初学者，在学习过程中也为这些精妙的构思所折服。写下这篇文章既是对之前学习的一个总结，也是一个抛砖引玉，希望能帮助更多想要了解Web开发的人快速了解Web开发的全貌后深入细化地去探索这些技术点。
由于笔者能力和时间有限，文章难免有错误和疏漏，欢迎各位对这篇文章批评指正。
路漫漫其修远兮，吾将上下而求索。