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

本文介绍如何在HTML页面中使用Ajax技术与后端Servlet进行交互，展示了一个简单的前后端交互实例，包括HTML页面、web.xml配置以及HelloServlet类的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

[html]view plaincopy 
   
 <!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 onload="loadXMLDoc();loadXMLDoc2()"> -->  
 <button onclick="loadXMLDoc();">ajax</button>  
       
 <div id="showview"></div>  
 </body>  
 </html>  

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

见web.xml配置。

[html]view plaincopy 
   
 <?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类。

[java]view plaincopy 
   
 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 {  
     }  
 }  