Ajax二：一个ajax比较拟真的范例-CSDN博客

本文链接：https://blog.csdn.net/csucsgoat/article/details/112885184

本文详细介绍了在Java Web开发中，如何使用Servlet和Ajax进行前后端数据交互。通过NewsListServlet将JavaBean转换为JSON并发送到前端，前端使用JavaScript的XMLHttpRequest对象发送Ajax请求，接收到JSON数据后进行解析并动态更新页面内容。整个过程突显了JSON在数据传输中的重要性和Ajax在实现页面无刷新更新中的作用。

摘要由CSDN通过智能技术生成

这个例子主要是展示在实际中，前后端交互时候，传输的文本常常是JSON的形式！

基本内容：

News.java：

/**
 * JavaBean
 * @author Administrator
 *
 */
public class News {
	private String title;
	private String date;
	private String source;
	private String content;
	private News() {}

	public News(String title, String date, String source, String content) {
		super();
		this.title = title;
		this.date = date;
		this.source = source;
		this.content = content;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}
	public String getDate() {
		return date;
	}
	public void setDate(String date) {
		this.date = date;
	}
	public String getSource() {
		return source;
	}
	public void setSource(String source) {
		this.source = source;
	}
	public String getContent() {
		return content;
	}
	public void setContent(String content) {
		this.content = content;
	}
	
	
}

……………………………………………………

NewsListServlet类：

（1）后台处理后的数据向前台传的时候，需要转成JSON；这需要引入fastjson的jar包；

（2）这个Servlet并没有主动重定向至news.html；而是在这儿默默的等待，等待news.html的Ajax的XmlHttpServlet主动去请求访问这个servlet；

（3）这个Servlet通过，response.getWriter().println(newsJsonStr);将数据加入到了响应中去了；嗯就可以这样理解！！！

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;

/**
 * Servlet implementation class NewsListServlet
 */
@WebServlet("/news_list")
public class NewsListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public NewsListServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		List<News> list = new ArrayList<News>();
		list.add(new News("标题1","2021-1-1","TIOBE","内容1"));
		list.add(new News("标题2","2021-1-2","TIOBE","内容2"));
		list.add(new News("标题3","2021-1-3","TIOBE","内容3"));
		// 在Servlet处理后，对外进行字符串序列化的时候，一律将其转化为JSON；通过JSON，可以对数据进行有效的描述；
		// 然后在前端的html中，再通过JavaScript自带的JSON处理方式，将从这儿发送过去的数据进行解析
		// 将List转成JSON需要，引入fastjson包
		String newsJsonStr = JSON.toJSONString(list);
		System.out.println(newsJsonStr);
		response.setContentType("text/html;charset=UTF-8"); // json中包含了中文
		response.getWriter().println(newsJsonStr);
	}

}

……………………………………………………

news.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="container"></div>
	<script>
		// 1.创建XmlHttpRequest对象
		var xmlhttp;
		if(window.XMLHttpRequest){
			xmlhttp = new XMLHttpRequest();
		}else{
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		// 2.发送Ajax请求
		xmlhttp.open("GET","/ajax/news_list",true);
		xmlhttp.send();
		// 3.处理服务器响应
		xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				var t = xmlhttp.responseText;  // 从后台拿过来的数据：这个JSON是个JSON字符串
				var jsont = JSON.parse(t);  // 需要将JSON字符串转成JSON对象；JavaScript可以认为内置了JSON对象
				console.log(t);
				console.log(jsont);
				var html = "";
				for(var i = 0;i< jsont.length;i++){
					var news = jsont[i];
					html = html+"<h1>"+news.title+"</h1>";
					html = html + "<h2>"+news.date+" "+news.source+" "+news.content + "</h2>";
					html = html + "<hr/>";
				}
				document.getElementById("container").innerHTML = html;
			}
		}
	</script>
</body>
</html>

效果：html中ajax部分，会去请求访问servlet，获取响应中的文本，处理后展示在界面上；