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

<!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>

[size=large][b]不[/b][/size]同的浏览器,执行结果不太一样:
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]

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值