web前端与JavaEE交互_java ee web-优快云博客

本文链接：https://blog.youkuaiyun.com/Janemy_/article/details/131136221

JSON

Servlet概述

Servlet是Server Applet的简称，意思为用Java编写的服务器端的程它运行在web服务器中，web服务器负责Servlet和客户的通信以及调用Servlet方法。
Servlet的作用
1.接收用户发送的请求数据
2.调用其他的iava程序来处理请求
3.根据处理结果，将结果响应给客户端

servlet-->javaEE--->java后端程序运行在服务器中，服务器启动时就会加载我们的java程序前端发送的请求,先是到达服务器,再由服务器根据地址，调用不同项目中处理程序；服务器是连接客户端和后端程序的中间件(桥梁、容器)

创建Servlet程序

创建类来继承HttpServlet

HttpServlet是javaEE中的一个类,我们的Servlet处理类必须继承此类这样就具备了Servlet程序功能,启动服务器时,就会加载这些继承了HttpServlet的类。在src下先创建servlet包，在servlet包下创建一个登录类，来继承HttpServlet类。

HttpServlet是javaEE的类，需要导入tomcat中的servlet-api.jar包，将包复制到web中的lib目录下

点击右键，选择加载包,点击Add as Library,完成后，类就成功的继承了import javax.servlet.http.HttpServlet包下的HttpServlet类。

步骤:

1.搭建服务器(tomcat)

下载（Tomcat官方站点: http://tomcat.apache.org）解压
配置环境变量JAVA_HOME=(jdk的根目录)（可以自动根据JAVA_HOME自动找到jdk）
进入终端，启动服务器
测试是否启动成功：访问http://127.0.0.1:8080/如果出现以下页面，则启动成功，可以以访问自己电脑的ip(在cmd中输入ipconfig查看自己的ip)

为什么要用服务器:为了别人能够远程的访问到,需要把开发的Java项目部署到服务器中
服务器搭建:

2.创建web后端项目
在idea中集成tomcat,并将项目部署到tomcat中
创建Servlet程序继承 HttpServlet init service destroy
doGet doPost

http请求又分为get请求方式和post请求两种方式

get

超链接请求是get;
地址栏直接访问是get;
get主要用来从服务器端获取数据；
向服务器端传输数据量小,并且在地址栏会显示;
后端地址?键=值&键=值.
post

表单提交post方式提交数据;
主要用于从前端向后端传输大量数据(可以上传文件)；
不在(url)地址栏显示，数据存放在请求体中,相对安全.

作用:接收请求数据(请求行,请求头,请求中自己提交的数据)
   处理
   响应 200 404 500

public class LoginServlet_back3 extends HttpServlet {
    //HttpServletRequest表示请求对象,服务器会将请求中的数据都封装,在此对象中,我们可以通过此对象获取到请求中的所有对象
    //HttpServletResponse
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接收请求中自己提交的数据
        System.out.println("doGet");
        String name = req.getParameter("name");
        String age = req.getParameter("age");
        System.out.println(name + ":" + age);

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接收请求中自己提交的数据
        System.out.println("doPost");
       // req.setCharacterEncoding("utf-8");//设置请求中的数据编码格式(不让乱码)
        String name = req.getParameter("name");
        String age = req.getParameter("age");
        String gender = req.getParameter("gender");
        String[] hobbys = req.getParameterValues("hobby");//接受同名的多个值
        System.out.println(name + ":" + age + ":" + gender + Arrays.toString(hobbys));
 //接受请求头的数据
        System.out.println(req.getHeader("Content-Type"));
        System.out.println(req.getHeader("Content-Length"));
        System.out.println(req.getHeader("User-Agent"));

 
        resp.setHeader("Content-Type","text/html;charset=utf-8");//响应头设置

        PrintWriter writer= resp.getWriter();
        writer.write("<h1>你好客户端</h1>");//响应体数据

响应:
200:服务器响应成功
404:请求到了服务器,但目标资源没有
500:代码报错

3.发送http请求
请求行,请求头,请求体..

请求行: 请求的地址,http版本,状态码都是由浏览器自动处理；
请求头: 客户端的一些信息,都是由浏览器自动处理，以键值对方式向后端发送，键都是固定的；
请求体:表单post方式提交的数据区域,请求体中参数以键值形式传递；

4.过滤器
在请求进入到Servlet之前,可以配置哪些请求进入到指定的过滤器,完成一些公共的处理

5.前端发送请求
1.表单向后端发送请求,属于同步请求
同步:你发一个请求,给一个回应,会用回应的内容覆盖浏览器中内容
这样会打断前段其他的正常操作,在现在的前端中,显得不够友好

   异步:不同步
   可以使用一个js中提供的对象,向后端发送请求
然后在js中,用接受到的内容,局部更新网页,这样过程不会出现刷新,打断页面
   不会打断页面的正常操作
实现Filter接口中的三个方法:
①.init(FilterConfig filterConfig)：对filter对象进行初始化，只在容器初始化filter对象结束后被调用一次。参数 FilterConfig可以获得filter的初始化参数。
②.doFilter(ServletRequest request, ServletResponse response, FilterChain chain)：filter进行过滤操作的方法。过滤器实现类必须实现该方法。方法体中可以对request 和response进行预处理。其中FilterChain可以将处理后的request 和response对象传递到过滤链上的下一个资源。
③.destroy()：该方法在容器销毁过滤器对象前被调用。

Ajax 阿贾克斯异步技术

Ajax 全称为: “Asynchronous JavaScript and XML"JavaScript 和 XML)使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。
Ajax其实质是利用浏览器提供的一个特殊的对象 (XMLHttpRequest)异步地向服务器发送请求；
服务器返回部分数据，浏览器让你去利用这些数据对页面做部分的更新整个过程，页面无刷新，不打断用户的操作。

前后端交互中出现的一个跨域问题:属于前端问题

在前端服务页面中(8848) 接收后端服务器响应的数据(8088)
使用ajax技术前后端交互,前端默认不会阻止,不让前端服务接收后端服务
为了安全性

协议,域名,端口有一个不相同就是跨域问题

JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式；
● 数据在键值对中
● 数据由逗号分隔
● 大括号保存对象
● 方括号保存数组
语法：
JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对
组合中的键名写在前面并用双引号 "" 包裹，使用冒号 : 分隔，然后紧接着值

跨域问题解决:
告知解决