点击弹出新页面中的“See Author”链接,你将会看到该页面作者。从页面提交到显示从服务器获得的结果,这段过程你将不会发现页面的重刷新。
<script type="text/javascript">
function findAuthor(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){ <!-- 描述一个已加载的状态 -->
updateObj('author',
xmlObj.responseXML.getElementsByTagName('name')[0].firstChild.data);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send (''); <!-- 向服务器发出请求 -->
}
function updateObj(obj, data){
var textNode = document.createTextNode(data); <!-- 文本内容data转换成Dom对象 -->
document.getElementById(obj).appendChild(textNode);
}
</script>
创建好XMLHttpRequest对象xmlObj之后,会调用函数监听该对象状态的变化,onreadystatechange 是一个事件句柄。它的值是一个函数function(){...},当 XMLHttpRequest 对象的状态发生改变时,会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时,我们才执行代码。
我们的实例在 open() 的第三个参数中使用了 "true"。
该参数规定请求是否异步处理。
True 表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应。