JavaWeb核心——ajax技术知识详解及示例分析（二）

置顶清风不渡

于 2019-10-28 16:33:12 发布

阅读量493

点赞数

分类专栏： JavaWeb核心技术文章标签： javaWeb Ajax Json

本文链接：https://blog.csdn.net/WXKKang/article/details/102726635

版权

JavaWeb核心技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Ajax技术知识详解及示例分析（二）

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

一、JSON

上一篇我们将过了通过ajax技术来实现页面局部刷新技术，即ajax对象向servlet容器发送请求并获取响应之后将内容显示在网页上，最后我们遇到了一个问题，Java是一种面向对象编程语言，绝大多数可能会给ajax响应的是一个Java对象，而不是简单的字符串，但是当ajax对象带着servlet响应的Java对象“开开心心”的回到jsp中时，就出现了一个十分尴尬的问题——ajax写在javascript中，而javascript“不认识”java对象，它只能处理普通的字符串和JS对象等，那怎么办呢？就需要使用工具，将java对象转化成Json字符串，这样javascript就可以识别后再做处理了，那么它怎么用呢？有很多方式我现在知道两种方式，介绍给大家吧：

假设现在我们需要将一条用户信息响应并显示：

1、方式一

使用 gson-2.7 jar包实现，步骤如下：

User类代码：

public class User {
	private String username;
	private String password;
	private String gender;
	public User() {
		super();
		// TODO Auto-generated constructor stub
	}
	public User(String username, String password, String gender) {
		super();
		this.username = username;
		this.password = password;
		this.gender = gender;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getGender() {
		return gender;
	}
	public void setGender(String gender) {
		this.gender = gender;
	}
}

第一步：导入gson jar包
第二步，在servlet代码中创建对象，代码如下

package com.etime.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;

import com.google.gson.Gson;
@WebServlet("/ajax")
public class Servlet extends HttpServlet{

	private static final long serialVersionUID = -4143249464552690886L;
	
	@Override
	public void service(ServletRequest req, ServletResponse resp) throws ServletException, IOException {
		//设置请求编码格式
		req.setCharacterEncoding("UTF-8");
		//设置响应编码格式
		resp.setCharacterEncoding("UTF-8");
		resp.setContentType("application/json;charset=UTF-8");
		//获取请求信息
		//处理请求信息
		User user = new User("xxp", "123456", "man");
		//响应处理结果
		resp.getWriter().write(new Gson().toJson(user));
		
	}
}

第三步，在jsp中接收并转换，代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
	#showdiv{
		border:1px solid #000;
		width: 400px;
		height: 100px;
	}
</style>
<script type="text/javascript">
	function showMessage() {
		//创建ajax引擎对象
		var ajax;
		if(window.XMLHttpRequest){
			ajax = new XMLHttpRequest;
		}else if(window.ActiveXObject){
			ajax = new ActiveXObject("Msxml2.XMLHTTP");
		}
		//重写onreadystatechange方法
		ajax.onreadystatechange = function(){
			//判断ajax状态码
			if(ajax.readyState==4){
				//判断响应状态码
				if(ajax.status==200){
					var result = ajax.responseText;
					result = JSON.parse(result);
					var showdiv = document.getElementById("showdiv");
					showdiv.innerHTML = "账号："+result.username+",密码："+result.password+",性别："+result.gender;
				}else if(ajax.status==404){
					var showdiv = document.getElementById("showdiv");
					showdiv.innerHTML = "请求资源不存在";
				}else if(ajax.status==500){
					var showdiv = document.getElementById("showdiv");
					showdiv.innerHTML = "服务器繁忙";
				}
			}
		}
		//发送请求
		ajax.open("GET","ajax",true);
		ajax.send(null);
	}
</script>
</head>
<body>
	<h1>欢迎来到清风不渡的博客</h1>
	<hr>
	<input type="button" value="测试" onclick="showMessage()">
	<br />
	<br />
	<div id="showdiv">
	</div>
</body>
</html>

运行结果（点击测试按钮后）：
在这里插入图片描述

2、方式二

使用 jackson jar包实现，步骤如下：

第一步：导入jar包
在这里插入图片描述
在serlvet类中使用jar包内的方法将Java对象转换为Json字符串

package com.etime.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.google.gson.Gson;
@WebServlet("/ajax")
public class Servlet extends HttpServlet{

	private static final long serialVersionUID = -4143249464552690886L;
	
	@Override
	public void service(ServletRequest req, ServletResponse resp) throws ServletException, IOException {
		//设置请求编码格式
		req.setCharacterEncoding("UTF-8");
		//设置响应编码格式
		resp.setCharacterEncoding("UTF-8");
		resp.setContentType("application/json;charset=UTF-8");
		//获取请求信息
		//处理请求信息
		User user = new User("xxp", "123456", "男");
		//响应处理结果
		//创建ObjectMapper对象将java对象转换为json字符串并返回
		ObjectMapper mapper = new ObjectMapper();
		String userString = mapper.writeValueAsString(user);
		resp.getWriter().write(userString);
		
	}
}

这两种方式的处理结果都是一样的，都是将Servlet中的Java对象转换为Json字符串返回给浏览器，这样，页面里的js代码就可以顺利的执行并取出里面的数据来显示在页面上的某一处了。

那么，解决了这个问题之后，想想还有什么问题需要我们解决呢？对喽，我们Java可以将数据封装成一个对象来提高代码的复用性，那么照现在这样的方法，我们每次使用Ajax技术都需要写这么多代码，我们可不可以将重复的代码封装起来呢？答案肯定是可以的，并且封装技术前辈们已经替我们封装好了哟，我们只需要直接调用就可以了，那就是用JQuery的方式实现Ajax技术，我们下篇来进行解说，感兴趣的童鞋可以查阅文档预习一下哦 ~ ~

好啦，今天的学习就到这里吧！记录学习，记录生活，我还是那个java界的小学生，一起努力吧！！
欢迎各位看官评论探讨哟 ~ ~ 小生在此谢过了 ~ ~