新建一个文件 .js

//创建异步对象
function createXMLHttpRequest() {
    try {
        return new XMLHttpRequest();
    } catch (e) {
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alter("请更换浏览器！")
                throw e;
            }
        }
    }
}
    /*
    option对象有以下属性：
        请求方式 -- method,
        请求的url -- url,
        是否异步 -- asyn,
        请求体 -- params,
        回调方法 -- callback,
        服务器响应数据转换为什么类型 -- type
    */
function ajax(option) {
    // 得到异步对象
    var xp = createXMLHttpRequest();
    
    if(!option.method){    // 默认get
        option.method = "GET";
    }
    if(option.asyn == undefined){// 默认为异步
        option.asyn = true;
    }
    // 打开连接
    xp.open(option.method, option.url, option.asyn);
    
    if ("POST" == option.method) {
        xp.setRequestHeader("Content-Type", "application/x-www-form-uelencoded");
    }
    xp.send(option.params);
    // 注册监听
    xp.onreadystatechange = function() {
        // 状态的双重判断
        if (xp.readyState == 4 && xp.status == 200) {
            var data;
            // 获取服务器的响应数据，进行转换
            if(!option.type){    // type没有给出就默认为文本
                data = xp.responseText;
            }else if (option.type == "xml") {
                data = xp.responseXML;
            } else if (option.type == "text") {
                data = xp.responseText;
            } else if (option.type == "json") {
                var text = xp.responseText;
                data = new Function('return' + text)();
            }
            // 回调方法
            option.callback(data);
        }
    };
};

将异步对象的创建、请求、数据获取和转换都写入js文件中。

使用此js文件：

这里仅输入json格式数据。

新建一个工程JsonPro - 新建一个servlet文件JServlet.java- 新建一个JSP文件Japp1.jsp (注意将js文件和jsp文件放在同一个文件夹下):

import java.io.IOException
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")
@WebServlet("/JServlet")
public class JServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String s = "{\"name\":\"zhangsan\", \"age\":18 , \"sex\":\"nan\"}";
        response.getWriter().print(s);
        System.out.print(s);
    }
}

JSP:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="ajaxUtils.js"></script>
<script>
window.onload = function (){
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        ajax(
                {
                    url:"/JsonPro/JServlet",
                    type:"json",
                    callback:function(data)
                    {
                        document.getElementById("h3").innerHTML = data.name + "、" + data.age + "、" + data.sex;
                    }
                }
                )
    };
};
</script>

</head>

<body>
    <button id="btn">点击点击</button>
    <h1>显示小工具</h1>
    <h3 id="h3"></h3>
</body>
</html>