jpetstore-Spring Boot-AJAX

最新推荐文章于 2020-06-23 23:03:26 发布

原创最新推荐文章于 2020-06-23 23:03:26 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AJAX #jpetstore #JQuery #javascript

jpetstore 专栏收录该内容

8 篇文章

订阅专栏

本文详述了如何在基于Spring Boot的jpetstore应用中添加AJAX功能，分别介绍了使用原生JavaScript和JQuery实现AJAX的步骤，特别是在用户注册和购物车结算环节提升用户体验。原生JavaScript的实现涉及XMLHttpRequest对象的创建和响应处理，而JQuery则简化了代码并解决了浏览器兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在基于Spring Boot集成的jpetstore上添加AJAX功能。注意本博客将对原生的javascript的AJAX以及JQuery的AJAX的写法进行介绍。

AJAX功能：至少在项目的用户注册模块（用户名是否已存在）和购物车模块（购物车结算）两个部分添加AJAX功能，提升用户体验。

当用户输入用户名，光标离开文本框转而去输入其他文本框时，触发AJAX，根据用户输入的用户名，查询数据库，判断该用户名是否可用。

一、原生javascript写法

首先在前端register.html中的输入框编写onblur属性

<input type="text" id="username" name="username" onblur="usernameIsExist()"/>

<div id="usernameMsg"></div>

在该html的body尾部进行javascript文件的导入，这是个好习惯。

JS一定要放在Body的最底部么？

<script type="text/javascript" src="../js/AJAX.js"></script>
<script type="text/javascript" src="../js/register.js"></script>

下面分析下两个js文件的代码。

AJAX.js

var xmlHttpRequest;

