> 文档中心 > Ajax和JSON

Ajax和JSON


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


文章目录

  • 一、Ajax相关概念Ajax和JSON
  • 二、AJax的实现方式Ajax和JSON
    • 2.1、JavaScript原生的实现方式Ajax和JSON
    • 2.2、JQuery的实现方式Ajax和JSON
      •   2.2.1、方式一:`$.ajax`
      •   2.2.2、方式二:`$.get():发送get请求`
      •   2.2.3、方式三:`$.post():发送post请求`
  • 三、JSON相关概念Ajax和JSON
  • 四、JSON的语法规则Ajax和JSON
    • 4.1、基本的语法规则Ajax和JSON
    • 5.1、JSON转为Java对象Ajax和JSON
    • 5.2、Java对象转换JSONAjax和JSON

一、Ajax相关概念Ajax和JSON

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

异步与同步的概念

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

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

二、AJax的实现方式Ajax和JSON

2.1、JavaScript原生的实现方式Ajax和JSON

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

<!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的实现方式Ajax和JSON

  2.2.1、方式一:$.ajax

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

<!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:响应结果的类型

代码演示

<!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:响应结果的类型

代码演示

<!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>

效果演示
在这里插入图片描述
Ajax和JSON

三、JSON相关概念Ajax和JSON

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

xml表示

<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": ["乌鲁木齐"] }    }]}

Ajax和JSON

四、JSON的语法规则Ajax和JSON

4.1、基本的语法规则Ajax和JSON

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

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

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

  1. 数字(整数或浮点数)
  2. 字符串(在双引号中)
  3. 逻辑值(true 或 false)
  4. 数组(在方括号中) {“persons”:[{},{}]}
  5. 对象(在花括号中) {“address”:{“province”:“陕西”…}}
  6. null

JSON获取数据的方式

  1. json对象.键名
  2. json对象[“键名”]
  3. 数组对象[索引]
    代码演示
<!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实现遍历的方式

<!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>

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

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

5.1、JSON转为Java对象Ajax和JSON

  1. 导入jackson的相关jar包
  2. 创建Jackson核心对象 ObjectMapper
  3. 调用ObjectMapper的相关方法进行转换
    1. readValue(json字符串数据,Class)

5.2、Java对象转换JSONAjax和JSON

使用步骤:

  1. 导入jackson的相关jar包
  2. 创建Jackson核心对象 ObjectMapper
  3. 调用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='男'}    }}

Ajax和JSON # 六、案例练习:校验用户名是否存在Ajax和JSON

案例描述:在我们注册一个网站的用户时,网站会对用户名进行一个去重的做法,也就是不能重复注册相同的名字,因此需要实现这个功能。
解决思路
  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页面

<!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