【归纳总结3】JavaWeb之Ajax、axios、json和fastjson

最新推荐文章于 2023-03-20 17:09:22 发布

阿白白白白白白

最新推荐文章于 2023-03-20 17:09:22 发布

阅读量224

点赞数 2

分类专栏： javaweb 文章标签： ajax json servlet

本文链接：https://blog.csdn.net/weixin_45905080/article/details/126108350

版权

javaweb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Ajax

异步的javaScript和XML
● javascript：表明该技术和前端相关
● xml：以此进行数据交换
xml：数据交换格式，将数组集合转换成xml文件

作用

与服务器进行数据交换
● 通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器

以前的流程使用ajax的流程

异步交互（不刷新页面的情况下更新局部页面）
不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术
● 同步：一个时间只能做一个事
● 异步：一个时间段可以处理多个事情

应用场景

注册登录：一离焦就验证；联想功能

AjaxDemo1.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AjaxDemo</title>
</head>
<body>
    <script>
        //原生ajax
        //发送ajax请求
        //1.创建对象 适配所有浏览器
        var xhttp; //先声明
        if (window.XMLHttpRequest) {  //判断浏览器的version
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //2。写ajax的基本配置
        //请求类型；true：异步请求，flase：同步请求——>默认使用 true
      xhttp.open("GET", "http://localhost:8080/AjaxDemo/ajaxServlet", true);
   //使用全路径

        //3.发送请求
        xhttp.send();

        //4.接受响应
        xhttp.onreadystatechange = function() {
            //4:响应已经处理完毕；200:响应成功
            if (this.readyState == 4 && this.status == 200) {
                console.log(this.responseText);//封装响应结果；等待响应完毕之后才能打印结果
            }
        };
    </script>
</body>
</html>
<!--ajaxServlet.java-->
@WebServlet("/ajaxServlet")
public class ajaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("后端接受到请求");

        //设置响应头
        response.setContentType("text/html;charset=utf-8"); //设置响应头
        response.getWriter().write("多喝水多喝汤");//谁访问servlet，则返回给谁；ajax访问servlet，则返回给ajax的html
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        this.doGet(request, response);

    }
}

axios

前端框架
对原生ajax进行封装，实现简写

操作步骤

引入axios的js文件

 <script src="js/axios-0.18.0.js"></script>

使用axios发送异步请求（get/post请求），并获取响应结果
● method 属性：设置请求方式的，取值为 get 或者 post
● url 属性：书写请求的资源路径。若为get 请求，将请求参数拼接到路径的后面，格式为：

url?参数名=参数值&参数名2=参数值2

url:"http://localhost:8080/ajax_Demo2_brand/updateBrandServlet?id="+this.id

● data 属性：作为请求体被发送的数据；即如果是 post 请求的话，数据需要作为 data 属性的值。
● then() 需要传递一个匿名函数。 then() 中传递的匿名函数称为回调函数，即该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

<!--发送get请求-->
axios({
method:"get",
url:"",
}).then(function (resp){
})
<!--发送post请求-->
axios({
method:"post",
url:"",
data:""
}).then(function (resp){
})

Example of POST请求


1.拽js文件
2.创建html文件，并在<title>下加 <script  src="js/axios-0.18.0.js"></script>
//1.ajaxServlet文件
@WebServlet("/ajaxServlet")
public class ajaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       request.getParameter("name");
        System.out.println("后端接受到请求");
        //设置响应头
        response.setContentType("text/html;charset=utf-8"); //设置响应头
        response.getWriter().write("多喝水多喝汤");//谁访问次servlet，则返回给谁；ajax访问次servlet，则返回给ajax的html
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        this.doGet(request, response);
    }
}
//2.axios_demo1.html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axiosdemo1</title>
  <script  src="js/axios-0.18.0.js"></script>  //导axios的jar包
  <script>
    //post请求
    axios({
      method:"post",
      url:"http://localhost:8080/AjaxDemo/ajaxServlet",
      data:"name=z3" //post里才有直接能使用的data属性
    }).then(function (resp) {
      console.log(resp.data) //返回一个对象，将resp传输的话封装在里面
    })
  </script>
</head>
<body>
</body>
</html>

Example of GET 请求

//1.ajaxServlet文件
@WebServlet("/ajaxServlet")
public class ajaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("后端接受到请求");
        //设置响应头
        response.setContentType("text/html;charset=utf-8"); 
        response.getWriter().write("多喝水多喝汤");//谁访问次servlet，则返回给谁；ajax访问次servlet，则返回给ajax的html
    }
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        this.doGet(request, response);
    }
}
//2.axios_demo1.html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axiosdemo1</title>
  <script  src="js/axios-0.18.0.js"></script>
  <script>
    //创建axios：get方式
    axios({
      method:"get",//请求方法：请求方式
      url:"http://localhost:8080/AjaxDemo/ajaxServlet",
    }).then(function (resp){ //回调函数，响应对象在resp里
      console.log(resp.data) //返回一个对象，将resp传输的话封装在里面；get方式得通过resp.data进行取数据
    })
  </script>
</head>
<body>
</body>
</html>

Json

一种数据交换格式；Javascript对象表示法
发送异步请求时，若请求参数为JSON格式，那请求方式须是POST——>JSON串要放在请求体中

User{id=1, name='张三', pass='123'} //java格式
//json格式：对象
{
"id":1,
 "name":"张三",
 "pass":"123"
}
//数组:
        //2.1存对象数组
[
{
"id":1,
 "name":"张三",
 "pass":"123"
},
    {
"id":2,
 "name":"张三",
 "pass":"123"
}
]
        //2.2存字符串数组
[
"li1","wu3"
]

基础语法

格式

必须用双引号
var 变量名 = ‘{“key”:value,“key”:value,…}’
2.value的数据类型
● 数字（整型/浮点型）
● 字符串（使用双引号括起来）
● 逻辑值（true/false）
● 数组（在方括号中）
● 对象（在花括号中）
● null

var jsonStr = '{
"name":"zhangsan",
"age":23,
"addr":["北京","上海","西安"]
}'

json转换格式

前端发送请求时，若是复杂的数据就会以 json 提交给后端；而后端若需要响应一些复杂的数据时，也需要以 json 格式将数据响应回给浏览器。
● 请求数据：JSON字符串转为Java对象
● 响应数据：Java对象转为JSON字符串

Fastjson

实现Java对象和JSON字符串的相互转换

操作步骤

导入坐标

<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>fastjson</artifactId>
  <version>1.2.62</version>
</dependency>

2.Java对象转JSON

 String jsonStr = JSON.toJSONString(obj);

JSON字符串转Java对象

User user = JSON.parseObject(jsonStr, User.class);

example

servlet+json
● 此时，两个html页面跳转不需要经过servlet
● 当打开浏览器，默认打开index页面，eg：index.html——>项目启动自动打开index页面，方便
● servlet中response的getParameter和getReader

getReader.readLine():当传入键值对格式
getParameter():当传入一个值

● json异步处理：不刷新页面的情况下更新代码——>用id命名让每行数据成为动态的
● 导包：mysql、fastjson、javax-servlet

<dependency>
  <groupId>javax.servlet</groupId>
  <artifactId>javax.servlet-api</artifactId>
  <version>4.0.1</version>
  <scope>provided</scope>
</dependency>
<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>  //mysql导包
  <version>8.0.26</version>
</dependency>
<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>fastjson</artifactId> //json导包
  <version>1.2.62</version>
    </dependency>