JSON&原生AJAX-易微帮

文章目录

JSON
Fastjson
ajax和json综合(重要)
原生Ajax

JSON

JavaScript Object Notation：JavaScript对象文本表示形式

【1】json在js中是一个对象，在java中是字符串
建议：json的name书写在双引号中，值如果是字符类型建议书写在双引号中

【2】json是目前前后端数据交互的主要格式之一

【3】json是一种特殊的 js 对象

#json的语法主要有两种:
        1. 对象 { }
        2. 数组 [ ]
        
1. 对象类型
		{name:value,name:value} 
		
2. 数组类型
		[
            {name:value,name:value}, 
            {name:value,name:value},
            {name:value,name:value}
		]
		
3. 复杂对象
		{
            name:value,
            wives:[{name:value},{},{}],
            son:{name:value}
		}
#注意: 
	1. 其中name必须是string类型
		json在js中,name的双引号可以省略
	2. value必须是以下数据类型之一：
		字符串
		数字 
		对象（JSON 对象）
		数组
		布尔
		Null
	3. JSON 中的字符串必须用双引号包围。(单引号不行!)

Fastjson

fastjson引入

为了方便服务器解析，这要求服务端在响应之前，需要将响应的数据转换成符合Json格式的字符串

通过拼接字符串的形式，将Java对象转换成json格式字符串无疑是非常麻烦的，在开发中我们一般使用转换工具来实现
所谓的转换工具是通过java封装好的一些jar工具包，可以直接将java对象或集合转换成json格式的字符串
常见的json转换工具：

fastjson 常用API

fastjson作用

将java对象转成json字符串=》响应给前端
将json字符串转成java对象=》接受前端的json数据封装到对象中

常用API

fastjson API 入口类是com.alibaba.fastjson.JSON,常用的序列化操作都可以在JSON类上的静态方法直接完成

public static final String toJSONString(Object object); // 将java中任意对象序列化为JSON文字符串

//下面的两个方法是将页面获取json数据封装到实体类对象中

public static final T parseObject(String text, Class clazz); // 把JSON字符串text解析成指定类型JavaBean

public static final T parseObject(InputStream is, Class clazz); // 将从页面获取的字节输入流中的字符数据解析成指定类型JavaBean

举例：User user = JSON.parseObject(request.getInputStream(), User.class);
注意：
1）request.getInputStream()：表示获取关联浏览器的字节输入流
2）使用parseObject方法将前端接收的json数据转换为对应实体类对象，要求前端传递的json数据的key必须和实体类对象的成员变量名一致
举例：
{“username”:“张子枫”,“password”:1234} 来自于前端浏览器
实体类：
class User{
private String username;//这里的成员变量必须前端提交json格式的数据的key一致，必须是username
private String password;
}

使用实例

导包

 <!--fastjson-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.47</version>
        </dependency>

写实体类
利用上面方法进行转换

ajax和json综合(重要)

请求参数和响应数据都是普通字符串


@WebServlet("/ajaxJsonTest01Servlet")
public class AjaxJsonTest01Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //前后端都是字符串

        //获取前端发过来的字符串
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        User user = new User(username, password);
        System.out.println(username +"---"+ password);

        response.getWriter().print(user);
    }
}

响应数据改为json格式

@WebServlet("/ajaxJsonTest02Servlet")
public class AjaxJsonTest02Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //请求是字符串，获得响应是json

        //获取前端发过来的字符串
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        User user = new User(username, password);
        System.out.println(username +"---"+ password);

        String s = JSON.toJSONString(user);
        response.getWriter().print(s);
    }
}

请求和响应都是js数据

@WebServlet("/ajaxJsonTest03Servlet")
public class AjaxJsonTest03Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //请求是json，获得响应是json

        //获取前端发过来的字符串
        User user = JSON.parseObject(request.getInputStream(), User.class);

        System.out.println(user);

        //响应给前端
        //模拟从数据库中查找
        ArrayList<User> list = new ArrayList<>();

        Collections.addAll(list,
                new User("张三","1234"),
                new User( "李四","1234"),
                user);

        String s = JSON.toJSONString(list);
        response.getWriter().print(s);
    }
}

封装到Result类和抽取到BaseController

package com.example.json;

public class Result {

    private boolean flag;
    private String message;
    private Object userList;

    //用于增删改表单，不需要查看数据
    public Result(boolean flag, String message) {
        this.flag = flag;
        this.message = message;
    }

    //用于查询表单
    public Result(boolean flag, String message, Object userList) {
        this.flag = flag;
        this.message = message;
        this.userList = userList;
    }

    public boolean isFlag() {
        return flag;
    }

    public void setFlag(boolean flag) {
        this.flag = flag;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Object getUserList() {
        return userList;
    }

    public void setUserList(Object userList) {
        this.userList = userList;
    }

    @Override
    public String toString() {
        return "Result{" +
                "flag=" + flag +
                ", message='" + message + '\'' +
                ", userList=" + userList +
                '}';
    }
}

public class BaseController {

