[JavaWeb-13]Ajax和Json

最新推荐文章于 2024-07-16 21:41:12 发布

原创最新推荐文章于 2024-07-16 21:41:12 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #ajax #javascript #js

JavaWeb 专栏收录该内容

16 篇文章

订阅专栏

本文深入探讨了AJAX的工作原理及其实现方式，包括原生JS和JQuery两种方法，并详细介绍了JSON的基本概念、语法及与Java对象的转换。通过对比同步与异步通信，解释了AJAX如何在不刷新整个页面的情况下更新网页内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、AJAX

1.1 基本介绍

AJAX全称是ASynchronous JavaScript And XML，异步的JavaScript 和 XML，意思是异步的JavaScript和标记语言的一种技术。
这里的异步和同步是在客户端和服务器端相互通信的基础上谈的，同步就是客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作；异步是客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
一个网页在打开的时候会进行多个请求，这时候就需要多个请求同时去处理，而不要全部请求等着一个请求做完才去操作，通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。Ajax就是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
在这里插入图片描述

1.2 实现方式

1.2.1 原生的JS实现方式（了解）

创建一个html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>     
        //定义方法
        function  fun() {
            //发送异步请求
            //1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            //2. 建立连接
            /*
                参数：
                    1. 请求方式：GET、POST
                        * get方式，请求参数在URL后边拼接。send方法为空参
                        * post方式，请求参数在send方法中定义
                    2. 请求的URL：
                    3. 同步或异步请求：true（异步）或 false（同步）
             */
            xmlhttp.open("GET","ajaxServlet?username=tom",true);

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

            //4.接受并处理来自服务器的响应结果
            //获取方式 ：xmlhttp.responseText
            //什么时候获取？当服务器响应成功后再获取
            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
            xmlhttp.onreadystatechange=function()
            {
                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                   //获取服务器的响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }
        }       
    </script>      
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>
</html>

文档查询：https://www.w3school.com.cn/ajax/index.asp
直接使用JS来操作ajax是很繁琐的，不建议使用，建议使用JQuery方式来操作。

1.2.2 JQuery实现方式1_AJAX

JQuery封装了JS的操作，使得操作Ajax能够更加简单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>      
        //定义方法
        function  fun() {
            //使用$.ajax()发送异步请求
            $.ajax({
                url:"ajaxServlet1111" , // 请求路径
                type:"POST" , //请求方式
                //data: "username=jack&age=23",//请求参数
                data:{"username":"jack","age":23},
                success:function (data) {
                    alert(data);
                },//响应成功后的回调函数
                error:function () {
                    alert("出错啦...")
                },//表示如果请求响应出现错误，会执行的回调函数
                dataType:"text"//设置接受到的响应数据的格式
            });
        }      
    </script>     
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>
</html>

Jquery对GET和POST的异步请求做了进一步封装。

1.2.3 JQuery实现方式2_GET

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>        
        //定义方法
        function  fun() {
            $.get("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");
        }        
    </script>        
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>
</html>

通过代码可以看出，使用JQuery来实现GET的ajax只需要调用一个方法即可。POST同理。

1.2.4 JQuery实现方式3_POST

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>        
        //定义方法
        function  fun() {
            $.post("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");
        }        
    </script>        
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>
</html>

具体文档查阅：https://www.w3school.com.cn/jquery/jquery_ajax_get_post.asp

2、JSON

2.1 基本介绍

JSON的全称是JavaScript Object Notation，JavaScript对象表示法，即使用JavaScript来表示一个Java对象的方法。比如，一个标准的java对象创建如下所示：

Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");

其所表示的内容信息用JavaScript来表示就是：

var p = {"name":"张三","age":23,"gender":"男"};

用途：多用于存储和交换文本信息的语法；进行数据的传输；JSON 比 XML 更小、更快，更易解析。

2.2 语法

2.2.1 基本规则

数据在名称/值对中：即json数据是由键值对构成的，键用引号(单双都行)引起来，也可以不使用引号，值得取值类型：
1. 数字（整数或浮点数）
2. 字符串（在双引号中）
3. 逻辑值（true 或 false）
4. 数组（在方括号中） {“persons”:[{},{}]}
5. 对象（在花括号中） {“address”:{“province”：“陕西”…}}
6. null
数据由逗号分隔：多个键值对由逗号分隔；
花括号保存对象：使用{}定义json 格式；
方括号保存数组：[]；

2.2.2 获取数据

1. json对象.键名
2. json对象[“键名”]，（注意键名要用引号引起来）
3. 数组对象[索引]
4. 遍历

 //1.定义基本格式
var person = {"name": "张三", age: 23, 'gender': true};
		
var ps = [{"name": "张三", "age": 23, "gender": true},
		  {"name": "李四", "age": 24, "gender": true},
		  {"name": "王五", "age": 25, "gender": false}];
//获取person对象中所有的键和值
//for in 循环
for(var key in person){
	//这样的方式获取不行。因为相当于  person."name"
	alert(key + ":" + person.key);
	alert(key+":"+person[key]);
}
		
//获取ps中的所有值
for (var i = 0; i < ps.length; i++) {
	var p = ps[i];
	for(var key in p){
		alert(key+":"+p[key]);
	}
}

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

转换就需要解析器，常见的JSON解析器有：Jsonlib，Gson，fastjson，jackson
1. JSON转为Java对象（使用jackson解析器）
1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换：readValue(json字符串数据,Class)
2. Java对象转换JSON（使用jackson解析器）
1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换：
writeValue(参数1，obj)，参数1可以是：File、Writer或OutputStream，File表示转换后的JSON字符串保存在指定文件中，Writer表示转换后的JSON保存在字符输出流中，OutputStream表示转换后的JSON字符串填充到字节输出流中；
writeValueAsString(obj):将对象转为json字符串。