function createXMLHttpRequest() {

    if(window.xmlHttpRequest){
        //非IE浏览器
        xmlHttpRequest = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        //IE6以上版本的IE
        xmlHttpRequest = new ActiveXObject("Msxm12.XMLHTTP");
    }else{
        //IE6及以下版本的IE
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
}

XMLHttpRequest

XMLHttpRequest对象是实现AJAX技术的核心技术，是一种支持异步通信的机制。

XMLHttpRequest对象最早是在Microsoft的IE 5中以Active X组件形式实现的。

XMLHttpRequest对象不是W3C中的内容，在不同浏览器上的表现有所不同，不过常用的方法和属性都得到了广泛的支持。

也是由于XMLHttpRequest在不同浏览器上的表现有所不同，故在初始化时需要对不同浏览器进行判断，createXMLHttpRequest()就是如此。

AJAX.js中的代码可以复用，故将其放在一个js文件中。

// 发送请求

function sendRequestUsername(url) {
    createXMLHttpRequest();
    xmlHttpRequest.open("GET",url,true);
    xmlHttpRequest.onreadystatechange = processResponseUsername;
    xmlHttpRequest.send(null);
}

// 判断用户名是否已存在
function usernameIsExist() {

    var username = document.registerForm.username.value;

    sendRequestUsername("/account/usernameIsExist?username=" + username);
}

// 取得回复
function processResponseUsername() {

    if(xmlHttpRequest.readyState == 4){
        if(xmlHttpRequest.status == 200){
            // 获取 xml 文件中的msg 标签
            var responseInfo = xmlHttpRequest.responseXML.
            getElementsByTagName("msg")[0].firstChild.data;

            var div1 = document.getElementById("usernameMsg");

            if(responseInfo =="Exist"){
                div1.innerHTML="<font color='red'>用户名已存在</font>";
            }else{
                div1.innerHTML="<font color='green'>用户名可用</font>";
            }
        }
    }
}

对应的后端需要有接收url请求的控制器代码：AccountController

// AJAX判断用户名是否存在

@GetMapping("/account/usernameIsExist")
public void usernameIsExist(@RequestParam("username") String username, HttpServletResponse response){

    //  为空就不做判断
    if(username.equals("")){
        return;
    }

    Account account = accountService.getAccount(username);
    try{
        response.setContentType("text/xml;charset=utf-8");
        PrintWriter out = response.getWriter();
        response.setHeader("Cache-Control", "no-cache");
        out.println("<?xml version='1.0'encoding='"+"utf-8"+"' ?>");

        if(account != null){
            out.println("<msg>Exist</msg>");
        }else{
            out.println("<msg>NotExist</msg>");
        }
        out.flush();
        out.close();
    }catch (Exception e){
        e.printStackTrace();
    }
}

通过获取url请求中的username查询数据库，判断用户名是否已经存在。然后，利用PrintWriterout和HttpServletResponseresponse对象向前端发送xml数据。注意xml的头部和唯一根标签。

AJAX执行步骤

（1）当用户鼠标光标离开用户名输入框时触发 usernameIsExist() 函数。

（2）该函数获取文本框内的 username的值，并且向目的url请求传参，进入sendRequestUsername(url) 函数。

（3）在sendRequestUsername(url) 函数中，先根据浏览器构造XMLHttpRequest对象。

（4）初始化成功后，xmlHttpRequest.open("GET",url,true);
建立对服务器的调用。method参数表示请求方法，url表示请求的资源。最后的参数true表示是否支持异步通信，默认为true。

在这一步后，将向后端AccountController发送该url请求。在下一步中请求状态改变都会执行，即第五步其实执行了多次。

（5）xmlHttpRequest.onreadystatechange，请求的状态发生改变时会触发这个事件，通常会调用一个JavaScript函数。即每当请求状态readyState和status发生改变时，都会调用processResponseUsername()函数

readyState：表示请求状态的属性，有5个可取的值：0=未初始化，1=正在加载，2=已加载，3=交互中，4=完成。

status：服务器状态码

（6）在processResponseUsername()中，status==200表示请求成功。请求成功后，通过var responseInfo = xmlHttpRequest.responseXML.getElementsByTagName("msg")[0].firstChild.data;
获取xml文件中的标签内容，然后就根据内容给div插入不同的提示语句即可。

二、JQuery写法

在了解了javascript写法的AJAX的主要步骤后，可以并且最好使用JQuery再次对AJAX进行重写，因为JQuery在解决浏览器兼容上处理的很好，这是原生javasciprt所需要解决的问题，并且使用JQuery也省略了很多代码。

使用JQuery重写AJAX，后端代码可以不变，html只需要导入先关Js文件，改动的基本只有js文件。

（1）使用JQuery前需要在html文件尾部导入

<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

<script type="text/javascript" src="../js/JQregister.js"></script>

（2）编写js文件

JQregister.js

function usernameIsExist() {

    var username = document.registerForm.username.value;

    sendRequestUsername(username);
}

function sendRequestUsername(username) {
    $.ajax({
        url:"/account/usernameIsExist?username=" + username,
        type: "get",
        success:function (usernameData) {
            // 获取 xml 文件中的msg 标签
            var responseInfo = usernameData.getElementsByTagName("msg")[0].firstChild.data;

            var div1 = document.getElementById("usernameMsg");

            if(responseInfo =="Exist"){
                div1.innerHTML="<font color='red'>用户名已存在</font>";
            }else{
                div1.innerHTML="<font color='green'>用户名可用</font>";
            }
        },
        error:function () {
            alert("error");
        }
    });
}

现只需要这一个JS文件就可以实现AJAX功能了。现在关注点在 $.ajax({})这个函数体内。使用JQuery就不需要我们手动编写生成XMLHttpRequest对象的代码了。在 $.ajax({}) 该函数体中：

url：表示要向后台请求的url地址

type：表示请求方式，get,post

success：表示请求成功后返回调用的函数，注意该函数带有参数usernameData，该参数即为xml数据，取得xml数据中的内容，其他步骤就和原本的AJAX的操作无异，如对dom操作等。

error：表示请求出现错误后调用的函数。

JQuery版本的AJAX缩减了许多代码，并且很好地解决了浏览器的兼容性。

以上，是对AJAX功能和写法的粗略介绍。