AJAX（1）——使用XMLHttpRequest实现Ajax

最新推荐文章于 2025-05-30 13:08:13 发布

原创最新推荐文章于 2025-05-30 13:08:13 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AJAX

AJAX 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了一个使用Java Servlet处理AJAX请求的例子，包括GET和POST两种方式的使用，展示了如何在Servlet中接收并处理前端传来的数据，并将处理结果返回给前端。

效果展示

项目结构

源码

java

AjaxServlet.java

package servlet;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;

public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        // 设置请求的编码
        req.setCharacterEncoding("utf-8");
        // 设置响应的编码
        resp.setContentType("text/html;charset=utf-8");
        // 获取用户名并进行解码
        String username = URLDecoder.decode(req.getParameter("username"), "utf-8");
        // 获取密码并进行解码
        String password = URLDecoder.decode(req.getParameter("password"), "utf-8");
        // 输出
        String str = username + "的密码是 " + password;
        // 控制台输出
        System.out.println(str);
        // 前台响应输出
        PrintWriter out = resp.getWriter();
        out.print(str);
        out.close();
    }
}

web

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"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         version="2.5">
    <!--欢迎页面-->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
    <!--AjaxServlet-->
    <servlet>
        <servlet-name>AjaxServlet</servlet-name>
        <servlet-class>servlet.AjaxServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>AjaxServlet</servlet-name>
        <url-pattern>/ajaxServlet</url-pattern>
    </servlet-mapping>
</web-app>

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
</head>
<body>
<script type="text/javascript" charset="UTF-8">
    var xmlHttp;

    // 创建XMLHttpRequest对象
    function createXMLHttpRequest() {
        if (window.ActiveXObject) {// 判断浏览器是否支持ActiveX控件
            // IE6, IE5 浏览器执行代码
            // 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {// 判断是否把XMLHTTPRequest实现为一个本地javascript对象
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            // 创建XMLHTTPRequest的一个实例（本地javascript对象）
            xmlHttp = new XMLHttpRequest();
        }
    }

    // 组装传送的数据
    function createQueryString() {
        // 获取表单中的用户名文本框的值
        var username = encodeURI(encodeURI(document.getElementById("username").value));
        // 获取表单中的密码文本框的值
        var password = encodeURI(encodeURI(document.getElementById("password").value));
        // 将值进行组装
        var queryString = "username=" + username + "&" + "password=" + password;
        return queryString;
    }

    // 监听函数
    function handleStateChange() {
        // readyState为4表示数据传送完成
        if (xmlHttp.readyState == 4) {
            // status为200表示请求成功
            if (xmlHttp.status == 200) {
                // 解析返回值
                parseResults();
            }
        }
    }

    // 使用GET方式提交
    function sendGet() {
        // 实例XMLHttpRequest对象
        createXMLHttpRequest();
        // 组装传送数据
        var queryString = "ajaxServlet?";
        queryString = queryString + createQueryString() + "&timeStamp=" + new Date().getTime();
        // 转到监听函数
        xmlHttp.onreadystatechange = handleStateChange;
        // 使用GET方式传送数据，提交的数据为queryString，true表示不等待服务器响应继续执行
        xmlHttp.open("GET", queryString, true);
        // 发送请求并且立即返回
        xmlHttp.send(null);
    }

    // 使用POST方式提交
    function sendPost() {
        // 实例XMLHttpRequest对象
        createXMLHttpRequest();
        // 定义传送的参数值字符串
        var url = "ajaxServlet?timeStamp=" + new Date().getTime();
        var queryString = createQueryString();
        // 建立与服务器的请求，使用POST方式
        xmlHttp.open("POST", url, true);
        // 转到监听函数
        xmlHttp.onreadystatechange = handleStateChange;
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
        // 发送请求并立即返回
        xmlHttp.send(queryString);

    }

    // 响应结果
    function parseResults() {
        // 以alert的方式显示结果
        alert(xmlHttp.responseText);
    }
</script>
<form method="post" action="">
    用户名： <input name="username" type="text" id="username"/><br>
    密码： <input name="password" type="password" id="password"/><br>
    <input type="button" value="使用GET方式提交" onclick="sendGet()"/>
    <input type="button" value="使用POST方式提交" onclick="sendPost()"/>
</form>
</body>
</html>