0
点赞
收藏
分享

微信扫一扫

Java Web(十一)--JSON &Ajax

you的日常 02-29 17:00 阅读 2

JSON

 JSon在线文档:    JSON 简介

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。轻量级指的是跟xml做比较。数据交换指的是客户端和服务器之间业务数据的传递格式。

它基于 ECMAScript (W3C制定的JS规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据【即 java  、php、asp.net , go 等都可以使用 JSON】。

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

JSON语法

var 变量名 = { 
"k1" : value,   // Number 类型 
"k2" : "value", // 字符串类型
"k3" : [],      // 数组类型 
"k4" : {},      // json 对象类型 
"k5" : [{},{}]  // json 数组 
}; 

JSON对象和字符串对象相互转换

JSON 是一个内建对象,有方法可以使用: 

<script type="text/javascript">
    // 一个 json 对象 
    var jsonObj = {"name": "小明", age: 10}; 
 
    // 把 json 对象转换成为字符串对象 
    var jsonStr = JSON.stringify(jsonObj); 
    console.log(jsonStr);
 
    // 把 json 对象的字符串,转换成为 json 对象 
    var jsonObj2 = JSON.parse(jsonStr); 
    console.log(jsonObj2); 
</script> 

在Java中的应用

java中使用json,需要引入到第3方的包gson.jar,Gson是Google提供的用来在Java对象和JSON数据之间进行映射的Java类库,可以对JSON字符串和Java对象相互转换。

应用场景:

  1. Javabean对象和json字符串的转换
  2. List对象和json字符串的转换
  3. map对象和json字符串的转换
需求:
1) 在输入框输入用户名
2) 点击验证用户名, 使用 ajax 方式, 服务端验证该用户名是否已经占用了, 如果该用户已经占用, 以 json 格式返回该用户信息
3) 假定用户名为 king , 就不可用, 其它用户名可以
4) 对页面进行局部刷新, 显示返回信息


import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;

import java.lang.reflect.Type;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class JavaJson {
    public static void main(String[] args) {

        //创建一个gson对象,做完一个工具对象使用
        Gson gson = new Gson();

        //演示javabean 和 json字符串的转换
        Book book = new Book(100, "老师零基础学Java");

        //1. 演示把javebean -> json字符串
        String strBook = gson.toJson(book);
        System.out.println("strBook=" + strBook);

        //2. json字符串->javabean
        //(1) strBook 就是 json字符串
        //(2) Book.class 指定将 json字符串转成 Book对象
        //(3) 底层是反射机制
        Book book2 = gson.fromJson(strBook, Book.class);
        System.out.println("book2=" + book2);

        //3. 演示把list对象 -> json字符串
        List<Book> bookList = new ArrayList<>();
        bookList.add(new Book(200, "天龙八部"));
        bookList.add(new Book(300, "三国演义"));

        //因为把对象,集合转成字符串, 相对比较简单;底层只需要遍历, 按照json格式拼接返回即可
        String strBookList = gson.toJson(bookList);
        System.out.println("strBookList= " + strBookList);

        //4. 演示把json字符串 -> list对象
        //(1) 如果需要把json字符串 转成 集合这样复杂的类型, 需要使用gson提供的一个类
        //(2) TypeToken , 是一个自定义泛型类, 然后通过TypeToken来指定我们需要转换成的类型
        /*
        com.google.gson.reflect

        public class TypeToken<T> {
            final Class<? super T> rawType;
            final Type type;
            final int hashCode;

            protected TypeToken() {
                this.type = getSuperclassTypeParameter(this.getClass());
                this.rawType = Types.getRawType(this.type);
                this.hashCode = this.type.hashCode();
            }
         */
        //(1) 返回类型的完整路径java.util.List<com.hspedu.json.Book>
        //(2) gson的设计者,需要得到类型的完整路径,然后进行底层反射
        //(3) 所以gson 设计者就提供TypeToken, 来搞定.

        //二说 TypeToken , 为甚要加 {}

        //(1) 如果我们  new TypeToken<List<Book>>()  提示
        // 'TypeToken()' has protected access in 'com.google.gson.reflect.TypeToken'
        //(2) 因为TypeToken 的无参构造器是protected , 而 new TypeToken<List<Book>>() 就是调用其无参构造器
        //(3) 根据java基础, 如果一个方法是protected ,而且不在同一个包, 是不能直接访问的, 因此报错
        //(4) 为什么 new TypeToken<List<Book>>(){} 使用就可以,这里就涉及到匿名内部类的知识.
        //(5) 当 new TypeToken<List<Book>>(){} 其实这个类型就是不是 TypeToken 而是一个匿名内部类(子类)
        //(6) 而且这个匿名内部类是有自己的无参构造器(隐式), 根据java基础规则 当执行子类的无参构造器时, 默认super();

        //三说 TypeToken->举一个例子.[对java基础回顾.]
        Type type = new TypeToken<List<Book>>() {
        }.getType();

        List<Book> bookList2 = gson.fromJson(strBookList, type);
        System.out.println("bookList2= " + bookList2);


        //5, 把map对象->json字符串
        Map<String, Book> bookMap = new HashMap<>();
        bookMap.put("k1", new Book(400, "射雕英雄传"));
        bookMap.put("k2", new Book(500, "西游记"));

        String strBookMap = gson.toJson(bookMap);
        System.out.println("strBookMap=" + strBookMap);

        //6. 把json字符串 -> map对象
        //   new TypeToken<Map<String, Book>>() {}.getType()=> java.util.Map<java....String,com.hspedu.json.Book>
        Map<String, Book> bookMap2 = gson.fromJson(strBookMap,
                new TypeToken<Map<String, Book>>() {
                }.getType());
        System.out.println("bookMap2=" + bookMap2);
    }
}

