Java Web中Ajax技术使用方法介绍

JavaWeb中Ajax技术使用方法介绍

什么是Ajax

Ajax全称为Asynchronous JavaScript and XML，即异步的JavaScript和XML。

在Java Web中，Ajax可以让前端页面异步地向后台Java Servlet/Controller发送请求，获取响应数据，更新页面的部分内容，从而提升用户交互的体验。

使用Ajax

1. 引入 Ajax 相关的 JavaScript 库

在头部引入jquery.min.js 和 jquery.md5.js两个文件。

<script type="text/javascript" src="${rootPath}/static/js/jquery.min.js"></script>
<script type="text/javascript" src="${rootPath}/static/js/jquery.md5.js"></script>

在${rootPath}中填入工程的相对路径。

2. 发送AJAX请求

使用jQuery的ajax()方法向后台发送ajax请求：

function sendAjaxReq() {
    $.ajax({
        type: "POST", // HTTP请求类型为POST
        url: "${rootPath}/ajax", // 请求url
        data: { // 请求参数
            name: 'Jack',
            age: 19
        },
        dataType: "json", // 从服务器返回的结果是什么数据类型
        success: function (response) { // 回调函数，处理请求成功后的结果
            console.log(response);
        },
        error: function (response) { //  请求失败时的回调函数
            console.log(response);
        }
    });
}

上述代码的解释：

• 请求类型为POST方式
• 请求url是${rootPath}/ajax，表示向本工程的ajaxServlet发送请求
• 请求参数为一个Json对象{name: 'Jack', age: 19}
• 从服务器返回的结果是json类型的数据
• 成功获取到响应后触发回调函数，回调函数的参数是响应结果对象
• 请求失败时触发error回调函数，回调函数的参数是响应结果对象

3. 接收Ajax请求

在Java Servlet或Controller中使用@ResponseBody注解将Java对象转换成JSon格式返回：

@RequestMapping("/ajax")
@ResponseBody
public String ajax(HttpServletRequest request, HttpServletResponse response) {
    String name = request.getParameter("name");
    int age = Integer.parseInt(request.getParameter("age"));

    Map<String, Object> resultMap = new HashMap<>();
    resultMap.put("name", name);
    resultMap.put("age", age);
    resultMap.put("hobby", "swimming");
    String result = new Gson().toJson(resultMap);

    return result;
}

上述代码的解释：

• url为@RequestMapping(value = "/ajax")，表示接收/ajax请求
• 使用@ResponseBody注解将Map对象转换成json字符串返回

示例说明

示例1：表单验证

对表单提交进行Ajax验证，当表单输入有误时在相应位置显示错误信息。

$("#registerForm").submit(function() {

    if (!isUserNameValid($("#username").val())) {
        showErrorMessage("#username", "用户名长度应为4-16位字母数字");
        return false;
    }
    if (!isPasswdValid($("#password").val())) {
        showErrorMessage("#password", "密码长度应为6-16位字母数字特殊字符");
        return false;
    }
    if ($("#password").val() != ($("#password2").val())) {
        showErrorMessage("#password2", "两次密码输入不一致");
        return false;
    }

    $.ajax({
        type: "POST",
        url: "${rootPath}/register",
        data: {
            username: $("#username").val(),
            password: $.md5($("#password").val()),
            email: $("#email").val()
        },
        dataType: "json",
        success: function (response) {
            if (response.success == true) {
                //跳转到成功页面
            } else {
                if (response.reason == 1) {
                    showErrorMessage("#username", "用户名已存在");
                } else if (response.reason == 2) {
                    showErrorMessage("#email", "邮箱已被注册");
                } else {
                    showErrorMessage(".register-form>button", "注册失败，请稍后再试");
                }
            }
        },
        error: function () {
            showErrorMessage(".register-form>button", "发生未知错误，请稍后再试");
        }
    });

    return false;
});

上述的代码对一个id为#registerForm的表单进行提交验证，将表单的值以jQuery的ajax()方法发送给后台的/register处理。

示例2：通讯录的增删改查

function getContacts() {
    $.ajax({
        type: "POST",
        url: "${rootPath}/contacts",
        dataType: "json",
        success: function (response) {
            if (response.success == true) {
                renderContacts(response.data);
            } else {
                alert("发生错误，请稍后重试！");
            }
        },
        error: function () {
            alert("发生系统错误，请稍后再试！");
        }
    });
}

function addContact() {
    var name = $("#name").val();
    var phone = $("#phone").val();

    $.ajax({
        type: "POST",
        url: "${rootPath}/contact/add",
        dataType: "json",
        data: {
            name: name,
            phone: phone
        },
        success: function (response) {
            if (response.success == true) {
                alert("添加成功！");
            } else {
                alert("发生错误，请稍后重试！");
            }
        },
        error: function () {
            alert("发生系统错误，请稍后再试！");
        }
    });
}

function deleteContact(id) {
    $.ajax({
        type: "POST",
        url: "${rootPath}/contact/delete",
        dataType: "json",
        data: {
            id: id
        },
        success: function (response) {
            if (response.success == true) {
                alert("删除成功！");
                getContacts();
            } else {
                alert("发生错误，请稍后重试！");
            }
        },
        error: function () {
            alert("发生系统错误，请稍后再试！");
        }
    });
}

function modifyContact(id) {
    var name = $("#" + id + " .name").val();
    var phone = $("#" + id + " .phone").val();

    $.ajax({
        type: "POST",
        url: "${rootPath}/contact/modify",
        dataType: "json",
        data: {
            id: id,
            name: name,
            phone: phone
        },
        success: function (response) {
            if (response.success == true) {
                alert("修改成功！");
            } else {
                alert("发生错误，请稍后重试！");
            }
        },
        error: function () {
            alert("发生系统错误，请稍后再试！");
        }
    });
}

上面代码对一个通讯录进行增删改查操作。其中getContacts函数用于向服务器获取通讯录列表，addContact浏览器发送“添加联系人”的请求，deleteContact用于删除指定联系人，modifyContact用于修改指定联系人。