JavaWeb实现前后端数据交互(交互类型为JSON)

使用纯原生JS和Servlet实现交互，数据交换格式为JSON

1、前端如何发送、接受数据(以AJAX为例)

①首先构造一个JS对象
②调用JSON.stringify函数把JS对象序列化
③一大堆套话

let xmlHttp = new XMLHttpRequest();
//true或者false决定是否异步 因为是ajax 所以选择异步
xmlHttp.open("POST", "/LoginServlet", true);
xmlHttp.onreadystatechange = function () {
	//状态为4证明发送结束
    if (xmlHttp.readyState == 4) {
    	//从后端接收数据
        let data = JSON.parse(xmlHttp.responseText);
     	do something ……
    }
}
//发送前端的数据
xmlHttp.send(JSON.stringify(loginData));

JSON.parse作用是把后端传来的字符串反序列化为js对象

2、后端如何接收数据
后端通过Servlet实现，和前端相比，读取内容的步骤麻烦了些，对于json的处理也麻烦了一点

ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
ServletInputStream is = request.getInputStream();
byte[] buffer = new byte[1024];

//先把字节流读取到buffer 然后再写入outputStream
while (is.read(buffer) > 0) {
	outputStream.write(buffer);
}
outputStream.close();

//需要用try catch包裹
JSONObject loginData = new JSONObject(outputStream.toString());
//然后用API获取对应的属性
loginData.getString("account");

PS:这里对于JSON的处理用到了org.json包，感觉略有麻烦，日后有时间再学习别的JSON处理的包

3、后端如何发送数据

//result是一个JSON对象
PrintWriter out = response.getWriter();
out.write(result.toString());

相较而言，后端发送数据就简单了许多~