AJAX和JSON

最新推荐文章于 2021-08-06 08:17:54 发布

天上的云川

最新推荐文章于 2021-08-06 08:17:54 发布

阅读量153

点赞数 1

分类专栏： JavaWeb笔记文章标签： ajax

本文链接：https://blog.csdn.net/m0_46573836/article/details/111705708

版权

JavaWeb笔记专栏收录该内容

32 篇文章 2 订阅

订阅专栏

AJAX

一、概念

全称ASynchronous JavaScript And XML异步的javascript和xml，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

异步和同步

异步和同步建立在客户端和服务器端相互通信的基础上，换言之XMLHttpRequest 是 AJAX 的基础

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

画图说明
在这里插入图片描述

二、实现方式

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

① xhr对象创建过程及其写法
在这里插入图片描述
② 向服务器发送请求的写法及其open方法中的参数介绍

③ xhr获取服务器响应的属性介绍及其写法

④ 处理服务器返回的响应前需要判断是否成功接收服务器返回的响应

举例示范

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun() {
            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");
            }
            xmlhttp.open("GET","ajaxServlet?username=tom",true);
            xmlhttp.send();
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun()">
    <input type="text">
</body>
</html>

服务器端代码

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        System.out.println(username);
       response.getWriter().write("hello:"+username);
    }

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

效果截图
在这里插入图片描述
解释：代码中html页面中的第二个input是为了掩饰异步和同步的区别，当我们设置为同步时，该input中无法输入内容但是当我们设置为异步的时候，该输入框内可以出入内容

2、JQuery对ajax的实现方式

（1）$.ajax()
格式如下：

$.ajax({
	参数。。
})

代码示范

 $.ajax({
                url:"ajaxServlet",//请求路径
                type:"POST",//请求方式
                data:{"username":"tom","age":23},
                success:function (data){
                    alert(data)
                },//响应成功后执行的回调函数
                error:function (){
                    alert("出错了。。。")
                },//表示如果请求响应出现错误，会执行的回调函数
                dataType:"text"//设置接收到响应数据的格式
            })

所有参数见jqueryapi文档
常用参数如上url、type、data、success、error、dataType
其中type如果不写默认为GET请求方式
data中传入参数有两种方式：一种是上述示范中的键值对的形式，另一种就是拼接参数字符串的形式，如data:{"username=tom&age=23"}
（2）$.get()
语法$.get(url,[data],[callback],[type])
参数：
url请求路径
data请求参数
callback回调函数
type响应结果的类型
其中中括号包括的为可选参数

代码示范

$.get("ajaxServlet",{username:"rose"},function(date){
                    alert(date);
               },"text")

（3）$.post()
这种方式和上一种方式不同的地方就是数据的提交方式不同
代码示范

$.post("ajaxServlet",{username:"rose"},function(date){
                    alert(date);
               },"text")

JSON

一、概念

全程JavaScript Object Notation ，他是一种javascript对象的表示方法。json是一种用于存储和交换文本信息的语法，用于进行数据的传输，同时json比xml更小、更快、更容易解析

二、语法

1、基本规则

数据在名称/值对中：json数据是由键值对构成的
键用引号引起来（单引号双引号都可以），也可以不用引号
值的取值类型：数字、字符串（在双引号当中）、逻辑值、数组、对象、null

数据由都好分隔：多个键值对由都好分割
花括号保存对象：使用{}大括号定义json格式
方括号保存数组：[ ]

2、获取数据

（1) json对象.键名
（2）json对象[“键名”]
（3）数组对象[索引]

数据的遍历：
在这里插入图片描述

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

json数据可以转换成任意对象，由于我学习的java语言，所以转换为java对象

*我们一般使用解析器来进行转换操作

常见的解析器：Jsonlib、Gson、fastjson、jackson
今天我们学习jackson解析器，方便以后框架的学习

1、JSON转换为Java对象

使用步骤：

导入jackson的相关jar包
创建一个Jackson的核心对象ObjectMapper
调用ObjectMapper的相关方法进行转换

json转换为java对象的方法
readValue(json字符串数据,Class)

举例示范
在这里插入图片描述
控制台的到的结果为

2、Java对象转换为JSON

使用步骤：

导入jackson的相关jar包
创建一个Jackson的核心对象ObjectMapper
调用ObjectMapper的相关方法进行转换

举例示范
在这里插入图片描述

