Servlet3.0与纯javascript通过Ajax交互的实例详解

Servlet 3.0 与纯 JavaScript 通过 Ajax 交互的实例详解

1. Ajax 简介

Asynchronous JavaScript and XML（异步 JavaScript 和 XML），简称 Ajax，是一种创建快速动态网页的技术，在不重新加载整个网页的情况下，实现部分页面的更新。Ajax 是一种使用现代 Web 技术的方法，能够更快地将数据传输给客户端，缩短了响应时间。

2. Servlet 3.0 简介

Servlet 是在服务端运行的小程序，可以动态地处理客户端请求和响应。Servlet 属于 Java Web 技术栈的一部分，常用来开发 Web 应用程序。Servlet3.0 是 Servlet 规范的最新版，新增了很多特性，包括异步 Servlet 支持。

3. Servlet3.0 与 JavaScript Ajax 结合的步骤

3.1 新建项目及配置 web.xml 文件

在 IDE 中新建 Java Web 项目，然后在 web.xml 文件中添加 Servlet3.0 的支持，具体内容如下：

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"  
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee   
    http://xmlns.jcp.org/xml/ns/javaee/web-app_3_0.xsd"  
    version="3.0"> 
    <!-- servlet 3.0 的支持 -->
</web-app>

3.2 编写 Servlet3.0

在项目中创建一个 Servlet 类，随便给它起个名字，然后添加 @WebServlet 注解，这个注解是 Servlet3.0 中新增的，用来标记 Servlet 类。具体代码如下：

@WebServlet("/user") 
public class UserServlet extends HttpServlet { 
    // 处理 GET 请求 
    public void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException { 
        // 处理请求 
    } 
    // 处理 POST 请求 
    public void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException { 
        // 处理请求 
    } 
} 

3.3 使用 JavaScript Ajax 向 Servlet 发送请求

var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else {
    // 兼容 IE5 和 IE6 
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // 处理响应
    }
}
xmlhttp.open("POST", "user", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name=xiaoming&age=20");

4. 示例说明

4.1 查询用户信息

在项目中创建一个 Servlet，处理 GET 请求，获取请求参数，查询数据库，返回结果。然后在前端使用 Ajax 向 Servlet 发送请求，接收返回结果并处理。

Servlet 代码：

@WebServlet("/user") 
public class UserServlet extends HttpServlet { 
    public void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException { 
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        String result = queryUserInfo(name, age);
        response.getWriter().write(result);
    } 

    private String queryUserInfo(String name, String age) {
        // 查询数据库...
        return "Name: " + name + "Age: " + age;
    }
}

JavaScript 代码：

function getUserInfo() {
    var name = document.getElementById("name").value;
    var age = parseInt(document.getElementById("age").value);
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        // 兼容 IE5 和 IE6 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("result").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "user?name="+name+"&age="+age, true);
    xmlhttp.send();
}

4.2 更新用户信息

在项目中创建一个 Servlet，处理 POST 请求，获取请求参数，更新数据库，返回结果。然后在前端使用 Ajax 向 Servlet 发送请求，接收返回结果并处理。

Servlet 代码：

@WebServlet("/user") 
public class UserServlet extends HttpServlet { 
    public void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException { 
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        updateUserInfo(name, age);
        response.getWriter().write("Success!");
    } 

    private void updateUserInfo(String name, String age) {
        // 更新数据库...
    }
}

JavaScript 代码：

function updateUserInfo() {
    var name = document.getElementById("name").value;
    var age = parseInt(document.getElementById("age").value);
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        // 兼容 IE5 和 IE6 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
        }
    }
    xmlhttp.open("POST", "user", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("name="+name+"&age="+age);
}

以上就是 Servlet3.0 与纯 JavaScript 通过 Ajax 交互的详细攻略。