Javascript – Eine schriftliche Testfrage von Ali

Question

Wie man mit Ajax die Antwortzeit aller Anfragen auf der Seite erfasst, ich hoffe auf eine detaillierte Antwort, am besten füge ich den Code bei, danke

Answer 1

首先楼主对于这种情况,jquery和zepto都已经有了各自的实现方式.https://github.com/madrobby/zepto/blob/master/src/ajax.js楼主可以查看

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

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)
  }

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

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)
})

最后所有ajax的请求的时间都会存放到data里面, 其中settings字段很关键,他实质上约等于你调用$.ajax()时候传递的对象(其实内部进行了$.extends,不过在事件触发的时候两个settings是一个对象),所以可以在上面挂载一些额外的字段.

另外还有一些其他的方法,不过也都是类似的,在发请求的时候记录下时间,然后收到的时候再记录下时间,两个相减就OK了.

如果楼主用过axiso等一些新的封装的ajax库,还可以使用拦截器之类的概念来实现这个功能

但是所有的封装再精美,本质都是一样的,就是我上面说的,发送前记录一次时间,响应后再记录一次时间,最后两个相减

Answer 2

原生的原理就是监听readyState的变化了，每当readyState改变时，就会触发onreadystatechange事件，记录1到4之间的时间就是响应时间，然后再发请求回报给服务器即可。

readyState存有 XMLHttpRequest 的状态。从0到4发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