Ajax基石之一:XMLHttpRequest -> XMLHttpRequest经典例子（代码来自于Ajax in Action） -

达达乐队

浏览: 3801 次
性别:
来自: 大连

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (4)

社区版块

存档分类

Ajax基石之一:XMLHttpRequest -> XMLHttpRequest经典例子（代码来自于Ajax in Action）

Ajax JavaScript IE 浏览器 Safari

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- XML异步加载数据完整的生命周期例子代码 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>XML异步加载数据完整的生命周期例子代码</title>
</head>
<script>
var req = null;
var console = null;
var READY_STATE_UNINITIALIZED = 0;
var READY_STATE_LOADING = 1;
var READY_STATE_LOADED = 2;
var READY_STATE_INTERACTIVE = 3;
var READY_STATE_COMPLETE = 4;

function sendRequest(url, param, HttpMethod) {
	if (!HttpMethod) {
		HttpMethod = "GET";
	}
	req = initXMLHTTPRequest();
	if (req) {
		req.onreadystatechagnge = onReadyState;
		req.open(HttpMethod, url, true);
		req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		req.send(param);
	}
}
function initXMLHTTPRequest() {
	var xRequest = null;
	if (window.XMLHttpRequset) {
		xRequest = new XMLHttpRequest();	//Mozilla/Safari
	} else if (typeof ActiveXObject != "undefined") {
		xRequest = new ActiveXObject("Microsoft.XMLHTTP");	//IE
	}
	return xRequest;
}
function onReadyState() {	//定义回调函数
	var ready = req.readyState;
	var data = null;
	if (ready == READY_STATE_COMPLETE) {	//检查readyState
		data = req.responseText;	//读取相应数据
	} else {
		data = "loading ... [" + ready + "]";
	}
	toConsole(data);
}
function toConsole(data) {
	if (console != null) {
		var newline = document.createElement("div");
		console.appendChild(newline);
		var txt = document.createTextNode(data);
		newline.appendChild(txt);
	}
}
window.onload  = function () {
	console = document.getElementById('console');
	sendRequest("data.txt");

}
</script>
<body>

</body>
</html>

不同的浏览器，执行结果不太一样:
IE:
loading ... [1]
loading ... [1]
loading ... [3]
Here is some text from the server!
Firefox 1.0
loading ... [1]
loading ... [1]
loading ... [2]
loading ... [3]

从代码中可以看出XML技术异步加载数据的方式：
通过XMLHttpRequest向服务器发送一个请求，这个请求是由浏览器额外开一个Http异步请求线程来处理。同时定义了一个回调函数，这个函数相当于一个事件触发的函数，函数触发的条件就是web服务器对这个请求返回一个response。浏览器发送XMLHttpRequest的线程监听到了这个response，会将这个请求放到JavaScript引擎线程队列的最后，等待JavaScript引擎线程的执行，JavaScript引擎始终是单线程执行的。

分享到：