    //解析json为object
    public static <T> T getObject(HttpServletRequest request,Class<T> clazz) throws IOException {

        T t = JSON.parseObject(request.getInputStream(), clazz);
        return t;
    }

    public static void getJson(HttpServletResponse response,Object obj) throws IOException {

        String s = JSON.toJSONString(obj);
        response.getWriter().print(s);

    }
}

@WebServlet("/ajaxJsonTest04Servlet")
public class AjaxJsonTest04Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //请求是json，获得响应是json

        //获取前端发过来的字符串
        //User user = JSON.parseObject(request.getInputStream(), User.class);
        User user = BaseController.getObject(request, User.class);

        System.out.println(user);

        //响应给前端
        //模拟从数据库中查找
        ArrayList<User> list = new ArrayList<>();

        Collections.addAll(list,
                new User("张三","1234"),
                new User( "李四","1234"),
                user);

        Result result = new Result(true, "查询列表成功", list);
//        String s = JSON.toJSONString(result);
//        response.getWriter().print(s);
        BaseController.getJson(response,result);
    }
}

原生Ajax

AJAX的执行流程

流程说明：

用户访问的时候，由JavaScript底层创建一个请求对象：XMLHttpRequest对象。
请求对象创建一个回调函数，回调函数用于处理服务器返回的响应
请求对象用于发送请求给服务器
服务器接收到浏览器发过来的请求，并且对数据进行处理。
将数据以XML的格式发送回浏览器，由XMLHttpRequest请求对象的回调函数接收数据
使用HTML和CSS更新网页最新结果

XMLHttpRequest对象

创建XMLHttpRequest对象	说明
new XMLHttpRequest()	构造方法直接创建对象

XMLHttpRequest对象的事件	说明
on ready state change	每当 readyState 改变时，就会触发 onreadystatechange 事件

XMLHttpRequest对象的属性	说明
readyState	准备状态的值，当它等于4的时候，表示服务器数据接收完毕
status	服务器的状态码。等于200的时候，服务器正确响应
responseText	接收服务器返回的字符串数据

XMLHttpRequest对象的方法	说明
open(“GET”,“URL”,true)	打开服务器的连接 1. GET或POST表示请求的方式 2. URL访问服务器的地址 3. true 表示异步，false表示同步。同步是指要等待服务器响应回来以后，才继续向后执行。
send()	发送请求，如果是GET方法send()不需要参数。如果是POST，send()需要传递浏览器端的数据

注：

#post发送参数前，需要设置编码格式,否则后台获取不到数据，post请求是模拟form表单提交数据
//application/x-www-form-urlencoded 表示form表单操作类型
xmlHttp.setRequestHeader(“CONTENT-TYPE”,“application/x-www-form-urlencoded”);

说明：
readyState属性是XMLHttpRequest对象的属性，它是表示当前ajax引擎和服务器交互过程中的变化情况，也就是对象状态（表示请求状态），通过5个数字体现状态变化：
0 ：表示客户端建立了XMLHttpRequest对象，但并没有和服务器进行交互(请求未初始化).
1 ：表示客户端已经调用XMLHttpRequest对象中的open方法，打开了和服务器的连接(请求正在加载).
2 ：表示客户端已经调用XMLHttpRequest对象中的send方法，发送出了请求数据(请求已加载).
3 ：表示服务器已经处理完请求但还没有给客户端响应数据(交互中).
4 ：表示服务器响应数据正常结束(请求完成).

get请求

post请求
** **

使用原生的AJAX

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax的get请求</title>
</head>
<body>
        <button id="btn">发送get请求</button>
</body>
<script>
    //给按钮绑定事件
    document.getElementById("btn").onclick = function () {
        //ajax发送get请求

        //1.创建xhr  XMLHttpRequest ajax引擎    发送请求
        var xhr = new XMLHttpRequest();;

        //2.监听请求和响应状态  请求   响应
        xhr.onreadystatechange = function () {
            //请求和响应  OK
            if(xhr.readyState == 4 && xhr.status == 200){
                //接收响应数据    ajax能够接收的响应数据类型：1.字符串  2.xml
                var responseText = xhr.responseText;
                alert(responseText);
            }
        }

        //3.设置请求参数   get post   数据
        //1.method   get post
        //2.url      请求地址
        //3.async     同步?异步？    默认异步==true
        xhr.open("GET","/ajaxGetServlet?name=张三&age=19",true);

        //4.发送请求
        xhr.send();
    }
</script>
</html>

java

@WebServlet("/ajaxGetServlet")
public class AjaxGetServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String username = request.getParameter("username");
        String age = request.getParameter("age");

        System.out.println(username+"==="+age);

        response.getWriter().print("请求已收到");
    }
}

JSON&原生AJAX