Ajax-4. 同步和异步

将 Ajax 请求改为同步请求

xhr.open('get','./server/check01.php?username='+uname,false)

1. 界面会卡顿，卡顿多长时间取决于网络速度
2. xhr.onreadystatechange 的回调将不会被执行，将回调去除后才能获得数据

xhr.open("get", "./server/check01.php?uname=" + usernameValue, false);
console.log("-------01xhr.readyState-------" + xhr.readyState); // 1

xhr.send(null);
// 此时状态已经等于 4 ，回调函数不会执行，不需要回调函数onreadystatechange
console.log("-------02xhr.readyState-------" + xhr.readyState); // 4
if (xhr.readyState == 4) {
	if (xhr.status == 200) {
		var result = xhr.responseText;
		var username_result = document.querySelector("#username_result");
		if (result == "ok") {
			username_result.innerText = "用户名可以使用";
		} else {
			username_result.innerText = "用户名已经被注册";
		}
	}
}

异步的底层原理

JS 中的异步的实现的原理是单线程加事件队列。

单线程指的是 JS 代码是从上到下按顺序依次执行的

事件队列可以认为是一个容器，这个容器存储着一些回调函数，这些回调函数只有在 JS 代码全部执行完成之后才有可能去调用。

setTimeout(function() {
	console.log("定时函数代码执行了");	// 后执行
}, 0);
var str = "";
for (var i = 0; i < 1000000; i++) {
	str += i;
}
console.log("正常代码执行了");	// 先执行