ajax例子servlet传值

### AJAX与Servlet交互详解 #### 一、引言 在Web开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛应用于实现网页的部分更新而无需重新加载整个页面，从而提升了用户体验。本文将通过一个具体的例子来详细介绍如何使用AJAX与Servlet进行数据交换，并通过Servlet与数据库交互来验证用户名是否已经存在。 #### 二、基础知识简介 ##### 2.1 AJAX基本原理 AJAX技术的核心是`XMLHttpRequest`对象，它提供了浏览器与服务器之间进行异步通信的能力。通过使用这个对象，可以实现在不刷新整个页面的情况下，向服务器请求数据或提交数据。 ##### 2.2 Servlet简介 Servlet是一种Java技术，用于扩展服务器的功能。Servlet可以接收客户端发送的请求并返回相应的响应，类似于HTTP协议中的服务器端行为。Servlet可以通过Java API与数据库或其他服务进行交互。 ##### 2.3 Struts框架 Struts是一个基于MVC（Model-View-Controller）设计模式的Java Web框架，它简化了Web应用的开发过程。在本例中，我们使用Struts框架来管理请求和响应流程。 #### 三、具体实现步骤 ##### 3.1 创建XMLHttpRequest对象 ```javascript function createXMLHttpRequest() { if (window.XMLHttpRequest) { // Mozilla XMLHttpReq = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } } ``` 这段代码负责创建`XMLHttpRequest`对象，以便后续发送HTTP请求。 ##### 3.2 发送请求 ```javascript function send(url) { createXMLHttpRequest(); XMLHttpReq.open("GET", url, true); XMLHttpReq.onreadystatechange = proce; XMLHttpReq.send(null); } ``` 这里定义了一个`send`函数，该函数接受一个URL参数，并使用之前创建的`XMLHttpRequest`对象发送一个GET请求。 ##### 3.3 处理响应 ```javascript function proce() { if (XMLHttpReq.readyState == 4) { // 对象状态 if (XMLHttpReq.status == 200) { // 信息已成功返回 var root = XMLHttpReq.responseXML; var res = root.getElementsByTagName("content")[0].firstChild.data; window.alert(res); } else { window.alert("所请求的页面有异常"); } } } ``` 此函数用于处理服务器返回的数据。当服务器响应状态码为200时，会解析XML响应并弹出提示框显示结果。 ##### 3.4 验证用户名 ```javascript function check() { var name = document.getElementById("name").value; if (name == "") { alert("请输入姓名!"); return false; } else { document.getElementById("load").style.display = ''; send('login.do?name=' + name); document.getElementById("load").style.display = 'none'; } } ``` 这个函数用于检查输入的用户名是否为空，并发送一个请求到服务器端进行用户名验证。 #### 四、服务器端处理 在服务器端，我们需要编写一个Servlet来接收来自客户端的请求，并处理逻辑如查询数据库等。例如： ```java public class LoginServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name = request.getParameter("name"); // 连接数据库，查询用户名是否存在 boolean exists = checkUsernameInDatabase(name); // 返回结果 if (exists) { response.getWriter().write("<content>用户名已存在</content>"); } else { response.getWriter().write("<content>用户名可用</content>"); } } private boolean checkUsernameInDatabase(String name) { // 数据库连接代码... return false; // 假设用户名不存在 } } ``` #### 五、Struts配置 Struts框架需要配置相关的`Action`和表单bean，如下所示： ```xml <struts-config> <data-sources/> <form-beans> <form-bean name="loginForm" type="org.viman.struts.form.LoginForm"/> </form-beans> <actions> <action path="/login" type="org.viman.struts.action.LoginAction" name="loginForm" input="/login.jsp" scope="request" validate="true"> <forward name="success" path="/welcome.jsp"/> <forward name="failure" path="/login.jsp"/> </action> </actions> </struts-config> ``` #### 六、总结 本文通过一个具体的示例详细介绍了如何使用AJAX与Servlet进行交互，包括创建`XMLHttpRequest`对象、发送请求、处理响应等步骤。同时，我们也探讨了服务器端如何处理这些请求，并通过Struts框架来组织代码结构。通过这种方式，可以有效地提升Web应用的交互性和用户体验。