ajax 网络请求，http请求

前端的作用：

• 让用户输入数据
• 显示数据

Web程序：网页界面+服务器B/S架构==浏览器（Browser）+服务器（Server）

无需安装，直接在网页上使用

GUI客户端+服务器 C/S架构==特定客户端（Clivent）+服务器

必须下载，可以在本地进行一些处理

1. 搭建后端服务器
2. 向后端发送请求
3. 后端处理，向前端响应
4. 前端动态显示数据

JavaEE后端程序运行在服务器上

• 先安装一个web服务器
• 把开发的Java程序部署在服务器上（此时可从前端远程通过网络访问）

服务器

• 广义上：硬件加软件
• 狭义上软件，只是个程序（里面部署资料，外界可以通过网络访问服务器上的文件，访问到之后可以向访问者响应文件）

apach（非盈利性组织），安装tomcat步骤：

1. 下载
2. 解压
3. 配置环境变量：在系统环境变量中新建JAVA_HOME,使用Java jdk的根路径，确认应用
4. 进入tomcat安装文件的bin目录，双击start.bat，服务器启动
5. 使用127.0.0.1:8080验证

创建Web后端项目并将其部署到tomcat中步骤：

1. 打开idea
2. 创建新的Java项目
3. 为项目添加Web功能，步骤如下：

点击编辑配置

 

 

点击加号再往下寻找到tomcat，选择local

 

点击应用程序服务器，选择tomcat，再将JRE版本选择出来

 

点击部署，点加号，选择外部资源

 

 

选择tomcat文件的路径，之后应用，确定

 

xml文件 标记语言/标签

主要用于项目中存储配置信息，有固定格式

web.xml文件是web项目中配置的文件，里面配种了servlet过滤器等，在服务器启动时由tomcat加载读取里面的配置数据

servlet生命周期

 http协议

• 超文本传输协议，服务器传输超文本到本地浏览器的传送协议,是互联网上应用最为流行的一种网络协议,用于定义客户端浏览器和服务器之间交换数据的过程。
• HTTP是一个基于TCP/IP通信协议来传递数据。
• HTTP是一个属于应用层的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统

http请求：

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

请求头包含主机地址，以及客户端的一些环境信息，以键值对的形式传递.
Host: 127.0.0.1:8088 请求的主机地址
Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
浏览器能够处理的内容类型
Accept-Encoding: gzip, deflate, br 浏览器能够处理的压缩编码
Accept-Language: zh-CN,zh;q=0.9 浏览器当前设置的语言
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like
Gecko) Chrome/69.0.3497.100 Safari/537.36 使用的浏览器和操作平台信息
Connection: keep-alive 浏览器与服务器之间连接的类型
请求体代表着浏览器在post请求方式中传递给服务器的参数，请求体中参数以
键值形式传递，
多个用&链接，服务器接收到后再解析.
username=admin&userpwd=123

GET方式：

超链接访问，默认是GET方式
form提交，不指定method，默认为GET方式

可提交大量数据，内容在请求体里

POST方式：

form提交，指定method=“POST ”，在地址栏中，有数量限制

Get方式与post方式的区别：

• Get方式主要是从服务器获取信息；
• Post主要是想服务器提交信息；
• Get方式在通过URL提交数据，数据在URL中可以看到；
• POST方式，数据放置在请求体中提交。
• GET方式提交的数据大小受限制一般1kb（不同浏览器也会有不同）；
• POST则没有此限制。
• 编码方式不同，

小总结：

1. 搭建服务器（tomcat），使用服务器的原因：为了别人能远程访问到，需要把开发的Java项目部署到服务器中；服务器的搭建步骤（看前面）
2. 创建web后端项目，在idea集成了tomcat，并将我们的项目部署到tomcat中；创建servlet程序，继承了httpservlet，init，service，destory，doGet，doPost；作用：接受请求数据（请求行，请求体，请求头，请求中自己提交的数据）；处理；向前端响应（404，200，500）；
3. 发送http请求，请求行，请求体，请求头。。。
4. 过滤器，在进入servlet之前，可以配置那些请求进入到指定的过滤器中，完成一些公共的处理
5. 前端发送请求
6. 后端如何向前端反馈更多的信息

5.1表单向后端发送请求，属于同步请求，同步请求：一端发送请求，立马给个回应，会用回应的内容覆盖浏览器的内容，这样会打断前端其他的正常操作，在现在的前端中不太友好

5.2异步请求：可以使用一个js中剔红的内容，像后端发送请求，服务器响应的内容，会被就是、对象接受，然后在js中，用接收到的内容，局部的更新网页，不会打断当前网页的正常操作，现在的前后端交互，基本上都是基于ajax的异步操作

Ajax（前后端的异步交互技术）

使用ajax可以无刷新状态更新页面，提升了用户体验，不打断用户操作

前后端交互中出现一个跨域问题：

在前端服务页面（8848）接受后端服务相应的数据（8080）

