Javascript 对于提交事件，ajax请求返回status=0，但对于keyup事件，则返回status=200

我对下面的javascript/ajax代码有问题。代码搜索一个JSON文件，其中只包含一些联系人姓名和电子邮件地址。当“keyup”事件调用addr.search时，一切正常，在对ajax的函数调用中调用attributes request.readyState=4，request.Status=200，但当“submit”事件调用调用相同的搜索调用相同的addr.search函数时，request.Status为0，并且失败。
是否可能与表单元素中的action属性有关？
我应该补充一点，我正在WAMP服务器上运行这个

/* standard Ajax xhr function */

function getHTTPObject() {

var xhr;

if (window.XMLHttpRequest) { // check for support

    // if it's supported, use it 
    xhr = new XMLHttpRequest();

} else if (window.ActiveXObject) { // check for the IE 6 Ajax

    // save it to the xhr variable
    xhr = new ActiveXObject("Msxml2.XMLHTTP");

}

// spit out the correct one so we can use it
return xhr;
}

/* define the Ajax call */

function ajaxCall(dataUrl, outputElement, callback) {

/* use our function to get the correct Ajax object based on support */
var request = getHTTPObject();

outputElement.innerHTML = "Loading";

request.onreadystatechange = function() {

    // check to see if the Ajax call went through
    if ( request.readyState === 4 && request.status === 200 ) {

        // save the ajax response to a variable
        var contacts = JSON.parse(request.responseText);

        // make sure the callback is indeed a function before executing it
        if(typeof callback === "function"){

            callback(contacts);

        } // end check

    } // end ajax status check

} // end onreadystatechange

request.open("GET", dataUrl, true);
request.send(null);

}

/* wrap everything in an anonymous function to contain the variables */

(function(){

/* define the DOM elements and common variables you'll need */
var searchForm = document.getElementById("search-form"),
    searchField = document.getElementById("q"),
    getAllButton = document.getElementById("get-all"),
    target = document.getElementById("output");

/* define address book methods */
var addr = {

    search : function(event){

        // set the output element
        var output = document.getElementById("output");

         ajaxCall('data/contacts.json', output, function (data) {

            // save the input value, contacts length and i to variables
            var searchValue = searchField.value,
                addrBook = data.addressBook,
                count = addrBook.length,
                i;

            // stop the default behavior
            event.preventDefault();

            // clear the target area just incase there's something in it.
            target.innerHTML = "";

            // check the count, of course
            if(count > 0 && searchValue !== ""){

                // loop through the contacts
                for(i = 0; i < count; i = i + 1) {

                    // look through the name value to see if it contains the searchterm string
                    var obj = addrBook[i],
                        isItFound = obj.name.indexOf(searchValue);

                    // anything other than -1 means we found a match
                    if(isItFound !== -1) {
                        target.innerHTML += '<p>' + obj.name + ', <a href="mailto:' + obj.email + '">'+ obj.email +'</a><p>';
                    } // end if

                } // end for loop

            } // end count check

        }); // end ajax call

    },
    getAllContacts : function () {

        // set the output element
        var output = document.getElementById("output");

        // start Ajax call
        ajaxCall('data/contacts.json', output, function (data) {

            var addrBook = data.addressBook,
                count = addrBook.length,
                i;

            // clear the target area just incase there's something in it.
            target.innerHTML = "";

            // check the count, of course
            if(count > 0) {

                // loop through the contacts
                for(i = 0; i < count; i = i + 1) {

                    // look through the name value to see if it contains the searchterm string
                    var obj = addrBook[i];

                    target.innerHTML += '<p>' + obj.name + ', <a href="mailto:' + obj.email + '">'+ obj.email +'</a><p>';

                } // end for loop
            } // end count check

        }); // end ajax call
    },
    setActiveSection : function() {

        // add a class of "active" the wrapping div
        this.parentNode.setAttribute("class", "active");

    },
    removeActiveSection : function() {

        // remove the class from the wrapping div
        this.parentNode.removeAttribute("class");

    },
    addHoverClass : function() {

        // remove the class from the wrapping div
        searchForm.setAttribute("class", "hovering");

    },
    removeHoverClass : function(){

        // remove the class from the wrapping div
        searchForm.removeAttribute("class");

    }

} // end addr object

// activate auto complete on keyUp
searchField.addEventListener("keyup", addr.search, false);

// set active section on focus of the form field
searchField.addEventListener("focus", addr.setActiveSection, false);

// remove active section on blur of the form field
searchField.addEventListener("blur", addr.removeActiveSection, false);

// get all contacts when you click the button
getAllButton.addEventListener("click", addr.getAllContacts, false);

// add hover class on mouse over of the form field
searchForm.addEventListener("mouseover", addr.addHoverClass, false);

 // remove hover class on mouse out of the form field
searchForm.addEventListener("mouseout", addr.removeHoverClass, false);

// activate search on form submit
searchForm.addEventListener("submit", addr.search, false);


})(); // end anonymous function

---

您没有停止默认操作。这对于keyup事件并不重要，但是表单确实会被提交（使用

action=“

提交到相同的位置，因此您不会真正注意到它）。离开页面时，正在运行的ajax请求被中止，您会看到状态代码0

---

问题是您正在调用

event.preventDefault（）来自ajax回调-太晚了，所有与事件相关的操作都已经运行。将其移动到
addr.search
函数的第一行。
谢谢您的帮助。你真棒，我已经盯着这个看了好几个小时了。你真的一次又一次地在键盘上加载同一个文件吗？您应该只做一次，然后重用存储的数据。是的，那会更好。我将此作为学习Ajax的练习，因此我感谢您的观察。
<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>Address Book Application</title>
<style>
    .active { background:#ddd; }
    .hovering { background:#eee; }
    form > div { padding:10px; }
</style>

</head>
<body>

<h1>Address Book</h1>

<form action="" method="get" id="search-form">

<div>
    <label for="q">Search address book</label>
    <input type="search" id="q" name="q" required placeholder="type a name" autocomplete="off">
</div>

<div class="button-group">
    <button type="submit" id="search-btn">search</button>
    <button type="button" id="get-all">get all contacts</button>
</div><!--/.button-group-->

</form>
<div id="output" aria-atomic="true" aria-live="polite"></div><!--/#output-->

<script src="js/addressbook.js"></script>

</body>
</html>

{
"addressBook" : [
{
    "name": "hillisha",
    "email": "hill@example.com"
},
{
    "name": "paul",
    "email": "cleveland@example.com"
},
{
    "name": "vishaal",
    "email": "vish@example.com"
},
{
    "name": "mike",
    "email": "grady@example.com"
},
{
    "name": "jamie",
    "email": "dusted@example.com"
},
{
    "name": "gini",
    "email": "g@example.com"
},
{
    "name": "kristen",
    "email": "marv@example.com"
},
{
    "name": "starlen",
    "email": "stars@example.com"
},
{
    "name": "archie",
    "email": "ie@example.com"
},
{
    "name": "bill",
    "email": "hickey@example.com"
}
]
}