中止取消ajax請求,IE7下的bug解決

來源:互聯網
上載者:User

最近做了一個基於文字框智能提示的效果,效果大致如下

當我每輸入一個字元,通過ajax請求並返回匹配的結果。輸入第一個字元時,ajax的請求已經開始,輸入第二字元時又一個ajax請求,這樣的話,使用者輸入十個字元就需要ajax請求十次,這裡我需要一個特殊的要求,輸入第二個字元的時候把輸入第一個字元時的ajax請求中止或者取消(當然前提是兩次輸入的時間間隔很短),後一個ajax請求開始時把之前的一個ajax請求中止或取消。

 var ajaxResult = null;
            jQuery("#Keywords").keyup(function () {
                jQuery(".SmartTips").hide();
                if (jQuery(this).val() != "") {
                    jQuery("#SmartTips li").children().remove();
                    var url = "/Product/SearchSmartTips.aspx";
                    var data = { keyword: jQuery(this).val(), randNum: getDateNum() };
                    if (ajaxResult != null) {
                       ajaxResult.abort();
                    }
                    ajaxResult = jQuery.get(url, data, function (redata) {
                        jQuery("#SmartTips").children().remove();
                        redata = eval("(" + redata + ")");
                        if (redata.length > 0) {
                            jQuery(".SmartTips").show();
                        }
                        for (var i = 0; i < redata.length; i++) {
                            jQuery("#SmartTips").append("<li onclick=\"getKeyword('" + redata[i].Keyword + "'," + redata[i].Num + "," + redata[i].Pid + ");\" >" + redata[i].Keyword + "</li>");
                        }
                        jQuery("#SmartTips").append("<li style=\"text-align:right;\"  onclick=\"closeSmartTips()\">Close</li>");
                        jQuery("#SmartTips li").hover(function () {
                            jQuery(this).addClass("hover");
                        }, function () {
                            jQuery(this).removeClass("hover");
                        });
                    });
                }
            });

文字框中的輸入一字元,判斷ajaxResult這個XmlHttpRequest對象是否為null,不等於null就通過ajaxResult.abort();的abort()方法來中止請求。核心代碼如下

 var ajaxResult = null;  
 if (ajaxResult != null) {
   ajaxResult.abort();
 }
 ajaxResult = jQuery.get(url, data, function (redata) {
                       
 });

但是,IE7下,abort()方法有個bug.不支援abort()方法,會提示 “SCRIPT445: 對象不支援此操作 ”,使用jquery 1.42或者之下的版本都有這個問題,可以把jquery中的

try {
  var oldAbort = xhr.abort;
  xhr.abort = function() {
    if ( xhr) {
      oldAbort.call( xhr );
    }
    onreadystatechange( "abort" );
  };
} catch(e) { }
//把jquery檔案中上面部分的代碼替換成下面的代碼
try {
  var oldAbort = xhr.abort;
  xhr.abort = function() {
    if ( xhr) {
      if (oldAbort.call === undefined) {
        oldAbort();
      } else {
        oldAbort.call( xhr );
      }
    }
    onreadystatechange( "abort" );
  };
} catch(e) { }

具體的更多解決方式討論請進入http://forum.jquery.com/topic/object-doesn-t-support-this-property-or-method-from-jquery-1-4-1-in-ie7-only.

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.