在服务器向客户端响应数据的时候，可以分为两种，一种是少量的数据，以字符串的形式进行传输，而另外一种就是在传输大量的数据时，java程序一般都是将数据封装在对象中进行传输的。
但是编写的语言是用java语言来书写的，而前端接受响应的是javaScript语言。这是是两种语言，对象的格式是不一致的。
那要如何解决呢？
所以得需要在java中对对象中的数据进行转换
早期的解决方式：将对象中的数据写入到xml文件中，将xml文件返回，这种语言是比较麻烦的
现在就诞生出了一种轻量级的解决方案：JSON
JSON
JSON（ (JavaScript Object Notation)JavaScript对象的表面形式） 是一种轻量级的数据交换格式
● 数据在键值对中
● 数据由逗号分隔
● 大括号保存对象
● 方括号保存数组
语法： JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，以键/值对的形式组合中的键名写在前面并用双引号 " " 包裹，使用冒号 : 分隔，然后紧接着值，本质它就是字符串。
例如：
{“firstName”： “John”}
{“name”：“value”，“sex”：“男”}
对象：{键:值,键:值,键:值…}
集合：[{键:值,键:值…},{键:值,键:值…},{键:值,键:值…}…]
JAVA对象转JSON
在异步交换数据时，java对象不能直接被传递给JavaScript,所以需要先把java对象转换为JSON格式字符串，把字符串响应给客户端，再由客户端将JSON字符串转换为JavaScript对象就可以了
（ $.parseJSON(jsonstr) ）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个web程序</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function subform() {
//subform获得account和password打印进去的数据
var account = document.getElementById("accountId").value;
var password = document.getElementById("passwordId").value;
//使用XMLHttpRequest对象发起异步请求
var xmlHttpRequest = new XMLHttpRequest();
//建立与服务器的连接
xmlHttpRequest.open("post", "demourl", true);
//设置请求的头信息
xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//设置提交数据的格式的请求头
//发送请求
xmlHttpRequest.send("account=" + account + "&password=" + password);
// 接收服务器端响应后来的数据，当发送请求之后，就会触发nreadystatechange
// 的这个事件，在此事件的回调函数中，获取响应的内容
xmlHttpRequest.onreadystatechange = function () {
//当对象就绪状态为为4，http响应状态码为200时获取响应内容
//如果不写就绪状态的话，就会获取readystate中的2,3,4依次执行一遍
//http响应就绪码，是为了确保这个响应过来的码是正确的就才能执行
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
//从后端响应回来一个json格式的字符串，在前端需要将其转换为JavaScript对象
//通过使用jQuery缩短代码量来把responseText封装为JavaScript的对象
var obj = $.parseJSON(xmlHttpRequest.responseText)
//方便前端操作
if (obj.id != null) {
alert("操作成功html");
location.replace("success.html");//然后跳转页面来进行
} else if (xmlHttpRequest.responseText == 1){
alert("服务器忙html")
}
}
}
}
</script>
</head>
<body>
<!--前段传输的数据一定都是键=值&键=值-->
<form><!-- enctype="application/x-www-form-urlencoded"-->
账号:<input type="text" name="account" id="accountId"><br/>
密码:<input type="password" name="password" id="passwordId"><br/>
<input type="button" value="保存" onclick="subform()">
</form>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>demo</servlet-name>
<servlet-class>com.student.firstweb.servlet.Demo1Servlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>demo</servlet-name>
<url-pattern>/demourl</url-pattern>
<!--前端点击的连接就是与这个做连接相对应-->
</servlet-mapping>
</web-app>
package com.student.firstweb.servlet;
import com.google.gson.Gson;
import com.student.firstweb.model.User;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class Demo1Servlet extends HttpServlet {
//doPost()处理post请求
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//应为不支持中文，所以就要设置中文编码
PrintWriter writer = null;
try{
req.setCharacterEncoding("utf-8");//设置post请求数据的解码格式
System.out.println(req.getParameter("account"));
System.out.println(req.getParameter("password"));
//响应
resp.setContentType("text/html;charset=utf-8");//设置响应内容的编码格式
writer = resp.getWriter();//获得打印字符流
User user = new User();
// json
//writer.println("{id:"+user.getId()+",account:"+user.getAccount()+"}");
// 我这里采用了一个谷歌开发的架包 gson-2.1.jar
Gson gson = new Gson();
String s = gson.toJson(user);
writer.println(s);
// 因为是XMLHttpRequest这个对象发的
// 所以也是响应返回给了浏览器中的XMLHttpRequest对象
// 就是变了一个提交方式
}catch (Exception e){
e.printStackTrace();
writer.println(1);
}
}
}
package com.student.firstweb.model;
public class User {
private int id = 101;
private String account = "qwer";
public int getId() {
return id;
}
public String getAccount() {
return account;
}
}
想把获取的信息在下个页面显示的问题解决
在浏览器中不仅可以显示信息，也可以存信息
sessionStorage称为浏览器会话，浏览器关闭后数据就会消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个web程序</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function subform() {
//subform获得account和password打印进去的数据
var account = document.getElementById("accountId").value;
var password = document.getElementById("passwordId").value;
//使用XMLHttpRequest对象发起异步请求
var xmlHttpRequest = new XMLHttpRequest();
//建立与服务器的连接
xmlHttpRequest.open("post", "demourl", true);
//设置请求的头信息
xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//设置提交数据的格式的请求头
//发送请求
xmlHttpRequest.send("account=" + account + "&password=" + password);
// 接收服务器端响应后来的数据，当发送请求之后，就会触发nreadystatechange
// 的这个事件，在此事件的回调函数中，获取响应的内容
xmlHttpRequest.onreadystatechange = function () {
//当对象就绪状态为为4，http响应状态码为200时获取响应内容
//如果不写就绪状态的话，就会获取readystate中的2,3,4依次执行一遍
//http响应就绪码，是为了确保这个响应过来的码是正确的就才能执行
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
//从后端响应回来一个json格式的字符串，在前端需要将其转换为JavaScript对象
//通过使用jQuery缩短代码量来把responseText封装为JavaScript的对象
var obj = $.parseJSON(xmlHttpRequest.responseText);
//方便前端操作
if (obj.id != null) {
alert("操作成功html");
//将对象直接存储到了当前浏览器当中
window.sessionStorage.setItem("user",xmlHttpRequest.responseText );
location.replace("success.html");//然后跳转页面来进行
} else if (xmlHttpRequest.responseText == 1){
alert("服务器忙html")
}
}
}
}
</script>
</head>
<body>
<!--前段传输的数据一定都是键=值&键=值-->
<form><!-- enctype="application/x-www-form-urlencoded"-->
账号:<input type="text" name="account" id="accountId"><br/>
密码:<input type="password" name="password" id="passwordId"><br/>
<input type="button" value="保存" onclick="subform()">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>success</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
var str = window.sessionStorage.getItem("user");
var user = $.parseJSON(str);
$("#accountId").html(user.account);
})
</script>
</head>
<body>
登录成功<span id="accountId"></span>
</body>
</html>
package com.student.firstweb.model;
public class User {
private int id = 101;
private String account = "qwer";
public int getId() {
return id;
}
public String getAccount() {
return account;
}
}
在success页面成功获得到了index页面保存下来的数据并打印出来
