天天看点
返回

Ajax & json知识点整理

AJAX

1.概念

ASynchronous JavaScript And XML 异步的Javascript 和XML

一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

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

同步：

客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作

异步

客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他操作

AJAX的作用：提升用户的体验

2.实现方式

1.原生JS实现方法（了解即可）

<script>
        function fun() {
            //发送异步请求
            //1.创建核心对象,兼容模式
            var xmlHttp;
            if(window.XMLHttpRequest){
               xmlHttp = new XMLHttpRequest();
            }else{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.建立链接
            /*
                参数：1.请求方式：get  post
                            get方式，请求参数在url后面拼接
                            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 () {
                //判断就绪状态是否为4，判断status响应状态码是否是200
                if (xmlHttp.readyState==4 && xmlHttp.status == 200){
                    //获取服务器响应的结果
                    var responseText = xmlHttp.responseText;
                    alert(responseText);
                }
            }
        }
    </script>

2.Jquery实现方式

1. . a j a x ( ) 语 法 ： .ajax() 语法： .ajax()语法：.ajax({键值对})

参数

method get/post

url 1.get.php / 1.post.php

data 数据

success 数据下载成功以后执行的函数

error 数据下载失败后执行的函数

//使用$.ajax()发生异步请求
            $.ajax({
               url:"ajaxServlet",//请求路径
               type:"post",//请求方式
               //data:"username=jack&age=23",//请求参数
                data:{
                   "username":"jack",
                    "age":"23"
                },
                success:function (msg) {
                   alert(msg);
                    //响应成功后的回调函数
                },
                error:function (msg) {
                    //响应失败后的回调函数
                    alert("出错了")
                },
                dataType:"text" //设置接收到的响应数据的格式
            });

2.$.get发送get请求 语法：Jquery.get(url , [data], [callback], [type])

参数：

url：请求路径

data：请求参数

callback：回调函数

type：响应结果的类型

function fun() {
           //使用$.get请求
            $.get("ajaxServlet",{username:"rose"},function (msg) {
                alert(msg);
            },"text");
        }

3…$.post()发送post请求 语法：Jquery.post(url , [data], [callback], [type])

<script>
        function fun() {
           //使用$.get请求
            $.post("ajaxServlet",{username:"rose"},function (msg) {
                alert(msg);
            },"text");
        }
    </script>

JSON

概念：JavaScript Object Notation Javascript 对象表示法

Json现在多用于存储和交换文本信息的语法，进行数据的传输。比XML更小，更快，更容易解析

语法：

1.基本规则

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

键用引号（单双都可以）引起来，也可以不使用引号

值的取值类型：

1.数字（整数或浮点数）

2.字符串（在双引号中）

3.逻辑值（true 或 false）

4.数组（在方括号中）

{“persons”:[ { },{ }] }

5.对象（在花括号中）{“address”：{“province：“陕西”…}}

6. null

2.数据由逗号分割：多个键值对由逗号分割

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

4.方括号保存数组 [ ]

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

2.获取数据

1.json对象.键名

2.json对象[“健名”]

3.数组对象[索引]

3.遍历获取数据

for in 循环

var person = {"name":"张三",age:23,'gender':true};
        //获取person对象中所有的健和值
        //for  in  循环
        for (var key in person){
            //注意这里的key 是字符串
            alert(key+":"+person[key]);
        }

Json数据和Java对象的相互转换

Json解析器：

常见的解析器：Jsonlib ， Gson ， fastjson ，jackson

1.Json转为java对象（了解）

使用步骤：

1.导入jackson的相关jar包

jackson-core-2.9.8.jar

jackson-databind-2.9.8.jar

jackson-annotations-2.9.0.jar

2.创建Jackson核心对象 ObjectMapper

ObjectMapper mapper = new ObjectMapper();

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

转换方法：

  1. readValue（json字符串数据，Class）

    参数1：

    File ：将obj对象转换为JSON字符串，并保存到指定的文件中

    Writer：将obj对象转换为JSON字符串，并将json数据填充到字符串输出流中

    OutputStream:将obj对象转换为JSON字符串，并将json数据填充到字节输出流中

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

    String string = mapper.writeValueAsString(p1);

2.java对象转为Json（jackson）

使用步骤：

1.导入jackson的相关jar包

jackson-core-2.9.8.jar

jackson-databind-2.9.8.jar

jackson-annotations-2.9.0.jar

2.创建Jackson核心对象 ObjectMapper

ObjectMapper mapper = new ObjectMapper();

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

转换方法：

  1. writeValue（参数1，obj）

    参数1：

    File ：将obj对象转换为JSON字符串，并保存到指定的文件中

    Writer：将obj对象转换为JSON字符串，并将json数据填充到字符串输出流中

    OutputStream:将obj对象转换为JSON字符串，并将json数据填充到字节输出流中

    2. writeValueAsString(obj)：将对象转为json字符串

    String string = mapper.writeValueAsString(p1);

注解：

  1. @JsonIgnore:排除属性。 排除对应属性后，不会再转换为json键值对

    在对象的属性上 或者get方法上添加

    @JsonIgnore

    private Date birthday; //忽略该属性

[email protected]：属性值格式化

在对象的属性上 或者get方法上添加

@JsonFormat(pattern = "yyyy-MM-dd HH-mm-ss")
private Date birthday;  //格式化属性

复杂java对象转换

List：

转换后是数组

//创建list集合
        List<Person> list = new ArrayList<Person>();
        list.add(p1);
        list.add(p2);
        list.add(p3);

        //创建ObjectMapper对象
        ObjectMapper mapper = new ObjectMapper();
        //转换
        String string = mapper.writeValueAsString(list);
        System.out.println(string);
//[{"name":"张三","age":23,"gender":"男","birthday":"2020-05-14 12-16-20"},{"name":"张三","age":23,"gender":"男","birthday":"2020-05-14 12-16-20"},{"name":"张三","age":23,"gender":"男","birthday":"2020-05-14 12-16-20"}]

Map：转换后和对象的格式一致

public void test4() throws Exception {
        //1.创建map对象

        Map<String,Object> map = new HashMap<String,Object>();
        map.put("name","张三");
        map.put("age",23);
        map.put("gender","男");
        //创建ObjectMapper对象
        ObjectMapper mapper = new ObjectMapper();
        //转换
        String string = mapper.writeValueAsString(map);
        System.out.println(string);
        //{"gender":"男","name":"张三","age":23}
    }
ajax jquery JavaWab js
上一篇: Servlet (3)
下一篇: 下列不属于mysql的系统数据库是_【单选题】下列( )不属于SQL Server 2014在安装时创建的系统数据库。...

继续阅读