前言
🎄：CSDN的小伙伴们大家好，今天跟大家分享一个我们在web开发中常用的前后台数据交互的两款工具AJax和JSON。如果这篇文章对你有用，麻烦给我点个小赞以示鼓励吧🎄
🏡：博客主页：空山新雨后的java知识图书馆
☀️：今天天气晴朗，春天的温度。
📝: 生活不是苦难，也不是享乐，而是我们应当为之奋斗并坚持到底的事业。
——托克维尔📝
📖上一篇文章：JQuery基础学习📖
👏欢迎大家一起学习，进步。加油👊

文章目录

一、Ajax相关概念
二、AJax的实现方式
三、JSON相关概念
四、JSON的语法规则

一、Ajax相关概念

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

异步与同步的概念

在客户端和服务器端相互通信的基础上，
同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

那么Ajax作为异步的JavaScript和xml，就意味着，可以在不重新加载网页的资源的情况下，对部分网页内容进行更新。
就比如我们在搜索百度或者其他平台进行搜索的时候，当你搜索的时候，会出现一个联想的框，这个框就是Ajax技术实现的，在不重新加载资源的情况下，对部分内容进行更新的操作。

二、AJax的实现方式

2.1、JavaScript原生的实现方式

这种实现方式一般用的很少，可不用记忆

<!-- *@packageName *@className origin *@author wang *@date 2022/3/25 9:41 *@Description -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生的js实现异步请求</title>
</head>
<script> function fun() { 
      //创建Ajax对象 var xhttp; if (window.XMLHttpRequest) { 
      xhttp = new XMLHttpRequest(); } else { 
      // code for IE6, IE5 xhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //建立连接 /* 参数： 1. 请求方式：GET、POST * get方式，请求参数在URL后边拼接。send方法为空参 * post方式，请求参数在send方法中定义 2. 请求的URL： 3. 同步或异步请求：true（异步）或 false（同步） */ //异步 // xhttp.open("get","../ajaxServlet?username=tom",true); //同步 xhttp.open("get", "../ajaxServlet?username=tom", true); //发送请求 xhttp.send() //接收响应并处理 xhttp.onreadystatechange = function () { 
      if (this.readyState == 4 && this.status == 200) { 
      //接收响应数据并弹出 var responseText = xhttp.responseText; alert(responseText) } }; } // </script>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>

2.2、JQuery的实现方式

2.2.1、方式一：`$.ajax`

语法：$.ajax({键值对});
代码演示

<!-- *@packageName *@className origin *@author wang *@date 2022/3/25 9:41 *@Description -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery的方式实现异步请求</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script> function fun() { 
      $.ajax({ 
      url: "../ajaxServlet", //方式一 // date:"username=zhangsan&age=16" // 方式二 data: { 
     "username": "zhangsan", "age": 13}, type: "post",//默认为get success: function (date) { 
      //该date为服务器响应的数据 alert(date); }, error: function () { 
      alert("出现错误") }, dataType: "text"//设置接受到的响应数据的格式 }); } </script>
</head>

<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>

效果演示

2.2.2、方式二：`$.get()：发送get请求`

语法：$.get(url, [data], [callback], [type])

参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型

代码演示

<!-- *@packageName *@className origin *@author wang *@date 2022/3/25 9:41 *@Description -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery的方式实现异步请求2,get方式</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script> /* * $.get()：发送get请求 * 语法：$.get(url, [data], [callback], [type]) * 参数： * url：请求路径 * data：请求参数 * callback：回调函数 * type：响应结果的类型 * */ function fun() { 
      $.get("../ajaxServlet", { 
     username: "lisa", age: 13}, function (data) { 
      alert(data); }, "text"); } </script>
</head>

<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>

效果演示

2.2.3、方式三：`$.post()：发送post请求`

语法：$.post(url, [data], [callback], [type])

参数：
* url：请求路径
* data：请求参数
* callback：回调函数
*type：响应结果的类型

代码演示

<!-- *@packageName *@className origin *@author wang *@date 2022/3/25 9:41 *@Description -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery的方式实现异步请求2,post方式</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script> /* * $.get()：发送get请求 * 语法：$.get(url, [data], [callback], [type]) * 参数： * url：请求路径 * data：请求参数 * callback：回调函数 * type：响应结果的类型 * */ function fun() { 
      $.post("../ajaxServlet", { 
     username: "peter", age: 13}, function (data) { 
      alert(data); }, "text"); } </script>
</head>

<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>

效果演示

三、JSON相关概念

JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法，类似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON与xml的区别

xml表示

<?xml version="1.0" encoding="utf-8"?>
<country>
    <name>中国</name>
    <province>
        <name>黑龙江</name>
        <cities>
            <city>哈尔滨</city>
            <city>大庆</city>
        </cities>
    </province>
    <province>
        <name>广东</name>
        <cities>
            <city>广州</city>
            <city>深圳</city>
            <city>珠海</city>
        </cities>
    </province>
    <province>
        <name>台湾</name>
        <cities>
            <city>台北</city>
            <city>高雄</city>
        </cities>
    </province>
    <province>
        <name>新疆</name>
        <cities>
            <city>乌鲁木齐</city>
        </cities>
    </province>
</country>

JSON表示

{
    "name": "中国",
    "province": [{
        "name": "黑龙江",
        "cities": {
            "city": ["哈尔滨", "大庆"]
        }
    }, {
        "name": "广东",
        "cities": {
            "city": ["广州", "深圳", "珠海"]
        }
    }, {
        "name": "台湾",
        "cities": {
            "city": ["台北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["乌鲁木齐"]
        }
    }]
}

四、JSON的语法规则

4.1、基本的语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中
数据由逗号分隔，多个数据（键值对）之间由逗号分开
大括号 {} 保存对象
中括号 [] 保存数组，数组可以包含多个对象

JSON的数据都是由键值对构成的，JSON的书写格式：key：value
JSON的键可以是用引号引上，单引号双引号都可以。
值的取值类型为以下类型

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true 或 false）

数组（在方括号中） {“persons”:[{},{}]}

对象（在花括号中） {“address”:{“province”：“陕西”…}}

null

JSON获取数据的方式

json对象.键名
json对象[“键名”]
数组对象[索引]
代码演示

<!-- *@packageName *@className Json *@author wang *@date 2022/3/25 15:05 *@Description -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Json</title>
</head>
<script> //Json的基本定义格式 var person ={ 
     "name":"张三","age":23,"gender":true}; // alert(person); //Json的取值格式 /* * 1. json对象.键名 2. json对象["键名"] 3. 数组对象[索引]*/ //1. json对象.键名 var age = person.age; var name = person.name; // alert(name +":" + age);//张三：23 //JSON的嵌套定义格式 {} ->[] var persons = { 
     "persons":[{ 
     "name":"张三","age":23,"gender":true}, { 
     "name":"李四","age":25,"gender":true}, { 
     "name":"王五","age":26,"gender":true} ] };// alert(persons); // JSON获取值的格式2. json对象["键名"] var name1 = persons["persons"][1].name; // alert(name1)//李四 //JSON的嵌套定义格式的第二种[]->{} var persons2 = [{ 
     "name":"张三","age":23,"gender":true}, { 
     "name":"张三","age":23,"gender":true}, { 
     "name":"王五","age":23,"gender":true} ]; // alert(persons2); // JSON获取值的格式3. 数组对象[索引]*/ var name2 = persons2[2].name; alert(name2);//王五 </script>