Ajax 

介绍

官网:AJAX 简介

同步和异步是建立在客户端和服务器端相互通信的基础上

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

AJAX = ASynchronous JavaScript And XML( 异步的JavaScript和XML),AJAX是一种用于创建快速动态网页的技术。【是对原生XHR的封装,为了达到我们跨越的目的,增添了对JSONP的支持】

AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,提升用户的体验。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。【实现局部数据的刷新】

传统的网页(不使用AJAX)如果需要更新内容,必须重新加载整个网页页面。

应用场景

  •     搜索引擎根据用户输入关键字,自动提示检索关键字
  •     动态加载数据,按需取得数据;【树形菜单、联动菜单...】
  •     改善用户体验;        【输入内容前提示、带进度条文件上传...】
  •     电子商务应用;        【购物车、邮件订阅...】
  •     访问第三方服务;        【访问搜索服务、rss 阅读器】
  •     页面局部刷新;        https://piaofang.maoyan.com/dashboard

执行流程

  • 1. 创建XMLHttpRequest异步对象
  • 2. 设置回调函数
  • 3. 使用open方法与服务器建立连接
  • 4. 向服务器发送数据
  • 5. 在回调函数中针对不同的响应状态进行处理
//1、创建XMLHttpRequest对象[ajax引擎对象]
var xhr = new XMLHttpRequest();
//2、准备指定数据
var uname = document.getElementById("uname").value;
xhr.open("GET", "/json_ajax/checkUserServlet?uname=" + uname, true);
//3、在send函数调用前,给XMLHttpRequest 绑定一个事件onreadystatechange
//该事件表示,可以去指定一个函数,每当 xhr对象readyState 改变时,
//就会触发 onreadystatechange 事件
xhr.onreadystatechange = function () {
    //console.log("xhr=", xhr)
    if (xhr.readyState == 4 && xhr.status == 200) {
        //获取返回的json数据
        var responseText = xhr.responseText;
        console.log("返回的信息=" + responseText);
    }
}
//4、发送数据
xhr.send();

方法描述
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST;
  • url:文件在服务器上的位置;
  • async:true(异步)或 false(同步),并且XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true;
send(string)将请求发送到服务器。string:仅用于 POST 请求

 XMLHttpRequest 对象的三个重要的属性:

属性描述
onreadystatechange

存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

该函数中规定当服务器响应已做好被处理的准备时所执行的任务。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status例:200: “OK” ;404: 未找到页面

