AJAX JSON笔记

最新推荐文章于 2023-01-29 16:15:56 发布

夏来梦栀子

最新推荐文章于 2023-01-29 16:15:56 发布

阅读量94

点赞数 2

本文链接：https://blog.csdn.net/qq_52329552/article/details/119103710

版权

AJAX JSON

AJAX

AJaX是一种用于创建快速动态网页的技术

AJaX是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术

1.概念 ASynchronous JavaScript And XML 异步的javaScript 和XML

1.异步和同步：客户端和服务器相互通信的基础上

同步：客户端必须等待服务器端的响应。在等待的期间介乎的不能做其他操作

异步：客户端不需要等待服务器端的响应。在服务器处理请求的购车中，客户端可以进行其他操作

AJaX：可以实现局部加载，传统页面是全局加载

C/S 客户端与服务器

B/S浏览器与服务器

2.实现方式

1.原生的js实现方式(了解)

    <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>

2.JQuery实现方式

1.$.ajax()

语法：$.ajax({键值对});

    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //定义方法
        function fun() {
            //使用$。ajax()发送异步请求
            $.ajax({
                url: "ajaxServlet",//请求路径
                type: "POST",//请求参数
                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>

2.$.get():发送get请求

语法:$.get(url,[data],[callback],[type])

url:请求路径

data:请求参数

callback:回调函数

type:响应结果的类型

    <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>

3.$.post():发送post请求

语法

    <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>

JSON

1.概念 javaScript Object Notation javaScript对象表示法

JSON是存储和交换语法信息

Person p = new Person();

p.setName(“张三”);

p.setAge(23);

p.set Gender(“男”)

var p = {“name”:“张三”,“age”:123,“gender”:“男”};

JSON现在多用于存储和交换文本信息的语法

进行数据传输

JSON比XML更小，更快，更易解析

2.语法

1.基本规则

数据在名称/值对中：json数据是有键值对构成的

*键用引号(单双都行)引起来，也可以不使用引号

*值的取值类型

1.数组(整数或浮点数)

2.字符串(在双引号中)

3.逻辑值(true或false)

4.数组(在括号中){“persons”:[{""},{}]}

5.对象(在括号中){“address”{“province”:“陕西…”}}

6.null

数据由逗号分隔：多个键值对由逗号分隔

花括号保存对象:使用{}定义json格式

方括号保存数组:[]

数组定义

<script>
    //1.定义格式
    var person = {"name":"张三","age":23,'gender':true}
    alert(person);
    //2.嵌套格式{}-->[]
    var persons = {"persons":[
        {"name":"张三","age":23,"gender":true},
        {"name":"李四","age":24,"gender":false},
        {"name":"王五","age":25,"gender":true}
        ]
    };
    alert(persons);
    //2.嵌套格式    []-->··{+}
    var ps = [
        {"name":"张三","age":23,"gender":true},
        {"name":"李四","age":24,"gender":false},
        {"name":"王五","age":25,"gender":true}
    ];
    alert(ps);
</script>

2.获取数据

1.json对象.键名

2.json对象[“键名”]

3.数组对象[索引]

<script>
    //1.定义格式
    var person = {"name":"张三","age":23,'gender':true}
    // alert(person);
    //2.嵌套格式{}-->[]
    // var name = person.name;
    // alert(name);
    var name = person["name"];
    // alert(name);
    var persons = {
      "persons":[
        {"name":"张三","age":23,"gender":true},
        {"name":"李四","age":24,"gender":false},
        {"name":"王五","age":25,"gender":true}
        ]
    };
    // alert(persons);
    //获取王五值
    // var name1 = persons.persons[2].name;
    // alert(name1)
    // var age = persons.persons[2].age;
    // alert(age)
    //2.嵌套格式    []-->{}
    var ps = [{"name":"张三","age":23,"gender":true},
        {"name":"李四","age":24,"gender":true},
        {"name":"王五","age":25,"gender":false}];
    //获取李四值
    // alert(ps);
    alert(ps[1].name);
</script>

数组for循环遍历

<script>
    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){
    //     //这样的方式获取不行
    //     // alert(key+":"+person.key);
    //     alert(key+":"+person[key]);
    // }//需要使用双程for循环嵌套
    for (var i = 0; i < ps.length; i++) {
        var p = ps[i];
        for (var key in p){
            // alert(key+":"+person.key);
            alert(key+":"+p[key]);
        }
    }
</script>

3.JSON数据和java对象的相互交换

JSON解析器

常见的解析器：jsonlib、Gson、fastjson，jackjson

1.JSON转为java对象

2.java对象转换JSON

1、使用步骤

1.导入jackson的相关jar包

2.创建jackson核心对象ObjectMapper

3.调用ObjectMapper的相关方法进行转换

1.readValue(json字符串数据,class类型)

@Test
public void Test5() throws IOException {
  //1.初始化json字符串
    String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";
    ObjectMapper mapper = new ObjectMapper();
    Person person = mapper.readValue(json, Person.class);
    System.out.println(person);
}

转换方法
    writeValue(参数1,obj)
        参数1:
            File:将波及对象转换为json对象,并保存到指定文件中
            Write:将波及对象转换为json对象,并将json数据填充到字符输出流中
            OutPutString:将波及对象转换为json对象,并将json数据填充到字符节输出流中
writeValueAsString(obj)：将对象转换为json字符串

 //java对象转字符串
    @Test
    public void Test1() throws IOException {
        //1.创建person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");
        //创建object的黑心对象objectMapper
        ObjectMapper mapper = new ObjectMapper();
        //3.转换

//        String json = mapper.writeValueAsString(p);
//        System.out.println(json);
//        mapper.writeValue(new File("d://day7.txt"),p);
        mapper.writeValue(new FileWriter("d://d.txt"),p);
    }
}

2.注解

1.@JsonIgnore:排查属性。

2.@JsonFormat：属性格式化

  构造器中方法
  //    @JsonIgnore//忽略该属性
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date birthday;
   
   
   
   @Test
    public void Test2() throws IOException {
        //1.创建person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");
        p.setBirthday(new Date());

        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(p);

        System.out.println(json);
    }
}

3.复杂的java对象来转换

1.List：数组

   @Test
    public void Test3() throws IOException {
        //1.创建person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");
        p.setBirthday(new Date());


        Person p1 = new Person();
        p1.setName("张三");
        p1.setAge(23);
        p1.setGender("男");
        p1.setBirthday(new Date());

        Person p2 = new Person();
        p2.setName("张三");
        p2.setAge(23);
        p2.setGender("男");
        p2.setBirthday(new Date());

        //2.创建List集合
        List<Person> list = new ArrayList<Person>();
        list.add(p);
        list.add(p1);
        list.add(p2);
        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(list);

//        System.out.println(json);
    }

2.Map：对象格式一致

@Test
public void Test4() throws IOException {
    //1.创建person对象
    Map<String,Object> omap = new HashMap<String, Object>();
    omap.put("name","李四");
    omap.put("age","23");
    omap.put("gender","男");
    //2.转换
    ObjectMapper mapper = new ObjectMapper();
    String json = mapper.writeValueAsString(omap);

    System.out.println(json);
}

夏来梦栀子

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX JSON笔记

AJAX JSONAJAXAJaX是一种用于创建快速动态网页的技术AJaX是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术1.概念 ASynchronous JavaScript And XML 异步的javaScript 和XML1.异步和同步：客户端和服务器相互通信的基础上同步：客户端必须等待服务器端的响应。在等待的期间介乎的不能做其他操作异步：客户端不需要等待服务器端的响应。在服务器处理请求的购车中，客户端可以进行其他操作 AJaX：可以实现局部加载，传统页面是全局加载
复制链接

扫一扫