js系列四十一:Ajax

Ajax是网页与服务端进行数据交互的一种技术.我们可以通过服务端提供接口,用Ajax向服务端请求我们需要的数据,整个过程的简单实现如下所示.

// 简单的Ajax原生实现
// 由服务端提供接口
var url = "https://baidu.com/";
var result;
var XHR = new XMLHttpResquest();
XHR.open('GET', url, true);
XHR.send();
XHR.onreadystatechange = function() {
	if(XHR.readystate == 4 && XHR.status == 200) {
		result = XHR.response;
		console.log(result);
	}
}

在Ajax的原生实现中,利用了onreadystatechange事件,只有当该事件触发并且符合一定条件时,才能拿到我们想要的数据,之后才能处理数据.
这样做看上去并没有什么,但是如果这个时候,还需要做另外一个Ajax请求,那么这个新的Ajax请求中的一个参数,则必须从上一个Ajax请求中获取.这个时候我们就不得不这样做了

// 简单的Ajax原生实现
// 由服务端提供接口
var url = "https://baidu.com/";
var result;
var XHR = new XMLHttpResquest();
XHR.open('GET', url, true);
XHR.send();
XHR.onreadystatechange = function() {
	if(XHR.readystate == 4 && XHR.status == 200) {
		result = XHR.response;
		console.log(result);

		// 伪代码大概如下:
		var url2 = '.....';
		var XHR2 = new XMLHttpResquest();
		XHR2.open();
		XHR2.send();
		....
	}
}

当还有第三个Ajax时,就会越来越麻烦了,就会产生我们所说的 回调地狱