【讨论】实时监听input的输入并异步传输交换数据的优化设计

Question

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div>请输入关键字：<input id="keyWords" type="text" /></div>
<div id="getSearch"></div>
<script type="text/javascript">
    var sInput = $('#keyWords'), timer;
    sInput.focus();    sInput.on('input', function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            $('#getSearch').append('<p>' + $('#keyWords').val() + '</p>');
        }, 250);
    });    if (document.all) {
        $('#keyWords').each(function () {
            var that = this;            if (this.attachEvent) {
                this.attachEvent('onpropertychange', function (e) {
                    if (e.propertyName != 'value') return;
                    $(that).trigger('input');
                });
            }
        })
    }
</script>上面的代码主要是监听用户对文本框的输入情况，可应用在各种ajax数据交换的功能上。不过由于服务器的性能不同、客户端的环境不同、客户输入速度的不同，可能会有不同的用户体验，对于数据量较大的网站，当用户输入的结果进行异步请求并返回数据的时间可能会比较长，如果用户输入速度较快，可能会导致数据还未返回又再一次的被提交上去，有时会出现页面假死状态。监听文本框使用setTimeout来延迟程序的执行时间，虽然也是一个不错的办法，但是也会降低一点用户体验，就是感觉返回结果慢了一点。我的想法是监听用户输入完毕再执行代码，不过要如何监听用户是否输入完毕这个就比较难实现了，或者使用xml数据，不过对数据量大的情况还不是很好解决。欢迎大家来讨论怎样才能设计出最佳的代码，拥有最佳的用户体验！能够提供案例最好。inputajax优化监听

Answer 1

都在js里处理还行，每输一个字符就ajax请求这不是个好办法，
想办法看能不能只在js客户端处理

Answer 2

如果用户停顿了并且就想立刻看到帮助信息，那么你的代码就是非常正确的实现。给用户即时列表（Autocomplete），根本不是“在用户输入完毕”时刻的行为，而是用户录入过程“当中”的行为。看不懂这是什么意思。有些人奢谈“xml”这个词儿，这并不比谈论“json”这个词儿高明，这只是普通地传送数据而并不是什么有特定技术含量的事情。所以通常莫名其妙地蹦出一个“xml”的概念的讨论都是无意义的。

Answer 3

帖子的代码只是个例子来的，有说明可以应用ajax数据交换的功能上
timer = setTimeout(function () {
    $.ajax();//实现无刷新服务器数据交换
}, 250);

Answer 4

xml数据量小的时候要比读取数据库快很多吧