ajax请求被终止,为什么Ajax请求被中止？

我想将Ajax请求发送到服务器并获取HTML文本。我发现服务器成功接收了请求并可以使用DB，但是Ajax请求在某些时候被中止并且无法加载数据。我不知道会发生什么..

JS

const listGroup = document.getElementById("list-group");

function sendData() {

const form = document.getElementById("create-memo-form");

const formData = new FormData(form);

const XHR = new XMLHttpRequest();

let urlEncodedData;

const urlEncodedDataPairs = [];

for(let pair of formData) {

urlEncodedDataPairs.push(encodeURIComponent(pair[0]) + '=' + encodeURIComponent(pair[1]));

}

urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');

XHR.addEventListener('loadstart', function() {

console.log("loadstart");

});

XHR.addEventListener('load', function() {

console.log("load");

});

XHR.addEventListener('loadend', function() {

console.log("loadend");

});

XHR.addEventListener('progress', function() {

console.log("progress");

});

XHR.addEventListener('error', function() {

console.log("error");

});

XHR.addEventListener('abort', function() {

console.log("abort");

});

XHR.onreadystatechange = function() {

console.log(XHR.readyState + ' ' + XHR.status);

if(XHR.readyState === XMLHttpRequest.DONE) {

console.log(XHR.getAllResponseHeaders());

}

if (XHR.readyState === XMLHttpRequest.DONE && XHR.status === 200 ) {

console.log(XHR.responseText);

//listGroup.removeChild(listGroup.childNodes[0]);

//listGroup.innerHTML = XHR.responseText + listGroup.innerHTML;

}

};

XHR.open('POST', 'create-memo');

XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

XHR.send(urlEncodedData);

}

createMemoForm.jsp

Write

createMemoSuccess.jsp

${createdMemo.content}

Delete

${createdMemo.priorityString}

${createdMemo.deadline}

控制器

@RequestMapping("/create-memo")

public String createMemo(Model model, @ModelAttribute("newMemo") Memo newMemo, BindingResult bindingResult, HttpSession session) {

System.out.println("inside createMemo method");

Member currentMember = (Member) session.getAttribute("currentMember");

newMemo.setMemberId(currentMember.getId());

if(memoService.addMemo(newMemo)) {

model.addAttribute("newMemo", new Memo());

model.addAttribute("createdMemo", newMemo);

System.out.println("A");

return "createMemoSuccess";

} else {

bindingResult.reject("create-memo-failure", "Failed to write");

System.out.println("B");

return "createMemoForm";

}

}

Firefox控制台打印以下行：

2 0

4 0

abort

loadend