小白学Java34:JSON和AJAX

什么是JSON

JSON是一种轻量级的数据交换格式,利用文本格式来存储和表示数据

JSON语法

• [ ] (中括号) 表示数组
• { } (大括号)表示对象
• “”(双引号) 表示属性名称,或者字符串类型的值
• : (冒号)表示属性和值之间的间隔符
• , (逗号)表示多个属性的间隔符或者多个元素的间隔符

JSON解析

FastJSON解析

首先要导包,fastJSON包

• 对象转JSON

使用的是JSON.toJSONString(对象)方法

User user = new User();
        user.setId(1);
        user.setName("张三");
        //把对象转为JSON字符串
        String s = JSON.toJSONString(user);//{"id":1,"name":"张三"}

• JSON转成对象

使用的是JSON.parseObject(JSON字符串,类.class)

User user1 = JSON.parseObject(s, User.class);//User{id=1, name='张三'}

Jackson解析

先导Jar包

• 对象转JSON

 ObjectMapper mapper = new ObjectMapper();
 String s1 = null;
        try {
            s1 = mapper.writeValueAsString(user);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }

• JSON转对象

 mapper.readValue(s1,User.class);

浏览器处理JSON字符串

转成JSON字符串

JSON.stringify(obj); //转化为JSON字符串

转成对象

JSON.parse(JsonString)

			var obj = {
				name: "zhangsan",
				age: 20
			} //创 建对象
			JSON.stringify(obj)//转化为JSON字符串
			var JsonString = 
			var JsonObj = JSON.parse(JsonString); //JSON字符串转化为对象
			document.write(JsonObj.name);

AJAX

简单理解为局部刷新技术

创建XMLHTTP Request对象

var xmlhttp = new XMLHttpRequest();

发送请求

如果是GET请求可以在请求地址上携带数据,
如果是POST请求,则需要设置HTTP头
setRequestHeader(header,value) 向请求添加http头,

xmlhttp.open("GET","demo2.html?name=a");//设置请求方式,请求地址,默认为异步请求
xmlhttp.send();  //将请求发送到服务器

xmlhttp.open("POST","demo2.html")
xmlhttp.setRequestHeader("Content-type","application/x-www-fomr-urlencoded")
xmlhttp.send("name=a")

使用GET请求响应到页面

<script>
        var xh = new XMLHttpRequest();
        xh.open("GET","data");
        xh.send();
        xh.onreadystatechange = function () {
            if(xh.readyState==4 && xh.status==200){
                alert(xh.responseText);
            }
        }
    </script>

<button id="btn">填充数据</button>
<div id="d1"></div>
<script>
    var btn = document.getElementById("btn");
    var d1 = document.getElementById("d1");

    btn.addEventListener("click", function () {
        var xh = new XMLHttpRequest();
        xh.open("GET", "data");
        xh.send();
        xh.onreadystatechange = function () {
            if (xh.readyState == 4 && xh.status == 200) {
                d1.innerHTML = xh.responseText;
            }
        }
    })

</script>

使用post请求响应到页面

xh.open("post", "data");
xh.setRequestHeader("Content-type","application/x-www-form-urlencoded");