javascript - AJAX是怎么样实现异步的呢?
回复内容:
AJAX的方法源码我看过,就是AJAX方法里面调用一个回调,先执行AJAX方法再执行回调,这跟普通的的引用函数 有什么区别呢?那么AJAX的异步回调在体验在哪里;
上面几位真是所答非所问。
首先浏览器的js引擎是单线程的,执行一个耗时操作必定阻碍线程后续代码的执行(比如等待网络请求的响应)。一些语言采用了开一个子线程并把耗时操作放到子线程去执行的办法解决了这个问题。
js引擎本身不支持多线程,但是浏览器基本上都有三个线程:js引擎线程、事件触发线程、http请求线程。后两个线程在触发后会把对应的回调函数放到js引擎线程的执行队列中进行排队等待,只要js引擎线程空闲就会依次执行加入到队列中的回调函数。当然这些回调函数的执行依然是阻碍线程的。
页面无刷新进行数据请求,返回数据通过js操作DOM,用户体验良好;单纯调用js函数仅对前端有操作,没有与服务器的交互;AJAX是组合技术,提升用户体验,不必每次请求都刷新整个页面,即js操作dom进行局部刷新
在我看来本质上没有区别,一个传入函数,一个是类似面向对象中我多态覆盖(执行默认或者自定义覆盖的)
-
传引用
比如:
// 获取用户数据
function getDate() {
}// 登陆
function login(cb) {// 登陆逻辑.... // 登陆成功后执行回调引用 if (cb && typeof cb === 'function') { cb(); }
}
login(getDate);
-
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网络就能看出区别了 请求慢的时候下面的代码会继续执行 如果用同步 就干等着吧
推荐阅读
-
纯javascript的ajax实现php异步提交表单的简单实例
-
ajax-多说、友言之类的社会化评论是靠什么技术实现的呢?
-
javascript - 像那些广告联盟,是怎么实现的呢,比如我淘宝上搜一个商品,然后优酷看视频,其它一些乱七八糟的广告百度联盟的啊,都是相关的推荐广告?
-
纯javascript的ajax实现php异步提交表单的简单实例
-
javascript - Ajax实现的长轮询如何才能不阻塞同一时间内页面的其他Ajax请求(同域请求)呢?
-
javascript - Ajax实现的长轮询如何才能不阻塞同一时间内页面的其他Ajax请求(同域请求)呢?
-
javascript - AJAX是怎么样实现异步的呢?
-
javascript - 很想问,前后端分离具体的实现是怎么样呢?
-
JavaScript, 函数是实现异步的基础
-
原生javascript实现的ajax异步封装功能示例