<body>

</body>
</html>

JSON实现遍历的方式

<!-- *@packageName *@className Json *@author wang *@date 2022/3/25 15:05 *@Description -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Json2遍历</title>
</head>
<script> //Json的基本定义格式 var person = { 
     "name": "张三", "age": 23, "gender": true}; //JSON的嵌套定义格式的第二种[]->{} var persons2 = [{ 
     "name": "张三", "age": 23, "gender": true}, { 
     "name": "李四", "age": 23, "gender": true}, { 
     "name": "王五", "age": 23, "gender": true} ]; //Json的遍历格式 for (var key in person) { 
      //通过key获取值的方式，JSON对象[key],因为获取的key字符串形式的，所以可以用这种方式获取值， //而如果直接这样Json对象.key，则相当于Json."key"，当然是无法获取到值的。 //alert(key+":" + person.key);//gender:undefined..... //注意，key本身就是字符串形式，因此不需要加引号了 // alert(key + ":" + person[key]);//gender:true..... } //Json 遍历数组 for (var i = 0; i < persons2.length; i++) { 
      var p = persons2[i]; for (var key in p) { 
      alert(key + ":" + p[key]);//name:张三....name:李四........ } } </script>
<body>

</body>
</html>

# 五、JSON对象与java对象的相互转换

要实现JSON与java的互相转换，我们首先就得采用一些解析器，常见的解析器有Jsonlib，Gson，fastjson，jackson，今天我们使用Jackson，首先就需要导入Jackson的相关jar包，大家可以在CSDN搜索或者去官网下载。

5.1、JSON转为Java对象

导入jackson的相关jar包

创建Jackson核心对象 ObjectMapper

调用ObjectMapper的相关方法进行转换

readValue(json字符串数据,Class)

5.2、Java对象转换JSON

使用步骤：

导入jackson的相关jar包

创建Jackson核心对象 ObjectMapper

调用ObjectMapper的相关方法进行转换
1. 转换方法：
1、 writeValue(参数1，obj):
参数1：
File：将obj对象转换为JSON字符串，并保存到指定的文件中
Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
*2、writeValueAsString(obj):将对象转为json字符串
2. 注解：
1. @JsonIgnore：排除属性。
2. @JsonFormat：属性值得格式化
* @JsonFormat(pattern = “yyyy-MM-dd”)
注解是为了将一些无法转换的数据类型改变为我们期望的样式，
注解的位置应该在实体类的属性上方，或者相应的get方法上面
3. 复杂java对象转换
1. List：类似数组
2. Map：转换之后与java对象格式一致

代码演示

package com.study.test;

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

import java.io.BufferedWriter;
import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;

/** * @author wang * @version 1.0 * @packageName com.study.test * @className JsonTransferTest * @date 2022/3/25 16:15 * @Description JSON与java对象的转换测试类 */
public class JsonTransferTest { 
   

    @Test
    public void testJsonChangeTOJava() throws IOException { 
   
        Person zhangSan = new Person("张三", 22, "男");

        Person lisi = new Person("李四", 29, "男");
        //将java对象转换为JSON对象的方式一：
        /*1. 转换方法： 1、* writeValue(参数1，obj): 参数1： File：将obj对象转换为JSON字符串，并保存到指定的文件中 Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中 OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中 2、* writeValueAsString(obj):将对象转为json字符串 */

// 2. 创建Jackson核心对象 ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        String json = null;
// 先使用第二种方式进行转换
        try { 
   
            json = mapper.writeValueAsString(zhangSan);
        } catch (JsonProcessingException e) { 
   
            e.printStackTrace();
        }
        System.out.println(json);//{"name":"张三","age":22,"gender":"男"}

        File file = new File("E:\\javaPractice\\WebProject2\\Ajax&JSON\\src\\com\\study\\files\\a.txt");
        //第二种方式，写进文件里面
        mapper.writeValue(file, zhangSan);

        FileWriter file2 = new FileWriter("E:\\javaPractice\\WebProject2\\Ajax&JSON\\src\\com\\study\\files\\b.txt");

        mapper.writeValue(file2, lisi);


    }


    @Test
    public void testJsonChangeTOJava2() throws Exception { 
   
        Person zhangSan = new Person("张三", 22, "男", new Date());

        Person lisi = new Person("李四", 29, "男", new Date());

        //注解来获取对应的转换之后的JSON对象

        ObjectMapper mapper = new ObjectMapper();
        String z = mapper.writeValueAsString(zhangSan);
        System.out.println(z);
        //没有转换之前的输出：{"name":"张三","age":22,"gender":"男","date":1648197658090}格式不好看
        //使用@JsonIgnore注解之后：{"name":"张三","age":22,"gender":"男"}，对于某些需求来说也不够好
        //使用@JsonFormat(pattern = "yyyy-MM-dd")注解之后：{"name":"张三","age":22,"gender":"男","date":"2022-03-25"}
        //就可以达到我们想要的不同的结果了。

    }


    /** * @Date 2022/3/25 16:58 * @Param * @Return void * @MetodName testJsonChangeTOJava3 * @Author wang * @Description list集合的转换 */
    @Test
    public void testJsonChangeTOJava3() throws Exception { 
   
        Person zhangSan = new Person("张三", 22, "男", new Date());

        Person lisi = new Person("李四", 29, "男", new Date());

        Person wangwu = new Person("王五", 35, "男", new Date());
        //注解来获取对应的转换之后的JSON对象

        ArrayList<Person> people = new ArrayList<>();
        people.add(zhangSan);
        people.add(lisi);
        people.add(wangwu);

        ObjectMapper mapper = new ObjectMapper();
        String z = mapper.writeValueAsString(people);
        System.out.println(z);

        //[{"name":"张三","age":22,"gender":"男","date":"2022-03-25"},
        // {"name":"李四","age":29,"gender":"男","date":"2022-03-25"},
        // {"name":"王五","age":35,"gender":"男","date":"2022-03-25"}]
    }

    /** * @Date 2022/3/25 17:01 * @Param * @Return void * @MetodName testJsonChangeToJava4 * @Author wang * @Description map集合转换为JSON对象 */
    @Test
    public void testJsonChangeToJava4() throws Exception { 
   
        HashMap<String, Object> map = new HashMap<>();
        map.put("name", "张三");
        map.put("age", 12);
        map.put("gender", "男");

        //创建ObjectMapper对象
        ObjectMapper mapper = new ObjectMapper();
        //转换
        String s = mapper.writeValueAsString(map);
        System.out.println(s);//{"gender":"男","name":"张三","age":12}


    }


    /** * @Date 2022/3/25 17:21 * @Param * @Return void * @MetodName testJsonChangeToJava5 * @Author wang * @Description JSON转java对象 */
    @Test
    public void testJsonChangeToJava5() throws Exception { 
   
        String json = "{\"name\":\"王五\",\"age\":35,\"gender\":\"男\",\"date\":\"2022-03-25\"}";

        ObjectMapper mapper = new ObjectMapper();
        Person person = mapper.readValue(json, Person.class);
        System.out.println(person);//Person{name='王五', age=35, gender='男'}
    }
}

# 六、案例练习：校验用户名是否存在

案例描述：在我们注册一个网站的用户时，网站会对用户名进行一个去重的做法，也就是不能重复注册相同的名字，因此需要实现这个功能。
解决思路
1、首先可以在注册的页面给用户名标签绑定一个离焦事件，当用户输入完成时就发送Ajax请求，将用户名发送到服务器端的Servlet中。
2、Servlet在数据库中操作，查询有没有与该用户相同的名字，如果有，就可以存一个map集合，集合中方两对数据，类似下方代码

 HashMap<String, Object> map = new HashMap<>();
        //说明存在相同的名字
        if (flag) { 
   
            //存储对应的数据
// System.out.println("相同的我来了");
            map.put("userExist", true);
            map.put("msg", "用户名太受欢迎了，请换一个用户名");
        } else { 
   
            map.put("userExist", false);
            map.put("msg", "用户名可用");
        }

3、将map集合转换为JSON对象，响应回客户端浏览器
4、当浏览器获取到服务器响应回来的数据之后，对userExist进行判断即可，分别显示想要的结果。
Servlet代码展示：

package com.study.web.Servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.study.service.UserService;
import com.study.service.UserServiceImpl;
import org.omg.CORBA.OBJECT_NOT_EXIST;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;

/** * @author wang * @version 1.0 * @packageName ${PACKAGE_NAME} * @className ${NAME} * @date 2022/3/25 19:36 * @Description ${description} */
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet { 
   
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
   
        //设置编码
        //解决服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
        //1. $.get(type):将最后一个参数type指定为"json"
        // 2. 在服务器端设置MIME类型
        //也就是显示不了的问题
        //第二种方式就是设置mime类型
        response.setContentType("application/json;charset=utf-8");
// response.setContentType("text/html;charset=utf-8");
        //获取username
        String username = request.getParameter("username");

        //调用service层判断用户是否存在
        UserService service = new UserServiceImpl();
        boolean flag = service.checkUser(username);

        HashMap<String, Object> map = new HashMap<>();
        //说明存在相同的名字
        if (flag) { 
   
            //存储对应的数据
// System.out.println("相同的我来了");
            map.put("userExist", true);
            map.put("msg", "用户名太受欢迎了，请换一个用户名");
        } else { 
   
            map.put("userExist", false);
            map.put("msg", "用户名可用");
        }

// System.out.println(map.toString());
        //将封装了数据的map集合转换成JSON对象
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(), map);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
   
        this.doPost(request, response);
    }
}