应用案例

 html页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script type="text/javascript">
        window.onload = function () { //页面加载后执行function
            var checkButton = document.getElementById("checkButton");
            //给checkButton绑定onclick
            checkButton.onclick = function () {

                //1. 创建XMLHttpRequest对象(!!!) [ajax引擎对象]
                var xhr = new XMLHttpRequest();
                //   获取用户填写的用户名
                var uname = document.getElementById("uname").value;

                //2. 准备发送指定数据 open, send
                //(1)"GET" 请求方式可以 GET/POST
                //(2)"/ajax/checkUserServlet?username=" + uname 就是 url
                //(3)true , 表示异步发送
                xhr.open("GET", "/ajax/checkUserServlet?uname=" + uname, true);

                //在send函数调用前,给XMLHttpRequest 绑定一个事件onreadystatechange,该事件表示,可以去指定一个函数,当数据变化,会触发onreadystatechange
                // 每当 xhr对象readyState 改变时,就会触发 onreadystatechange 事件
                //4.获取服务器响应数据
                xhr.onreadystatechange = function () {
                    //如果请求已完成,且响应已就绪, 并且状态码是200
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        //把返回的jon数据,显示在div
                        document.getElementById("div1").innerHTML = xhr.responseText;
                        // console.log("xhr=", xhr)
                        var responseText = xhr.responseText;
                        //console.log("返回的信息=" + responseText);
                        if (responseText != "") {
                            //执行...
                            document.getElementById("myres").value = "用户名不可用"
                        } else {
                            document.getElementById("myres").value = "用户名可用"
                        }
                    }
                }

                //3. 真正的发送ajax请求[http请求]
                // 如果你POST 请求,再send("发送的数据")
                xhr.send();
            }
        }
    </script>
</head>

<body>
<h1>用户注册~</h1>
<form action="/ajax/checkUserServlet" method="post">
    用户名字:<input type="text" name="uname" id="uname">
    <input type="button" id="checkButton" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的json数据</h1>
<div id="div1"></div>
</body>

</html>

Servlet代码:

public class User {
    private  Integer id;
    private String name;
    private  String password;
    private String email;
。。。。。。
}


import com.google.gson.Gson;
import com.hspedu.ajax.entity.User;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;

public class CheckUserServlet extends HttpServlet {

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

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        System.out.println("CheckUserServlet 被调用......");

        //获取前端请求参数
        String name = request.getParameter("name");

        System.out.println("name = " + name);
        response.setContentType("text/html;charset=utf-8");

        if ("king".equals(name)) {

            User king = new User(100, "king", "123hsp", "king@sohu.com");

            response.getWriter().write(new Gson().toJson(king));

//            response.getWriter().write("不可用");//限制前端的功能实现

        } else {
            response.getWriter().write("");
        }

    }
}
//JavaSE 和 Javaweb方式 加载properties配置文件的方法不同

//JavaSE中加载properties配置文件的方法为:
properties.load(new FileInputStream("src\\druid.properties"));
 
//javaweb方式加载properties配置文件的方法为:
//要获取src目录下的文件,需要使用类加载器
properties.load(JDBCUtilsByDruid.class.getClassLoader()
        .getResourceAsStream("druid.properties"));

 JQuery 的 Ajax 请求

官网:jQuery AJAX get() 和 post() 方法

在jQuery中使用AJAX

  • 1.首先要导入<script src="/static/jquery-3.3.1.js"></script>
  • 2.绑定事件 $("#b1").on("click",function(){})
  • 3.在事件中写入要操作的事:$.ajax()

实现方法

