javascript - ajax 请求为提交事件返回 status = 0，但为 keyup 事件返回 status=200

Question

我在使用以下 javascript/ajax 代码时遇到问题。该代码搜索一个 JSON 文件，其中只有一些联系人姓名和电子邮件地址。当“keyup”事件调用 addr.search 时，一切都很好，在调用 ajaxCall 属性 request.readyState=4 和 request.Status=200 的函数中，但是当“submit”事件调用相同的搜索时调用相同的地址。搜索功能 request.status 为 0 且失败。
会不会跟form元素中的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

这是html

<!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>

和 JSON 文件:

{
"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"
}
]
}

Answer 1

您没有停止默认操作。这对 keyup 事件无关紧要，但表单确实被提交了(带有 action="" 到相同的位置，所以你并没有真正注意到它)。离开页面时，正在运行的 ajax 请求被中止，您会看到状态代码 0。

问题是您正在从 ajax 回调中调用 event.preventDefault(); - 为时已晚，所有与事件相关的操作都已运行。将它移到 addr.search 函数的第一行。