使用Struts2和jQuery EasyUI实现简单CRUD系统（一）——从零开始，ajax与Servlet的交互

最新推荐文章于 2021-09-19 16:58:16 发布

iaiti

最新推荐文章于 2021-09-19 16:58:16 发布

阅读量4.2k

点赞数 2

分类专栏：前端文章标签： ajax jquery struts2.0 html servlet

本文链接：https://blog.csdn.net/iaiti/article/details/48518587

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

昨天同事在找资料的时候找到我这篇博客，但他不知道是我写的，我问他，你看得懂吗？不懂，他说。然后我自己看了一遍。确实，把那么多的东西写成3篇，写得过于简单了。

所以，打算从零开始将整个思路理清，其实昨天晚上就搞清了。将之前写的那些排到后面，将基础的补到前面来。

最原始的，就是前端与后台的交互，但是自己学j2ee的知道，很多时候，自己写jsp的时候，jsp帮你把前端后台串联起来。但事实上，很多时候前端写好的东西，需要后台进行一些处理，再去改成jsp代码是很恶心的东西，什么都是jsp。其实前端的html不需要更改成自己熟悉的jsp，而是通过ajax进行交互，后台提供接口即可。要用EasyUI和Struts这样方便的框架的同时，弄懂底层的原理也是有必要的。

ajax部分写了篇—— 《AJAX问题之XMLHttpRequest status = 0 》。以前写的东西看不懂的时候，会重新看过，将没讲清楚的补上。

XMLHttpRequest对象用于后台与服务器交换数据，一个很神奇的东西。

新建一个web工程。

新建一个静态的HTML页面，ajax.html。

<!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>Insert title here</title>
<script type="text/javascript">
	var xmlhttp = null;
	var url = "helloServlet"
	function loadXMLDoc() {
		
		if (window.XMLHttpRequest) {// code for all new browsers
			xmlhttp = new XMLHttpRequest();
		} else if (window.ActiveXObject) {// code for IE5 and IE6
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		if (xmlhttp != null) {
			xmlhttp.onreadystatechange = state_Change;
			xmlhttp.open("GET", url, true);
			xmlhttp.send(null);
		}
	}

	function state_Change() {
		if (xmlhttp.readyState == 4) {// 4 = "loaded"
			//alert("4");
			if (xmlhttp.status == 200) {// 200 = OK
			//	alert(xmlhttp.responseText);
				document.getElementById("showview").innerHTML=xmlhttp.responseText;
			} else {
				alert("Problem retrieving XML data"); 
			}
		}
	}
</script>
</head>
<body>
<!-- <body οnlοad="loadXMLDoc();loadXMLDoc2()"> -->
<button οnclick="loadXMLDoc();">ajax</button>
	
<div id="showview"></div>
</body>
</html>

点击ajax这个button的时候，请求helloServlet。

见web.xml配置。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
id="WebApp_ID" version="3.0">
  <display-name>ZeroToOne</display-name>
<!--   <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list> -->
 	<servlet>
        <servlet-name>Hello</servlet-name>
        <servlet-class>Servlet.HelloServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Hello</servlet-name>
        <url-pattern>/helloServlet</url-pattern>
    </servlet-mapping>
</web-app>

跳转处理的其实是HelloServlet类。

public class HelloServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		resp.setContentType("text/html");
		PrintWriter out = resp.getWriter();
		out.println("<html>");
		out.println("<head>");
		out.println("<body>");
		out.println("<h1>HELLO!</h1>");
		out.println("</body>");
		out.println("</head>");
		out.println("</html>");
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
	}
}

Servlet利用PrintWriter将字符输出到客户端。如果直接访问该Servlet的话，可以直接看到HELLO！这些字符。

但是现在是通过ajax进行交互，ajax通过xmlhttp.responseText获取Servlet输出的字符，再将字符赋予id为showview的div，div将Servlet的数据展示在ajax.html页面上。

这便是最简单的前后端的交互。

源码下载：http://download.csdn.net/detail/iaiti/9114975

最终的结果：

iaiti

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
9
评论
使用Struts2和jQuery EasyUI实现简单CRUD系统（一）——从零开始，ajax与Servlet的交互

昨天同事在找资料的时候找到我这篇博客，但他不知道是我写的，我问他，你看得懂吗？不懂，他说。然后我自己看了一遍。确实，把那么多的东西写成3篇，写得过于简单了。所以，打算从零开始将整个思路理清，其实昨天晚上就搞清了。最原始的，就是前端与后台的交互，但是自己学j2ee的知道，很多时候，自己写jsp的时候，jsp帮你把前端后台串联起来。但事实上，很多时候前端写好的东西，需要后台进行一些处理，再去改成jsp
复制链接

扫一扫