ajax请求返回status = 0表示提交事件,但是对于keyup事件,status = 200

时间:2013-06-28 00:58:09

标签: javascript ajax

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

这是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"
}
]
}

1 个答案:

答案 0 :(得分:3)

您没有停止默认操作。对于keyup事件没有关系,但表单确实已经提交(使用action=""到同一位置,因此您并没有真正注意到它)。离开页面时,runnning ajax请求被中止,您将看到状态码0。

问题是你从ajax回调中调用event.preventDefault(); - 为时已晚,所有与事件相关的操作都已经运行。将其移至addr.search函数的第一行。