AJax技术

jQuery基礎教程 · 摘要(6)

字号+ 作者:H5之家 来源:H5之家 2018-03-30 16:08 我要评论( )

想添加自定義的速度選項,只要給 $.fx.speeds 添加一個內容即可。比如,執行 $.fx.speeds.crawl = 1200 這行代碼之后,就可以在任何動畫方法中使用 ‘crawl’ 把動畫持續時間設置為1200毫秒: $(someElement) .anim

想添加自定義的速度選項,只要給 $.fx.speeds 添加一個內容即可。比如,執行 $.fx.speeds.crawl = 1200 這行代碼之后,就可以在任何動畫方法中使用 ‘crawl’ 把動畫持續時間設置為1200毫秒:

$(someElement).animate({width: '300px'}, 'crawl');

不過別忘了,使用非 swing 和 linear 的任何緩動函數都需要插件,比如jQuery UI。

三十九、.wrapInner() 方法,這個方法會把一個新元素放到匹配元素的內部,同時包含匹配元素的子元素。

四十、JavaScript內置的 .sort() 方法。這個方法會對數組元素進行就地排序,可以接受一個比較函數作為參數。這個比較函數比較數組中的兩個元素,根據哪個元素應該在排序后的數組中排在前面返回正值或負值。注意到,這個方法在默認情況下是按照字母表順序排序的,升序排列。實際上,對于數值數組還是按照數值大小排序才有意義。為此,可以給 .sort() 方法傳入一個比較函數:

arr.sort((a < b) { return -1; } if (a > b) { return 1; } return 0; });

四十一、JSONP無非就是簡單的JSON加上了服務器支持,讓我們能夠向不同的站點發送請求。在請求JSONP數據時,需要提供一個特殊的查詢字符串參數,發送請求的腳本就是通過該參數來收獲數據的。JSONP服務器可以在認為合適的任何時候調用該參數。

四十二、jqXHR 對象

由于不同請求使用的數據傳輸方式可能不一樣,那我們就需要一個公共的接口與這些通信交互。為此, jqXHR 對象提供了這種接口:在 XMLHttpRequest 對象可用的情況下,封裝該對象的行為;在 XMLHttpRequest 對象不可用的情況下,則盡可能模擬它。這個對象提供給我們的內容和方法包括:

  • 提早中斷通信的 .abort() 。

    jQuery的所有Ajax方法都會返回 jqXHR 對象,只要把這個對象保存起來,隨后就可以方便地使用這些內容和方法。

  • 四十三、Ajax承諾

    與標準的 XMLHttpRequest 對象相比, jqXHR 對象有一點非常值得重視,那就是它也是一個承諾對象。在討論延遲對象時,我們知道可以通過它來設置在某個操作完成后觸發的回調函數。Ajax調用就是這樣一種操作,而 jqXHR 對象提供了延遲對象所承諾的方法。
    使用這些承諾對象的方法,可以重寫 $.ajax() 調用,把 success 和 error 回調函數替換成如下所示,

    $.ajax({ url: 'http://book.learningjquery.com/api/', dataType: 'jsonp', data: { title: $('#title').val() }, timeout: }) .done(response) .fail(function(jqXHR){ $response.html('狀態碼:' + jqXHR.status + '=>' + jqXHR.statusText + ' , ' + failed); }) .always(function(){ $response.removeClass('loading'); });

    乍一看,調用 .done() 和 .fail() 與之前的寫法相比并沒有明顯的好處。可是,這兩個承諾方法的確是有好處的。第一,可以多次調用這兩個方法,根據需要添加多個處理程式。第二,如果把調用 $.ajax() 的結果保存在一個變數中,那么就可以考慮代碼的可讀性,在后面再添加處理程式。第三,如果在添加處理程式的時候Ajax操作已經完成,就會立即調用該處理程式。第四,我們最好采用與jQuery庫中其他代碼一致的文法,這帶來的好處不言而喻。
    使用承諾方法的另一個好處是可以在請求期間添加一個加載指示器,然后在請求完成時或在其他情況下隱藏它。這時候,使用 .always() 方法就非常方便。

    四十四、截流 Ajax 請求

    // 搜索框輸入的時候觸發請求,使用截流來避免多次請求 消除抖動 var searchTimeout, searchDelay = 300; $('#title').on('keyup', function(event){ console.log(event.which); clearTimeout(searchTimeout); searchTimeout = setTimeout(function(){ $ajaxForm.triggerHandler('submit'); }, searchDelay); });

    四十五、定義數據類型轉換器
    要定義一種新的Ajax數據類型,需要給 $.ajaxSetup() 傳遞三個參數: accepts 、 contents和 converters 。其中, accepts 內容會添加發送到服務器的頭部資訊,聲明我們的腳本可以了解的特定MIME類型; contents 內容處理數據交換的另一方,它提供一個與響應的MIME類型進行匹配的正則表達式,以嘗試自動檢測這個元數據當中的數據類型。最后, converters 中包含解析返回數據的函數。

    $.ajaxSetup({ accepts: { yaml: 'application/x-yaml, text/yaml' }, contents: { yaml: /yaml/ }, converters: { 'text yaml': function(textValue) { console.log(textValue); return ''; } } }); $.ajax({ url: 'categories.yml', dataType: 'yaml' });

    四十六、Ajax 預過濾器

    // Ajax 預過濾器 $.ajaxPrefilter((/\.yml$/.test(options.url)) { return 'yaml'; } });

    四十六、JavaScript允許開發人員像傳遞任何類型的數據一樣傳遞函數。也就是說,JavaScript中的內部函數能夠逃脫定義它們的外部函數。
    逃脫的方式有很多種。

    // 1、將內部函數指定給一個全局變數 var globalVar; { console.log('Outer function'); { console.log('Inner function'); } globalVar = innerFn; } console.log('outerFn():'); outerFn(); console.log('globalVar():'); globalVar(); { console.log('Outer function'); { console.log('Inner function'); } return innerFn; } console.log('var fnRef = outerFn():'); var fnRef = outerFn(); console.log('fnRef():'); fnRef(); { var outerVar = 0; { outerVar++; console.log('(1) outerVar = ' + outerVar); } { outerVar += 2; console.log('(2) outerVar = ' + outerVar); } return {'fn1': innerFn1, 'fn2': innerFn2}; } var fnRef = outerFn(); fnRef.fn1(); fnRef.fn2();

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • JAVA AJAX教程第二章-JAVASCRIPT基础知识(2)

      JAVA AJAX教程第二章-JAVASCRIPT基础知识(2)

      2018-03-29 11:00

    • JQuery学习(5-AJAX)

      JQuery学习(5-AJAX)

      2018-03-12 10:10

    • 【JQuery】Ajax

      【JQuery】Ajax

      2018-03-12 08:01

    • JAVA AJAX教程第一章—初识AJAX

      JAVA AJAX教程第一章—初识AJAX

      2018-03-11 11:00

    网友点评