$.ajax  方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script type="text/javascript"
            src="./script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //发出ajax
            /**
             * 1. 指定参数时,需要在{}
             * 2. 给参数时,前面需要指定参数名
             * 3. dataType: "json" 要求服务器返回的数据格式是json
             */
            $("#checkbutton").click(function () {
                $.ajax({
					// url: "checkUser",
                    url: "/web/checkUser",//请求路径
                    type: "POST",//请求方式
                    async: true,    //采用异步的通信方式
                    cache: true,       //使用缓存
                    data: {
                        //传日期, 是为了浏览器缓存
                        username: $("#uname").val(),
                        data: new Date()
                    },
                    error: function () {表示如果请求响应出现错误,会执行的回调函数
                        console.log("失败~")
                    },
                    /**
                     data - 服务器返回的数据
                     status - 包含调用的状态
                     xhr - 包含 XMLHttpRequest 对象
                     */
                    success: function (data, status, xhr) {//响应成功后的回调函数
                        console.log("成功");
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
//data是json对象-> 显示转成json的字符串
                        $("#div1").html(JSON.stringify(data));
                        //对返回的结果进行处理
                        if ("" == data.username) {
                            $("#myres").val("该用户名可用");
                        } else {
                            $("#myres").val("该用户名不可用");
                        }
                    },
                    dataType: "json"//设置接受到的响应数据的格式
                })
            })
        })
    </script>
</head>

<body>
<h1>用户注册</h1>

<form action="/web/checkUser" method="post">
    <!--<form action="checkUser" method="post">-->
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id="checkbutton" value="验证用户名">

    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>

    用户密码:<input type="password" name="password"><br/><br/>

    电子邮件:<input type="text" name="email"><br/><br/>

    <input type="submit" value="用户注册">
</form>

<h1>返回的 json 数据</h1>
<div id="div1"></div>

</body>
</html>

$.get请求和$.post请求
说明
//1.$.get() 默认是get请求,不需要指定 请求方式
//2.不需要指定参数名
//3.填写的实参,是顺序 url, data, success回调函数, 返回的数据格式
//讲解.get() 使用
$.get(
    "/ajax/checkUserServlet2",
    {
        username: $("#uname").val(),
        date: new Date()
    },
    function (data, status, xhr) {
        console.log("$.get() 成功");
        console.log("data=", data);
        console.log("status=", status);
        console.log("xhr=", xhr);
        //data是json对象-> 显示转成json的字符串
        $("#div1").html(JSON.stringify(data));
        //对返回的结果进行处理
        if ("" == data.username) {
            $("#myres").val("该用户名可用");
        } else {
            $("#myres").val("该用户名不可用");
        }
    },
    "json"
)


//老师说明$.post() 和 $.get() 的方式一样
//只是这时,是按照post方式发送ajax请求
$.post(
    "/ajax/checkUserServlet2",
    {
        username: $("#uname").val(),
        date: new Date()
    },
    function (data, status, xhr) {
        console.log("$.post() 成功");
        console.log("data=", data);
        console.log("status=", status);
        console.log("xhr=", xhr);
        //data是json对象-> 显示转成json的字符串
        $("#div1").html(JSON.stringify(data));
        //对返回的结果进行处理
        if ("" == data.username) {
            $("#myres").val("该用户名可用");
        } else {
            $("#myres").val("该用户名不可用");
        }
    },
    "json"
)
}
$.getJSON
//1. 如果你通过jquery发出的ajax请求是get 并且 返回的数据格式是json
//2. 可以直接使用getJSON() 函数,就很简洁
$.getJSON(
    "/ajax/checkUserServlet2",
    {
        username: $("#uname").val(),
        date: new Date()
    },
    function (data, status, xhr) {//成功后的回调函数
        console.log("$.getJSON 成功");
        console.log("data=", data);
        console.log("status=", status);
        console.log("xhr=", xhr);
        //data是json对象-> 显示转成json的字符串
        $("#div1").html(JSON.stringify(data));
        //对返回的结果进行处理
        if ("" == data.username) {
            $("#myres").val("该用户名可用");
        } else {
            $("#myres").val("该用户名不可用");
        }
    }
)

其他

javabean

    特点

  •         public 修饰的类 ,public 无参构造
  •         所有属性(如果有) 都是private,并且提供set/get (如果boolean 则get 可以替换成is)

    分类

  •         封装数据的JavaBean,也被叫做实体类,一般来说对应的是数据库中的一张表。
  •         封装逻辑的JavaBean;用于实现业务逻辑,目的是为了提高代码的复用和解耦。
举报

相关推荐

0 条评论