[web] Ajax,JSON

最新推荐文章于 2022-10-14 15:12:32 发布

秃小陈

最新推荐文章于 2022-10-14 15:12:32 发布

阅读量143

点赞数

分类专栏：笔记 Java JavaScript 文章标签： java ajax json

本文链接：https://blog.csdn.net/m0_47652477/article/details/118072356

版权

笔记同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

Java

36 篇文章 0 订阅

订阅专栏

JavaScript

11 篇文章 0 订阅

订阅专栏

第一章 Ajax

1.1 概念

Ajax(Asynchronous JavaScript And XML): 异步的JS和XML

是一种用于创建快速动态网页的技术
是一种在无需刷新页面的情况下,能够更新部分页面内容的技术
1. 通过在后台与服务器的少量数据交换,我们就可以实现异步更新

同步和异步的区别

在这里插入图片描述

1.2 原生JS实现Ajax

用的不多,因为很多框架都将他封装了

不多bb,直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js实现</title>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<div id="myDiv"></div>

<script>
    function fun() {
        //创建ajax必须创建的对象,下面这些操作仅仅为了兼容性
        let xmlHttp;
        if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest()
        } else {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
        }
        //open方法的参数
        //method：请求的类型；GET 或 POST
        //url：文件在服务器上的位置
        //async：true（异步）或 false（同步）
        xmlHttp.open("GET", "ajaxServlet?username=Tom", true)

        //send方法的参数
        //string：仅用于 POST 请求,get请求的时候可以不填写,就像下面这样
        xmlHttp.send()//如果请求方法是POST,那么我们就需要在send方法中定义参数

        //获取响应结果
        //下面的xmlHttp.onreadystatechange就是检测ajax的就绪状态是否发生改变
        //存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
        //0: 请求未初始化
        //1: 服务器连接已建立
        //2: 请求已接收
        //3: 请求处理中
        //4: 请求已完成，且响应已就绪
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                document.getElementById("myDiv").innerHTML = document.getElementById("myDiv").innerHTML + "</br>" + xmlHttp.responseText;
            }
        }
    }
</script>
</body>
</html>

//这个是模拟的服务器
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取异步请求的参数
        String username = request.getParameter("username");
        System.out.println(username);
        response.setCharacterEncoding("utf-8");
        response.getWriter().write("fuck you " + username + "!");

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

实现的效果就是,每次我们点击按钮,返回的都是fuck you tom

1.3 Jquey 实现Ajax

三种实现方式

$.ajax()
$.get()
$.post()

$.ajax()

不多bb,直接看代码把

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<div id="myDiv"></div>

<script>
    function fun() {
        $.ajax({
            url: "ajaxServlet", //请求路径
            type: "POST",
            data: {username: "Jack"},
            //下面是回调函数
            success(res) {
                document.getElementById("myDiv").innerHTML = document.getElementById("myDiv").innerHTML + "</br>" + res;
            },
            error(err) {
                console.log(err);
            },
            //设置响应的数据的格式
            //dataType: "JSON"  如果不加的话,那么默认返回String
        })
    }
</script>
</body>
</html>

$.get()

没什么好说的,就是上面的请求的缩减版

$get(url,[data],[callback],[type])

这里的type就是上面的dataType, callback懂得都懂,

如果不写type,那么返回的数据的类型由response的ContentType响应头里面的内容决定决定

例如:

`$.get("ajaxServlet",{username: "Jack"},function(res){alert(res)},"JSON")`

$.post()

没什么好说的

$post(url,[data],[callback],[type])

例如:

`$.post("ajaxServlet",{username: "Jack"},function(res){alert(res)},"JSON")`

第二章 JSON

2.1 概念

JSON(JavaScript Object Notation): JavaScript对象表示法

JSON是存储和交换文本信息的语法,类似XML

2.2 语法

基本规则

数据在名称/值对中: json数据是由键值对构成的
1. key 可以用单双引号引起来,也可以不用,都行
2. value里面基本上可以放任何东西,可以放
  1. 数字
  2. 字符串
  3. 逻辑值
  4. 数组
  5. 对象
数据由括号分隔:多个键值对由逗号分隔
花括号保存对象
方括号保存数组

获取数据的方式

JSON对象.键名
JSON对象[“键名”]
数组[索引]
数组[索引].键名

2.3 JSON数据和Java对象的相互转换

为什么要学习这个?

因为,在Java服务器中,我们对数据的处理要通过Java对象而不是JSON数据
而客户端和服务器之间传递的数据是JSON
客户端得到和使用的数据是JSON

我们转化要用到解析器

常见的解析器有: Jsonlib , Gson , fastjson , jackson
这里我们将使用jackson

我们只要提前导入jar包就行了

JSON转化为Java对象

使用步骤

导入jar包
创建ObjectMapper核心对象
调用方法

Shut up and just see my code

 //json转化为对象
    @Test
    public void test04() throws IOException {
        String data = "{\"name\":\"你爹\",\"age\":16,\"gender\":\"男\"}";

        ObjectMapper om = new ObjectMapper();

        Person person = om.readValue(data, Person.class);
        System.out.println(person);//Person{name='你爹', age=16, gender='男'}


    }

常见的方法

<Class> readValue(json字符串数据,Class)

Java对象转化为JSON

使用步骤

