Ajax和Json

Ajax

  • 概念:Asynchronous JavaScript And XML(异步的JavaScript和XML),能够在不刷新整个页面的情况下,实现和后台的数据交互
  • 异步和同步:客户端和服务器相互通信的基础上
    • 同步:客户端必须等待服务器端的响应,在等待期间客户端不能做其他操作
    • 异步:客户端不需要等待服务器端的响应,在服务器请求的过程中,客户端可以进行其他的操作

原生的JS实现方式

  1. 创建核心请求
  2. 建立连接
    参数:
    请求方式:GET、POST
    请求的URL
    同步或异步请求:true(异步),false(同步)
  3. 发送请求
  4. 接收并处理来自服务器的结果
    • 获取方式:xmlhttp.responseText
    • 触发事件:onreadystatechange
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 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");
}

// 建立连接
xmlhttp.opne("GET","ajaxServlet?user=xxx",true);

// 发送请求
xmlhttp.send();

// 4、接收处理响应
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("#xxx").innerHTML = xmlhttp.responseText;
}
}

JQuery实现方式

  1. **$.ajax()**:

    • 语法:$.ajax({键值对})
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $.ajax({
    url:"AjaxDemo", // 请求的服务器名称
    type:"post", // 请求的方式
    data:{"username":"张三"}, // 请求的参数
    dataType:"text", // 接收的文件类型
    success:function (data) { // 成功后的回调函数
    $("#prompt").html(data); // 处理。。。
    },
    error:function(data,type, err){ // 出现错误时执行
    console.log("ajax错误类型:"+type); // 打印错误类型
    console.log(err); // 打印错误信息
    }
    });
  2. **$.get()**:发送get请求

    • 语法: $.get(“url”,”请求参数”,回调函数,”接收的文件类型”)
    1
    2
    3
    $.get("AjaxDemo","{"username":"张三"}",function(){
    $("#prompt").html(data); // 处理。。。
    },"text");
  3. **$.post()**:发送POST请求

    • 语法: $.post(“url”,”请求参数”,回调函数,”接收的文件类型”)
    1
    2
    3
    $.post("AjaxDemo","{"username":"张三"}",function(){
    $("#prompt").html(data); // 处理。。。
    },"text");

JSON

  • 概念:JavaScript Object Notation(JavaScript对象表示法)
  • JSON现在多用于存储和交换文本的语法

语法

  • 基本规则
    1. json数据由键值对构成
      • 键用引号引起来,也可以不用
    2. 多个键值对有逗号分隔
    3. 保存对象:使用{}定义
    4. 保存数组:使用[]定义
  • 获取数据
    1. json对象.键名
    2. json对象.[“键名”]
    3. 数组对象[索引]

JSON解析器

  • Jsonlib
  • Gson
  • fastjson
  • jackson

Java对象转为JSON

  1. 使用jackson转换

    1. 导入jackson的jar包
    2. 创建Jackson核心对象ObjectMapper
    3. 调用ObjectMapper相关方法进行转换
      • 转换方法:
        1. writeValue(参数1,obj)
          • 参数1:
            • File:将obj对象转换为指定的Json字符串,并保存到文件
            • Writer:将obj对象转换为指定的Json字符串,并将Json数据填充到字符输出流中
            • OutputStream:将obj对象转换为指定的Json字符串,并将Json数据填充到字节输出流
        2. writeValueAsString(obj):将对象转为Json格式的字符串
    4. 注解
      1. @JsonIgnore:排除属性
      2. @JsonFormat:属性值的格式化
    5. 复杂Java对象转换
      1. List:转换完是数组
      2. Map:转换完和对象格式一致
    1
    2
    3
    4
    5
    6
    7
    8
    JacksonTestPerson p = new JacksonTestPerson();
    p.setName("张三");
    p.setAge(20);
    p.setGender("男");
    // 创建jackson核心对象
    ObjectMapper mapper = new ObjectMapper();
    String str = mapper.writeValueAsString(p);
    System.out.println(str); // {"name":"张三","age":20,"gender":"男"}
  2. 使用fastjson

    1. 导入jar包:**fastjson下载**
    2. 将Json数据存到map集合中
    3. 使用JSON.toJSONString方法将map集合转换为字符串
    1
    2
    3
    4
    Map<String,Object> map = new HashMap<>();
    map.put("reCode","true");
    map.put("color","green");
    String myJson = JSON.toJSONString(map); //{"color":"green","reCode":"true"}

JSON转为Java对象

  1. 导入jackson的jar包
  2. 创建Jackson核心对象ObjectMapper
  3. 调用ObjectMapper相关方法进行转换
    • readValue(json字符串数据,class)
1
2
3
4
5
6
// 初始化Json字符串
String json = "{\"name\":\"张三\",\"age\":20,\"gender\":\"男\",\"birthday\":\"2019-10-24\"}";
// 创建jackson核心对象
ObjectMapper mapper = new ObjectMapper();
JacksonTestPerson person = mapper.readValue(json, JacksonTestPerson.class);
System.out.println(person); // JacksonTestPerson{name='张三', age=20, gender='男'}

相关文章

JavaScript基础

JavaScript高级

Jquery基础

Jquery高级

Bootstrap

DataTables

Sweetalert2

zTree使用

Vue

前端模块化