Ajax和JSON

文档中心

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

文章目录

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

二、AJax的实现方式

2.1、JavaScript原生的实现方式

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

<!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({键值对});
代码演示

<!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相关概念

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的语法规则

4.1、基本的语法规则

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

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

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

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true 或 false）

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

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

null

JSON获取数据的方式

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

<!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对象的相互转换

要实现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='男'}    }}

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

Ajax和JSON

文章目录

一、Ajax相关概念

二、AJax的实现方式

2.1、JavaScript原生的实现方式

2.2、JQuery的实现方式

2.2.1、方式一：`$.ajax`

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

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

三、JSON相关概念

四、JSON的语法规则

4.1、基本的语法规则

5.1、JSON转为Java对象

5.2、Java对象转换JSON

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载

标签

Ajax和JSON

文章目录

一、Ajax相关概念

二、AJax的实现方式

2.1、JavaScript原生的实现方式

2.2、JQuery的实现方式

2.2.1、方式一：$.ajax

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

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

三、JSON相关概念

四、JSON的语法规则

4.1、基本的语法规则

5.1、JSON转为Java对象

5.2、Java对象转换JSON

相关问题

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载

标签

2.2.1、方式一：`$.ajax`

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

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