HTML页面

<!-- *@packageName *@className case *@author wang *@date 2022/3/25 19:12 *@Description -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户名校验</title>

    <script src="../js/jquery-3.3.1.min.js"></script>


    <script> //入口函数 $(function () { 
      //给username绑定一个鼠标离焦事件 $("input[name=username]").blur(function () { 
      //获取username输入框的值 var username = $(this).val(); //发送Ajax请求， /*期望服务器返回的格式：如果名字相同的存在的情况：{"userExist":true,"msg","用户名太受欢迎了，请换一个用户名"} 如果名字不同的情况存在：{"userExist":false,"msg","用户名可用"} * */ $.get("/findUserServlet", { 
     username: username}, function (data) { 
      //获取span标签对象 var span = $("#username_check"); //判断响应会来的数据的userExist值是否为true // alert(data.userExist); // alert(data.msg); if (data.userExist) { 
      //为true,代表存在相同的名字 span.css("color", "red"); span.html(data.msg); } else { 
      //为false，则代表不存在相同的名字 span.css("color", "green"); span.html(data.msg); } }); }) }); </script>
</head>
<body>


<input type="text" name="username" placeholder="请输入用户名">
<span id="username_check"></span><br>
<input type="password" name="password" placeholder="请输入密码"><br>
<input type="submit" value="提交注册">
</body>
</html>

今天的文章Ajax和JSON分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/26331.html

Ajax和JSON

文章目录

2.2.1、方式一：$.ajax

2.2.2、方式二：$.get()：发送get请求

2.2.3、方式三：$.post()：发送post请求

相关推荐

发表回复

2.2.1、方式一：`$.ajax`

2.2.2、方式二：`$.get()：发送get请求`

2.2.3、方式三：`$.post()：发送post请求`