Javascript 方法发布，状态（已取消）错误消息

我有以下代码，它给了我一条

方法POST，状态（已取消）

错误消息：

$(document).ready(function() {
    var xhr = false;

    get_default();

    $('#txt1').keyup( function() {
        if(xhr && xhr.readyState != 4){
            alert("abort");
            xhr.abort();
        }

        if ($("#txt1").val().length >= 2) {
            get_data( $("#txt1").val() );
        } else {
            get_default();
        }
    });

    function get_data( phrase ) {
        xhr = $.ajax({
            type: 'POST',
            url: 'http://intranet/webservices.asmx/GetData',
            data: '{phrase: "' + phrase + '"}',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function( results ) {
                $("#div1").empty();

                if( results.d[0] ) {
                    $.each( results.d, function( index, result ) {
                        $("#div1").append( result.Col1 + ' ' + result.Col2 + '<br />' );
                    });
                } else {
                    alert( "no data available message goes here" );
                }
            },
            error: function(xhr, status, error) {
                 var err = eval("(" + xhr.responseText + ")");
                 alert(err.Message) ;
            }
        });
    }

    function get_default() {
        $('#div1').empty().append("default content goes here.");
    }

});

$（文档）.ready（函数（）{
var xhr=false；
获取默认值（）；
$（'#txt1'）.keyup（函数（）{
if（xhr&&xhr.readyState！=4）{
警报（“中止”）；
xhr.abort（）；
}
如果（$（“#txt1”）.val（）.length>=2）{
获取_数据（$（“#txt1”）.val（））；
}否则{
获取默认值（）；
}
});
函数获取数据（短语）{
xhr=$.ajax({
键入：“POST”，
网址：'http://intranet/webservices.asmx/GetData',
数据：“{短语：“+短语+”}”，
contentType:'application/json；charset=utf-8'，
数据类型：“json”，
成功：功能（结果）{
$（“#div1”）.empty（）；
if（results.d[0]）{
$.each（results.d，function）（索引，结果）{
$（“#div1”）.append（result.Col1+''+result.Col2+'
）；
});
}否则{
警报（“此处无可用数据消息”）；
}
},
错误：函数（xhr、状态、错误）{
var err=eval（“+xhr.responseText+”）；
警报（错误消息）；
}
});
}
函数get_default（）{
$（'#div1'）.empty（）.append（“此处为默认内容”）；
}
});

只要每个ajax请求完成，代码实际上就可以工作，但是如果我快速键入

txt1

，即在前一个请求完成之前键入下一个字符，我就会收到错误消息

Method POST，Status（cancelled）

---

有人知道为什么会发生这种情况以及如何更正错误吗？

这是因为您正在调用

abort

方法，该方法可能会触发带有适当错误消息的错误处理程序

---

在进行下一次调用之前，您可以等待上一个ajax请求完成。

ajax是一种异步类型，不建议您在每个keyup事件上发送请求，请尝试

async: false

---

在post方法中。。。它将暂停后续的帖子，直到当前请求完成回调

您使用的是

keyup

事件，这似乎是问题所在

如果有任何问题的话，您需要在键入一个字符后等待，然后才能采取行动

---

更好的解决方案可能是遵循与JQuery自动完成组件相同的策略，我认为问题非常简单。如果调用

xhr.abort（）

然后，

$的
错误
回调。对于挂起的请求，将调用ajax

。因此，您应该忽略

error

回调中的这种情况。因此可以将

错误处理程序修改为

error: function(jqXHR, textStatus, errorThrown) {
    var err;
    if (textStatus !== "abort" && errorThrown !== "abort") {
        try {
            err = $.parseJSON(jqXHR.responseText);
            alert(err.Message);
        } catch(e) {
            alert("ERROR:\n" + jqXHR.responseText);
        }
    }
    // aborted requests should be just ignored and no error message be displayed
}

另外，您可能还对另一个关于关闭问题的问题感兴趣。
实际上，您需要一个setTimeout方法，以防止触发冗余的ajax调用

clearTimeout(timer);

if($("#txt1").val().length >= 2){
    timer = setTimeout(function(){
        get_data($("#txt1").val());
    }, 400);
}else{
    get_default();
}

这将消除您的问题。
为了解决您的问题并节省Ajax调用量，我编写了以下示例。此示例允许您处理以下两种情况：

情景1:

The user types slow enough (lets say about one key every 200+ miliseconds

The user types fast (my average is about 20 to 50 miliseconds per key)

情景2:

The user types slow enough (lets say about one key every 200+ miliseconds

The user types fast (my average is about 20 to 50 miliseconds per key)

在下面的示例中，不需要中止或忽略Ajax调用，您不是滥发Ajax调用，而是使用对象来处理作业。（我甚至为你准备好了）

var处理程序={
/**
*距离上次事件的时间（毫秒）
*/
lastEvent:0，
/**
*最后一次击键必须至少为毫秒
*允许我们的ajax调用运行
*/
冷却时间：200，
/**
*这是我们的计时器
*/
计时器：空，
/**
*这应该在触发keyup事件时运行
*/
up：功能（事件）
{
var d=新日期（），
now=d.getTime（）；
if（（现在-Handler.lastEvent）

希望这能有所帮助。
这可能有用，请看一看，Oleg可能在这里给出了最好的答案。他的修正应该能帮助你进一步理解剧本。但是：在阅读代码时，我发现您并没有为这个问题创建理想的代码。我将为您创建一个答案。如果需要启动另一个尚未完成的进程，我应该如何中止该进程？使用
async:false
是不可取的，因为它将停止浏览器，直到请求完成并响应。我同意。使用此解决方案，您可以在键入内容时完全消除动态添加内容的可能性。这个答案为什么没有用处？