3、java对象转换为json数据的方法

ObjectMapper对象的方法介绍
① writeValue(参数1，obj)
参数1有如下几种重载情况

File：将obj对象转换为json字符串，并且切保存到指定的文件中
writer：将obj对象转换为json字符串，并且将json数据填充到字符输出流中
OutputStream：将obj对象转换为JSON字符串，并且将json数据填充到字节输出流当中

② writeValueAsString(obj)
将对象转换为json字符串

4、注解：

当我们在java对象中假设有一个属性是日期Date属性，
但我们传递进去了date参数，转化为json字符串会的到一串很长的毫秒值，（如下图中的birthday属性）在这里插入图片描述

这总数据并不是我们想要的数据，所以我们需要对他进行处理，有两种处理方式，分别是：

@JsonIgnore：排除属性
@JsonFormat：属性值格式化

举例示范第一种注解
在这里插入图片描述
我们可以对对应的java类中的对应属性加上@JsonIgnore注解，最终的到的效果就是如下

它会忽略该属性，所以在转换为字符串的时候就没有出现字符串。
但是很显然这种方式缺陷很大，如果这样还不如不写这个属性，这时候我们就需要用到了第二个注解

举例示范第二个注解
在这里插入图片描述
得到的结果就是

该注解就把对应的属性在从java对象转换为了json对象字符串形式时候进行了格式化，得到了我们想要的数据格式

5、复杂java对象的转换

list
在这里插入图片描述
得到的结果为

map
在这里插入图片描述
得到的结果为

案例：校验用户名是否存在

思路分析：

在这里插入图片描述

代码示范

页面代码

<!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 (){
            $("#username").blur(function (){
                var username = $(this).val();
                //发送ajax请求
                //期望服务器响应回的数据格式：{"userExist":true,"msg":"此用户名太受欢迎，请更换一个")
                //                      {"userExist":false,"msg":"用户名可用")
                $.get("findUserServlet",{username:username},function (data) {
                    var span = $("#s_username");
                    if (data.userExist){
                        //用户名存在
                        span.css("color","red");
                        span.html(data.msg);
                    }else {
                        span.css("color","green");
                        span.html(data.msg);
                    }
                },"json")
            })
        })
    </script>
</head>
<body>
    <form>
        <input id="username" type="text" name="username" placeholder="请输入用户名"><span id="s_username"></span>
        <input type="password" name="password" placeholder="密码">
        <input type="button" value="注册">
    </form>
</body>
</html>

servlet中的代码

@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1、获取请求参数
        String username = request.getParameter("username");
        //2、调用service层判断用户是否存在
        Map<String,Object> map = new HashMap<>();

        //简化书写
        if ("tom".equals(username)){
            //存在
            map.put("userExist",true);
            map.put("msg","此用户名太受欢迎，请换更换一个");
        }else {
            //不存在
            map.put("userExist",false);
            map.put("msg","此用户名可用");
        }
        //将map转换为json，并且传递给客户端浏览器
        ObjectMapper mapper = new ObjectMapper();
        response.setCharacterEncoding("utf8");
        mapper.writeValue(response.getWriter(),map);
    }

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

效果如下
在这里插入图片描述

其中很重要的一个点!!!

服务器在返回响应的时候，返回取得是json的字符串表示，这个时候，如果我们在js中想使用json的格式的操作的时候，需要设置参数设置为解析json的这个参数才能使用，像下图中回调函数中传进来的参数是json的字符串表示，后面没办法直接用data.userExist因为data是字符串
在这里插入图片描述
这个时候我们就需要通过设置$.get()方法中的响应类型的这个参数，设置为json，这样就可以正常使用了！
或者！我们可以通过设置服务器的MIME响应数据类型来解决这个问题respon.setContentType("application/json",charset=utf-8)

总结：
服务器响应回去的数据是json字符串表示，无法使用的问题的解决方式有两种：

设置服务器端的MIME响应类型为respon.setContentType("application/json",charset=utf-8)
或者设置前端页面中的js中的接收服务器响应消息的解析格式的类型为json

天上的云川

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX和JSON

AJAX一、概念全称ASynchronous JavaScript And XML异步的javascript和xml，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。异步和同步异步和同步建立在客户端和服务器端相互通信的基础上，换言之XMLHttpRequest 是 AJAX 的基础同步：客户端必须等待服
复制链接

扫一扫