ajax 由 XMLHttpRequest 实现前后台json消息交互

最新推荐文章于 2022-07-28 16:14:13 发布

beitian_china

最新推荐文章于 2022-07-28 16:14:13 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/beitian_123/article/details/99684703

版权

spring 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

java

8 篇文章 0 订阅

订阅专栏

1. 前言

在几年的开发中一直从事C/C++的开发，之后机缘巧合接触到了java，并间接的知道了与java相关的其他知识，勉强抓住了IT的尾巴，遂对整个IT行业产生了浓厚的兴趣。第一次接触jsp，眼界为之大开，后来才从朋友那里听说到JSP是非常古老的技术，已经被阿里等放弃，取而代之的是vue等前端技术，心甚向往之。由于工作中仍旧用到JSP，故勉强对JSP应用到的相关知识进行总结，ajax技术实现了页面的部分刷新，而学习中XMLHttpRequest即为ajax第一关。之前因工作需要用到，网上搜到的帖子却大多一知半解，在实现前后台交互之后对前面的学习进行总结。由于水平有限，总结不足之处，还请读者谅解。

2. 前后台代码结构

此次是在jsp页面发送消息至后台java的Controller。

2.1 java端的controller

java的工程名字为ccgms，在其中某个包中创建一个XhttpRequestController的类，结构如图

2.2 jsp侧的结构

<head>
<title>Insert title here</title>
<script type="text/javascript" charset="UTF-8" src="./js/jquery.js"></script>
</head>
<script>
   function sendXmlReq(){
	   
	   var xhr = XMLHttpRequest();
	   if (window.XMLHttpRequest) {
	       xhr = new XMLHttpRequest();
	   } else if (window.ActiveXObject) {
	       xhr = new ActiveXObject("Microsoft.XMLHTTP");
	   }
	   
	   
	   xhr.open("POST", "http://localhost:8080/ccgms/xmlhttptest01.do", true);
	   
	   var value = '{ "name": "zhangsan", "age": "99" }';
	   xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
	   xhr.setRequestHeader('Content-Length', value.length);
	   xhr.onreadystatechange = function () {
	        if (xhr.readyState == 4 && xhr.status == 200) {
	            alert(xhr.responseText);
	        }
	    }
	   xhr.send(value);
   }
</script>

当tomcat启动的时候，通过某个按钮调用sendXmlReq()函数，可以实现消息发送至java中。

3. 前台消息发送至后台

2.2 中的内容是一个json字符串，即{"name":"zhangsan","age":"99"}，当调用sendXmlReq()函数时可以将消息发送至http://localhost:8080/ccgms/xmlhttptest01.do中

3.1 后台接收消息

@RequestMapping(value="/xmlhttptest01.do",headers = "Accept=application/json",method = RequestMethod.POST)
	public void  execute(@RequestBody @Valid UserBean userBean,HttpServletRequest request, HttpServletResponse response) throws IOException {
		System.out.println("receive the request now: userBean="+userBean);
}

此处可以将前台发送过来的字符串打印出来。

4. 后台消息发送至前台

后台消息发送至前台有两种方式（我知道的两种，也可能尚有许多我不知道的方式），下面分别进行介绍。

4.1 通过HttpServletResponse

@RequestMapping(value="/xmlhttptest01.do",headers = "Accept=application/json",method = RequestMethod.POST)
	public void  execute(@RequestBody @Valid UserBean userBean,HttpServletRequest request, HttpServletResponse response) throws IOException {
		System.out.println("receive the request now: userBean="+userBean);
		PrintWriter writer = response.getWriter();
		//type one
		//writer.println("hello world");
		
		//type two
		AjaxResult ar = new AjaxResult();
		ar.setSuccess(true);
		ar.setResultMsg("zhangsan is great man");
		ar.setNextAction("/ajaxresultaction.do?");
		writer.println(ar.toString());
		
		//type three
		writer.flush();
		writer.close();
	}

AjaxResult是自己创建的一个类，其中包含了三个元素，通过toString()方法将其转换成json格式。

4.2 通过@ResponseBody

创建返回的json类

public class IRestResult {

	private String result;
	
	public IRestResult() {
		
	}
	
	public IRestResult(String result) {
		this.result = result;
	}

	public String getResult() {
		return result;
	}

	public void setResult(String result) {
		this.result = result;
	}
	
	
}

public class RestResultBean<T> extends IRestResult {

	private T resultData;
	
	public RestResultBean() {
		
	}
	
	public RestResultBean(String result, T resultData) {
		super(result);
		this.resultData = resultData;
	}

	public T getResultData() {
		return resultData;
	}
}

创建前台返回给后台的json数据

public class UserInfoBean {
	
	@JSONField(name="name")
	private String name;
	
	@JSONField(name="sex")
	private String sex;
	
	@JSONField(name="age")
	private String age;
	
	@JSONField(name="address")
	private String address;
	
	public UserInfoBean() {
		
	}

	public UserInfoBean(String name, String sex, String age, String address) {
		super();
		this.name = name;
		this.sex = sex;
		this.age = age;
		this.address = address;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getSex() {
		return sex;
	}

	public void setSex(String sex) {
		this.sex = sex;
	}

	public String getAge() {
		return age;
	}

	public void setAge(String age) {
		this.age = age;
	}

	public String getAddress() {
		return address;
	}

	public void setAddress(String address) {
		this.address = address;
	}

	@Override
	public String toString() {
		return "UserInfoBean [name=" + name + ", sex=" + sex + ", age=" + age + ", address=" + address + "]";
	}
	
}

回填数据

@RequestMapping(value="/xmlhttptest01.do",headers = "Accept=application/json",method = RequestMethod.POST)
	public @ResponseBody IRestResult  execute(@RequestBody @Valid UserBean userBean,HttpServletRequest request, HttpServletResponse response) throws IOException {
		System.out.println("receive the request now: userBean="+userBean);
		
		
		UserInfoBean uib = new UserInfoBean("lisi","man","30","hebei");
		RestResultBean<UserInfoBean> restResult = new RestResultBean<UserInfoBean>("success", uib);
		return restResult;
	}

beitian_china

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ajax 由 XMLHttpRequest 实现前后台json消息交互

1. 前言在几年的开发中一直从事C/C++的开发，之后机缘巧合接触到了java，并间接的知道了与java相关的其他知识，勉强抓住了IT的尾巴，遂对整个IT行业产生了浓厚的兴趣。第一次接触jsp，眼界为之大开，后来才从朋友那里听说到JSP是非常古老的技术，已经被阿里等放弃，取而代之的是vue等前端技术，心甚向往之。由于工作中仍旧用到JSP，故勉强对JSP应用到的相关知识进行总结，a...
复制链接

扫一扫

专栏目录