Asynchronous.me - The XmlHttpRequest playground

Asynchronous.me

The XmlHttpRequest playground


1 Select Language


2 Select Type






3 Select Synchronicity
>>
4 Select Communication

Multiple serial asynchronous requests




Example

<script type="text/javascript">
	function run() {
		request1(function () {
			request2(function () {
				request3(function () {
					done();
				});
			});
		});
	}
	function request1(callback1) {
		// request 1
		print("request1");
		var xmlHttpRequest1 = new XMLHttpRequest();
		xmlHttpRequest1.open("GET", "something1?hello1", true);
		xmlHttpRequest1.onreadystatechange = function () {
			if (this.readyState == 4 && this.status == 200) {
				// response 1
				print("response1=" + this.responseText);
				// continue execution in the callback
				if (callback1) {
					callback1();
				}
			}
		};
		xmlHttpRequest1.send();
	}
	function request2(callback2) {
		// request 2
		print("request2");
		var xmlHttpRequest2 = new XMLHttpRequest();
		xmlHttpRequest2.open("GET", "something2?hello2", true);
		xmlHttpRequest2.onreadystatechange = function () {
			if (this.readyState == 4 && this.status == 200) {
				// response 2
				print("response2=" + this.responseText);
				// continue execution in the callback
				if (callback2) {
					callback2();
				}
			}
		};
		xmlHttpRequest2.send();
	}
	function request3(callback3) {
		// request 3
		print("request3");
		var xmlHttpRequest3 = new XMLHttpRequest();
		xmlHttpRequest3.open("GET", "something3?hello3", true);
		xmlHttpRequest3.onreadystatechange = function () {
			if (this.readyState == 4 && this.status == 200) {
				// response 3
				print("response3=" + this.responseText);
				// continue execution in the callback
				if (callback3) {
					callback3();
				}
			}
		};
		xmlHttpRequest3.send();
	}
	function done() {
		// end
		print("done");
	}
</script>