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

分手后的思念是犯贱 2022-08-08 14:46 186阅读 0赞

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

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

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

ajax部分写了篇—— [《AJAX问题之XMLHttpRequest status = 0 》][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>
    
    <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>
    
     	<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][http_download.csdn.net_detail_iaiti_9114975]

最终的结果：

![Center][]

[AJAX_XMLHttpRequest status _ 0]: http://blog.csdn.net/iaiti/article/details/42192659
[http_download.csdn.net_detail_iaiti_9114975]: http://download.csdn.net/detail/iaiti/9114975
[Center]: /images/20220731/465295851173408681c685a31abd8530.png