导入jackson的相关jar包
创建jackson核心对象 objectMapper
调用方法

常见的两个方法

<参数1> writeValue(参数1,obj):
      参数1:
          File: 将obj对象转换为JSON字符串,并保存在指定的文件中
          Writer: 将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
          OutputStream: 将obj对象转换为JSON字符串,并将json数据填充到字节输出流中
              
String WriteValueAsString(obj): 传入一个对象,转化为json字符串

代码如下

package com.test;

import com.domain.Person;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;

import java.io.File;
import java.io.FileWriter;
import java.io.IOException;

public class JacksonTest {

    //测试方法
    @Test
    public void test01() throws IOException {
        Person p = new Person();
        p.setAge(16);
        p.setName("你爹");
        p.setGender("男");

        //创建核心对象
        ObjectMapper om = new ObjectMapper();
        

        //我们现在用第二种方法
        System.out.println(om.writeValueAsString(p));//{"name":"你爹","age":16,"gender":"男"}

        //我现在想要将数据写到D盘里面
        om.writeValue(new File("F://a.txt"), p);//确实在盘中出现了这个文件

        //关联到一个字节输出流中
        om.writeValue(new FileWriter("f://b.txt"), p);

    }

}

一些注解

@JsonFormat(pattern = "xxx"): 用在类的成员变量上边,一般用于对日期的格式化
@JsonIgnore: 用在成员变量上面,当我们不想让这个属性加入到JSON中时,就在那个属性上面加上这个注解

复杂的java的转换

List的转换

转化出来是一个数组

代码如下

@Test
    public void test02() throws IOException {
        Person p1 = new Person();
        p1.setAge(16);
        p1.setName("你爹");
        p1.setGender("男");

        Person p2 = new Person();
        p2.setAge(16);
        p2.setName("你爹");
        p2.setGender("男");

        Person p3 = new Person();
        p3.setAge(16);
        p3.setName("你爹");
        p3.setGender("男");

        Person p4 = new Person();
        p4.setAge(16);
        p4.setName("你爹");
        p4.setGender("男");

        List<Person> ps = new ArrayList<>();
        ps.add(p1);
        ps.add(p2);
        ps.add(p3);
        ps.add(p4);

        //创建核心对象
        ObjectMapper om = new ObjectMapper();

        System.out.println(om.writeValueAsString(ps));
        //[{"name":"你爹","age":16,"gender":"男"},{"name":"你爹","age":16,"gender":"男"},{"name":"你爹","age":16,"gender":"男"},{"name":"你爹","age":16,"gender":"男"}]

    }

Map的转换

转化出来的格式和对象一样

 @Test
    public void test03() throws IOException {
        HashMap<String, Object> map = new HashMap<>();

        map.put("name", "张三");
        map.put("age", "张三");
        map.put("qwq", "张三");
        map.put("gender", "张三");


        //创建核心对象
        ObjectMapper om = new ObjectMapper();
        
        System.out.println(om.writeValueAsString(map));
        //{"gender":"张三","name":"张三","qwq":"张三","age":"张三"}


    }

2.4 综合案例

需求分析

校验用户名是否存在

服务器响应的数据的类型可以由下面两种东西决定
- 优先级最高的就是在请求的方法里面设置的响应格式的参数
- 其次就是根据响应头的ContentType里面的内容决定

代码实现

//html网页
<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<form action="">
    <label>
        <input id="username" type="text" name="username" placeholder="请输入用户名">
        <span id="s_username"></span>
    </label>

    <label>
        <input type="text" name="password" placeholder="请输入密码">
    </label>

    <input type="submit" value="注册">

</form>

<script>
    $(function () {
        $("#username").blur(function () {
            //获取username文本输入框的值
            let username = $(this).val();
            //发送ajax请求
            $.get("FindServlet", {username: username}, res => {
                //我们收到的res是一个String,所以我们要在$.get()的type参数规定为JSON
                $("#s_username").html(res.msg)
                $("#s_username").css("color", "pink")
            }, "JSON")
        })
    })
</script>

</body>
</html>

//Servlet实例
package com.Servlet;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/FindServlet")
public class FindServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取用户名
        String username = request.getParameter("username");
        Map<String, Object> map = new HashMap<>();

        ObjectMapper om = new ObjectMapper();

        //调用service层来判断用户名是否存在,这里我们就写死
        if ("Tom".equals(username)) {
            //存在
            map.put("userExist", true);
            map.put("msg", "用户名已经存在了,傻逼!");
        } else {
            //不存在
            map.put("userExist", false);
            map.put("msg", "该用户名可以使用");
        }
        //设置响应信息
        response.setCharacterEncoding("utf-8");
        om.writeValue(response.getWriter(), map);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

秃小陈

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
[web] Ajax,JSON

讲的比较粗，但是作为了解也是够了第一章 Ajax1.1 概念同步和异步的区别1.2 原生JS实现Ajax1.3 Jquey 实现Ajax三种实现方式$.ajax()$.get()$.post()第二章 JSON2.1 概念2.2 语法基本规则获取数据的方式2.3 JSON数据和Java对象的相互转换JSON转化为Java对象常见的方法Java对象转化为JSON常见的两个方法一些注解复杂的java的转换2.4 综合案例需求分析代码实现第一章 Ajax1.1 概念Ajax(Asynchronous Ja
复制链接

扫一扫