javascript - Soalan ujian bertulis daripada Ali

Question

Cara menggunakan ajax untuk mengumpul masa tindak balas semua permintaan di halaman, saya harap mendapat jawapan terperinci, sebaiknya lampirkan kod, terima kasih

Answer 1

Pertama sekali, untuk situasi ini, jquery dan zepto sudah mempunyai kaedah pelaksanaan mereka sendiri https://github.com/madrobby/zepto/blob/master/src/ajax.js Poster boleh menyemaknya

.

Terdapat beberapa cangkuk dalam kod sumber: ajaxStart, ajaxStop, ajaxBeforeSend, ajaxError, ajaxComplete Pengarang mengamati cangkuk ini dengan teliti Ia mewakili detik pelaksanaan ajax yang berbeza Dalam fungsi ini, kaedah triggerGlobal akan dipanggil

function triggerAndReturn(context, eventName, data) {
    var event = $.Event(eventName)
    $(context).trigger(event, data)
    return !event.isDefaultPrevented()
  }

  // trigger an Ajax "global" event
  function triggerGlobal(settings, context, eventName, data) {
    if (settings.global) return triggerAndReturn(context || document, eventName, data)
  }

ajaxStart,ajaxStop,ajaxBeforeSend,ajaxError,ajaxComplete楼主仔细观察这些钩子,他们代表了ajax执行的不同时刻,在这些函数中都会调用一个方法triggerGlobal,这个方法就是关键

var data = {} // 储存数据
var id = 1 // 唯一id
$(document).on('ajaxBeforeSend', (data) => {
    let settings = data[1]
    let uniqId = 'ajax' + id // 生成一个唯一id
    settings.uniqId = id //把唯一id挂载在setting上面,当ajax结束后能够找到
    data[uniqId] = Date.now() // 用这个唯一id存数据
    id++ // id需要自增来记录并区别后续的ajax请求
})
$(document).on('ajaxComplete', (data) => {
    let settings = data[1]
    let uniqId = 'ajax' + settings.uniqId // 找到ajax刚启动时候挂载的uniqId字段
    data[uniqId] = Date.now() - data[uniqId] // 当前时间减去发送这条ajax的时间就是响应请求所需要的时间了
    console.log(data)
})

这个方法的作用就是在于在document上面注册一个自定义事件,每当钩子触发的时候,如果发现之前有在document上面注册过相应的事件的时候则会触发相应的状态,此时我们需要做的是在发送ajax前绑定事件,为每一个ajax添加一个唯一标识符,然后获取时间就完成了.

rrreee

最后所有ajax的请求的时间都会存放到data里面, 其中settingsFungsi kaedah ini adalah untuk mendaftarkan acara tersuai pada dokumen Setiap kali cangkuk dicetuskan, jika didapati peristiwa yang sepadan telah didaftarkan pada dokumen sebelum ini, keadaan yang sepadan akan dicetuskan pada masa ini yang perlu kita lakukan ialah untuk mengikat acara sebelum menghantar ajax, menambah pengecam unik pada setiap ajax, dan kemudian dapatkan masa

rrreee

Akhirnya, masa semua permintaan ajax akan disimpan dalam data Medan settings adalah sangat kritikal. $. dilanjutkan, tetapi apabila peristiwa dicetuskan, kedua-dua tetapan adalah satu objek), jadi beberapa medan tambahan boleh dipasang padanya.

Ada juga beberapa kaedah lain, tetapi semuanya serupa Catatkan masa semasa menghantar permintaan, dan kemudian catatkan masa apabila menerimanya dan ia akan menjadi OK

Jika poster telah menggunakan beberapa perpustakaan ajax terkapsul baharu seperti axiso, anda juga boleh menggunakan konsep seperti pemintas untuk melaksanakan fungsi ini

Walau bagaimanapun, tidak kira betapa indahnya pembungkusan, intipatinya adalah sama, iaitu apa yang saya katakan di atas Catat masa sebelum menghantar, catat masa semula selepas membalas, dan tolak dua yang terakhir

Answer 2

Prinsip asal adalah untuk memantau perubahan dalam readyState Setiap kali readyState berubah, peristiwa onreadystatechange akan dicetuskan Masa antara 1 dan 4 direkodkan sebagai masa tindak balas, dan kemudian permintaan dihantar semula ke pelayan.

readyState menyimpan status XMLHttpRequest. berubah dari 0 hingga 4.
0: Permintaan tidak dimulakan
1: Sambungan pelayan telah diwujudkan
2: Permintaan telah diterima
3: Permintaan sedang diproses
4: Permintaan telah dilengkapkan dan respons sudah sedia