AJAX

AJAX 概念

image.png
JavaScript前端编程语言
XML标记语言存储数据

AJAX 使用

使用Servlet+JSP：
原有技术使用Servlet将数据存储在request和reponse的Attribute域中
在将数据的键值对和JSP绑定在JSP中渲染，并不能直接在HTML展示
image.png

  1. 使用AJAX技术代替原有Servlet+JSP技术

image.png
使用AJAX+HTML：
image.png
《前后端分离》
image.png

异步和同步

  1. AJAX异步交互技术

image.png
image.png image.png

同步交互

image.png
用户请求服务器，服务器处理3s同时客户端等待3s这就是同步

异步交互

image.png
客户端请求服务器同是可以有其他操作就是异步

总结：异步操作无需等待服务器处理，同步需要等待

AJAX 使用

AJAX: https://www.w3school.com.cn/js/js_ajax_intro.asp
image.png
image.png
两端交互（ 客户端 -> Ajax -> 服务端）

  1. 服务端(AjaxServlet)输出响应数据

image.png

  1. 中间商Ajax用于和服务器交互数据

image.png

  1. Ajax向服务器发送请求

image.png

  1. 客户端获取服务器响应的数据

image.png

实例操作

  1. AJAX - XMLHttpRequest 对象

image.png

  1. XMLHttpRequest 对象用于同服务器交换数据

image.png
image.png

  1. AJAX 获取服务器响应数据

image.png
image.png

代码示例

  1. 创建HTML页面获取AJAX对象

image.png

  1. 创建对应的Servlet—AjaxServletDemo

image.png

  1. 访问对应页面 弹出的reponseText对应的是服务器写入数据

image.png

  1. 客户端浏览器摁F12 筛选异步请求类型XHR

    image.png

    AJAX 案例

    image.png
    运行逻辑：
    image.png image.png

    后端 Servlet

  2. 创建对应的Servlet(selectUserServlet)

  3. 接收用户名getParameter(“username”)
  4. 调用service中封装的查询方法(selectUser)

image.png
image.png

前端 HTML+AJAX

image.png
F12客户端调试显示异步请求
image.png

AXIOS

Axios 异步框架

image.png
AXIOS:https://www.axios-http.cn/docs/intro

实例操作

image.png
image.png
TIPS: 回调函数.then(function(resp)) 才是服务端响应的数据

代码示例

  1. 创建对应的AxiosServlet请求
    1. 获取客户端键值对参数
    2. 发送响应数据

image.png

  1. 创建对应的HTML文件
    1. 引入Axios的jar包
    2. 分别发送Get和Post请求

image.png
总结：AXIOS简化AJAX请求，只需要提供对应的请求方法和地址，使用then(function(xxx))直接获取响应结果
image.pngimage.png

Axios 请求方式别名

image.png
image.png
代码实现：
image.png

案例： 验证用户登录

  1. 创建对应的AxiosServlet
    1. 获取客户端参数
    2. 调用service方法查询用户账户是否存在
    3. 服务端设置String响应数据

image.png

  1. 在注册页面register.html中设置Axios请求判断
    1. 给客户端绑定onblur事件
    2. 获取用户名的的值并创建变量赋值
    3. 调用axios请求方法设置请求方式和url并传递用户名
    4. 获取服务端返回的数据，判断该数据

image.png

JSON

JSON 概念

image.png
image.pngimage.png

JSON 基础语法

  1. JSON语法与JavaScript基本一致
  2. JSON需要对键值对同时加””，JS只有值加
  3. 多个值之间使用，隔开

image.png
JSON的值可以是多种数据类型
image.pngimage.png
JSON的值可以通过变量名获取数据
image.png
变量名为json 直接调用对应的键 可以获取值 例如json.name = “zhangsan”
image.png

JSON 数据转换Java

image.png
JSON作为数据的载体在客户端以及服务器中通过异步的方式传递数据

Fastjson 库

image.png
Fastjson 使用：
image.png
代码实现：

  1. 引入坐标

image.png

  1. Java对象转JSON 调用JSON.toJSONString(obj)image.png

image.png

  1. JSON转Java对象转调用JSON.praseObject(jsonString,obj.class)

image.png
image.png

Axios+JSON 案例

查询所有

image.png
查询所有

  1. 页面加载完成后发送异步请求，获取数据
  2. 商品brand.html页面异步访问Web层对应的Servlet
  3. Servlet调用Service层查询所有方法将List数据转换为JSON字符串
  4. 将JSON字符串响应给页面遍历展示数据

image.png
代码实现：

  1. 创建selectAllServlet的Web层

image.png

  1. 浏览器直接访问web层接口测试JSON数据

image.png

  1. 创建对应的页面brand.html使用拼接表单渲染JSON数据

image.png

新增数据

image.png
添加数据

  1. 点击提交按钮后后发送异步请求，传递数据给对应Servlet
  2. 后端创建Servlet，调用Service添加方法
  3. addServlet获取浏览器提交的JSON数据后反序列化并添加响应标识
  4. 前端页面判断后端web层响应标识成功则跳转回查询所有页面

image.png
TIPS: 查询一般使用GET请求，增删改一般使用POST请求
代码示例：

  1. 后端创建对应的Servlet接收浏览器传递的数据
    1. 因为浏览器传递的是JSON格式的数据不能使用getParameter接收
    2. 获取浏览器POST请求体数据可以使用getReader()字符输入流获取
    3. 读取获取的字符流数据使用readLine()方法读取每一行数据
    4. 将每一行JSON数据使用JSON.parseObject反序列化成JAVA对象

image.png

  1. 前端Axios 异步请求POST添加，并创建动态JSON表单数据
    1. 前端axios异步请求所以不走表单同步action提交
    2. 绑定提交按钮点击事件
    3. 定义JSON动态表单数据formData
    4. 获取浏览器表单数据并赋值给动态表单formData
      1. 其中单选框不能直接赋值需要通过标签名判断是否被选中
    5. 发送POST请求，data为动态表单formData
    6. 使用.then(funtion(xxx))获取服务端响应数据并判断是否添加成功

image.png

  1. 页面调试结果

image.png
image.png
image.png