前端与Servlet交互

一 、web开发

<1>概述:指的是将开发好的web项目部署在web服务器中供外界访问 流行的web服务器有Tomcat,WebSphere,WebLogivc,Jboss
<2>web环境搭配:

 下载安装

● Tomcat官方站点：http://tomcat.apache.org

● 获取Tomcat安装程序包 ● tar.gz文件是Linux操作系统下的安装版本

● zip文件是Windows系统下的压缩版本 安装JDK

● 设置JAVA_HOME环境变量

● 设置PATH环境变量

● 安装Tomcat

● 解压tomcat压缩文件

Tomcat目录层次结构

在idea中配置tomcat 

配置本地tomcat 

配置 

二 、运行在web里的Servlet 

它运行在web服务器中，web服务器负责Servlet和客户的通信以及调 用Servlet方法。

● Servlet的作用：

1.接收用户发送的请求数据

2.调用其他的java程序来处理请求

3.根据处理结果，将结果响应给客户端

Servlet的创建和使用

1.创建一个类继承javax.servlet.http包下的HttpServlet

2.在web.xml文件中配置Servlet

 3.运行Servlet程序 通过浏览器访问http:localhost:8080/ 项目名/配置的url

由于客户端是通过URL地址访问web服务器中的资源，所以Servlet程序若想被 外界访问，必须把servlet程序映射到一个URL地址上，这个工作在web.xml文 件中使用元素和元素完成。

<servlet>元素用于注册Servlet，它包含有两个主要的子元素：
<servlet-name>和<servlet-class>，分别用于设置Servlet的注册名称和
Servlet的完整类名。
一个<servlet-mapping>元素用于映射一个已注册的Servlet的一个对外访问路
径，它包含有两个子元素：<servlet-name>和<url-pattern>，分别用于指定
Servlet的注册名称和Servlet的对外访问路径。
url-pattern配置模式：”/”代表当前web应用的根目录
精确匹配 例如/test 访问http://127.0.0.1/项目名/test
<servlet-mapping>
<servlet-name>myServlet</servlet-name>
<url-pattern>/test</url-pattern>
</servlet-mapping>

三、Http请求协议

●什么是HTTP？

超文本传输协议 （HyperText Transfer Protocol）服务器传输超文本 到本地浏览器的传送协议,是互联网上应用最为流行的一种网络协议,用于 定义客户端浏览器和服务器之间交换数据的过程。

 HTTP是一个基于TCP/IP通信协议来传递数据.

HTTP是一个属于应用层的协议，由于其简捷、快速的方式，适用于分布 式超媒体信息系统

客户端连上服务器后，向服务器请求某个web资源，称之为客户端向服务器 发送了一个http请求。 请求包括: 请求行，请求头，请求体 . 请求行包含http请求方式，请求资源名称，http版本 .

 request对象与respose对象
      1.http请求 request对象

     通过request对象来获取前端传入的数据

<1>request.getParameter(“具体参数名称”),一次只能接收一个数据
<2>request.getParameterValues(“具体参数名称”) ,一次返回一个String的数组

 

注意: 由于前后端解码规则问题, post请求的数据向后端传输时,中文时会乱码, 所以在接收之前(一定要在之前设置)要进行设置编码格式get请求在Toncat8.0 之后 中文不会乱码 

      2.前端获取后端内容以及respose对象

可以通过respose对象里封装的printWriter对象向前端发送数据
由于response会默认以ISO8859-1将需要输出到浏览器的字符进行解码, 如果输出的字符不存在, 就会乱码产生所以要设置解码规则:如下

 

 

 四、Filter过滤器

<1>Filter接口

javaAPI提供Filter接口,编程过程中, 如果java类实现了这个接口, 这个类就叫做过滤器, 用Filter技术可以使得用户在访问某个资源时, 对访问请求和响应进行拦截,请求就不会到达目标的dopost或者doget

作用: 对服务器的web资源进行拦截(权限控制, 通过拦截资源进行权限控制, 是否可以访问 )

 

类比servlet, 自己的过滤器要继承Filter接口, 该接口有三个方法init(), doFilter(), destory()

1.init()
该方法是对filter对象进行初始化
的方法，仅在容器初始化filter对象结束后被调用一次
2.doFilter()
该方法是filter进行过滤操作的方法，是最重
要的方法。过滤器实现类必须实现该方法。方法体中可以对request
和response进行预处理。其中FilterChain可以将处理后的request
和response对象传递到过滤链上的下一个资源。
3.destory()
该方法在容器销毁过滤器对象前被调用。
<2>使请求继续向下执行

doFilter里的参数FilterChain, 过滤链

 注意: 这里要在web.xml文件里面配置过滤器, 如下图所示 

 五、 AJAX (Asynchronous JavaScipt and XML)（异步JavaScript 和 XML)

<1>ajax概述

Ajax 全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）， 使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了 用户体验。

Ajax其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest） 异步地向服务器发送请求。

 服务器返回部分数据，浏览器让你去利用这些数据对页面做部分的更新， 整个过程，页面无刷新，不打断用户的操作。、

 <4>axios框架

Axious是ajax框架,一个基于promise的Http库, 可以用在浏览器 和 node.js里
特性:

1. 可以从浏览器创建XMLHpptRequest对象
2. 从 node.js 创建http请求
3. 拦截请求跟响应
4. 取消请求

1. 首先要引入axios.js文件或者安装axios的脚手架
2. 然后使用对应的axios的语法

 

 六.跨域问题
浏览器不让从一个域名的网页去请求另一个域名网页的资源,这是浏览器的同源策略造成的, 是javaScript加的安全限制, 不能接收另一个服务器给发送给前端的请求
跨域的定义是: 只要协议 域名 端口 有任何一个不同 就是跨域

<1> 为什么要限制跨域访问
万一是另外一个恶意网站响应的数据,会导致服务器出问题

<2> 为什么要跨域
公司的不同子域需要相互调用资源时

<3>后端解决跨域
后端可以设置响应头的声明,告诉浏览器此次的访问是安全的
location.assign 并不会出现跨域问题, 他会重新开一个窗口,跟原服务器没关系