使用Ajax技术前端后端交互，前端默认会阻止进行，

跨域问题

从一个服务访问另一个服务，只要一个域名，协议，端口不同都属于跨域

后端解决跨域问题：

 

Web前端：

html、css、JavaScript、vue.js、ElementUI、ajax、网络请求、http请求

前端的作用：

1. 让用户输入数据
2. 显示数据

JavaSE贯穿于整个Java始终

JavaEE：servlet servlet+applet 服务端程序

用JDBC后数据库连接，数据库响应给后端，后端再处理后再给前端响应

示意图如下：

 使用POST方式接收数据

@Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //删除父类中的函数

        System.out.println("doPost");
        //接受请求中自己提交的数据
       req.setCharacterEncoding("utf-8");//设置请求中数据解码的编码格式,只在post中
        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));
}

运行结果

 不使用数组时，多个数据只能接受到第一个数据

 String hobby = req.getParameter("hobby");
        //只能接受一个数据
        System.out.println(hobby);

运行结果如下：

 代码改后，服务器也重启后仍不能显示的解决方案：

1.build工具中的Build Artifact，点击clean

 2.重新部署tomcat项目，删除后重新部署（记得改名字）

 

 打印请求信息

//接收请求中的其他数据
        System.out.println(req.getMethod()+"请求方式");
        System.out.println(req.getRequestURI()+"请求的地址");
        System.out.println(req.getScheme()+"");
        System.out.println(req.getServerName()+"服务器自己的名字（ip/域名）");
        System.out.println(req.getServerPort()+"服务器自己端口");
        System.out.println(req.getProtocol()+"请求协议");
        System.out.println(req.getRemoteAddr()+"客户端ip/域名");
        System.out.println(req.getRemotePort()+"客户端端口");

运行结果如下：

 

//接收请求头数据，后期提交时会将信息放入请求体中，存入浏览器中
        System.out.println(req.getHeader("Content-Type"));
        System.out.println(req.getHeader("Content-Length"));
        System.out.println(req.getHeader("User-Agent"));

运行结果如下：

会显示点脑系统，浏览器版本等

响应状态码：

• 200 请求成功
• 404 访问到了服务器，但是目标资源没有（项目名字和地址
• 500 服务器内部错误，Java内部有错误，代码错误

设置响应

 resp.setHeader("Content-Type","text/html;charset=utf-8");
        //设置响应头
        PrintWriter writer = resp.getWriter();
        writer.write("<h1>你好客户端</h1>");
        //响应内容

响应内容

 过滤器

Filter也称之为过滤器，它是Ser vlet技术中最实用的技术，WEB开发人员通过
Filter技术，对web服务器管理的所有web资源：例如Ser vlet, 从而实现一些
特殊的功能。例如实现URL级别的权限访问控制（通过配置实现对过滤内容的选择）、过滤敏感词汇、压缩响应信息等一些高级功能。
作用：对服务器web资源进行拦截（权限控制，通过拦截资源进行权限控制，
是否可以访问）
Ser vlet API中提供了一个Filter接口，开发web应用时，如果编写的Java类实
现了这个接口，则把这个java类称之为过滤器Filter。通过Filter技术，开发人
员可以实现用户在访问某个目标资源之前，对访问的请求和响应进行拦截.

验证用户是否登录（过滤器）

配置过滤器

<!--  配置过滤器-->
    <filter>
        <filter-name>encodFilter</filter-name>
        <filter-class>WebBack.Servelet.Filter.EncodFilter</filter-class>
    </filter>
<!--    配置进入过滤器的映射地址-->
    <filter-mapping>
        <filter-name>encodFilter</filter-name>
        <url-pattern>/*</url-pattern>
<!--        进入当前的过滤器，可配置多个过滤器-->
    </filter-mapping>

此时表示已经进入了过滤器

前端发送请求

表单向后端发送请求，属于同步请求

同步请求：你发送一个请求，浏览器页面会立刻被覆盖，在现在的前端中，并不友好

与后端交互判断能否注册

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      String account=req.getParameter("account");
      resp.setHeader("Content-type","text/html;charset=utf-8");
      if (account.equals("admin")){
    resp.getWriter().print("账号已被注册");
      }else {
          resp.getWriter().print("账号可以注册");
      }

异步请求，可以使用js提供的对象，像后端发送请求，服务器相应的内容会被js对象接受，然后再js中用接收到的内容局部更新，页面操作不会被打断，前端正常输入时可同时与后端进行交互，后端响应的数据不会影响前端的正常操作

 

 图中的“响应”是过滤器中的

跨域问题

前后端交互

在前端的服务页面中（8848），要接收后端服务器的数据（8080），使用ajax计数前后端交互，前端会默认阻止，不让前端服务随意接收数据，为了安全

跨域问题解决：前端解决，后端解决，在响应头中设置说明，告知浏览器，此次响应是安全的