欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

javascript - AJAX是怎么样实现异步的呢?

程序员文章站 2022-04-26 11:41:22
...
AJAX的方法源码我看过,就是AJAX方法里面调用一个回调,先执行AJAX方法再执行回调,这跟普通的的引用函数 有什么区别呢?那么AJAX的异步回调在体验在哪里;

回复内容:

AJAX的方法源码我看过,就是AJAX方法里面调用一个回调,先执行AJAX方法再执行回调,这跟普通的的引用函数 有什么区别呢?那么AJAX的异步回调在体验在哪里;

上面几位真是所答非所问。
首先浏览器的js引擎是单线程的,执行一个耗时操作必定阻碍线程后续代码的执行(比如等待网络请求的响应)。一些语言采用了开一个子线程并把耗时操作放到子线程去执行的办法解决了这个问题。
js引擎本身不支持多线程,但是浏览器基本上都有三个线程:js引擎线程、事件触发线程、http请求线程。后两个线程在触发后会把对应的回调函数放到js引擎线程的执行队列中进行排队等待,只要js引擎线程空闲就会依次执行加入到队列中的回调函数。当然这些回调函数的执行依然是阻碍线程的。

页面无刷新进行数据请求,返回数据通过js操作DOM,用户体验良好;单纯调用js函数仅对前端有操作,没有与服务器的交互;AJAX是组合技术,提升用户体验,不必每次请求都刷新整个页面,即js操作dom进行局部刷新

在我看来本质上没有区别,一个传入函数,一个是类似面向对象中我多态覆盖(执行默认或者自定义覆盖的)

  1. 传引用
    比如:
    // 获取用户数据
    function getDate() {
    }

    // 登陆
    function login(cb) {

       // 登陆逻辑....
       // 登陆成功后执行回调引用
       if (cb && typeof cb === 'function') {
           cb();
       }

    }

    login(getDate);

  2. ajax内部可能实现(不确保是这样的,只是模拟一下)

    function XMLHttpRequest() {
    }

    // 可以有默认的也可以没有,没有在send回调执行时判断一下就行了
    XMLHttpRequest.prototype.onreadystatechange = function () {};

    XMLHttpRequest.prototype.get = function (url) {

       this.url = url;

    };

    XMLHttpRequest.prototype.send = function () {

       // 发送http请求,修改readyState等
       // 从this.url获取数据
       // 适时调用onreadystatechange, 没有默认onreadystatechange时判空
       if (this.onreadystatechange &&
           typeof this.onreadystatechange === 'function') {
           this.onreadystatechange();
       }

    };

    var ajax = new XMLHttpRequest();
    ajax.get(url);
    ajax.onreadystatechange = function () {

       // 覆盖默认的,或者没有默认的话重新定义

    };
    ajax.send();

你换成2G网络就能看出区别了 请求慢的时候下面的代码会继续执行 如果用同步 就干等着吧