overriew： onreadystatechange被回调函数赋值，则能实现异步调用，回调函数直接操作dom，则能实现局部刷新。那么xmlhttprequest的onreadystatechange如何知道服务ready了呢？状态如何change了呢（观察者模式）？则是通过客户端对服务的状态询问（定期轮询）所实现的。
详解：
1. xmlhttprequest 负责与服务器端的通讯，其内部有很多重要的属性：readystatus=4，status=200等等。当xmlhttprequest的整体状态并且保证它已经完成（readystatus=4），即数据已经发送完毕。然后根据服务器的设定询问（类似于客户端会轮询服务器的返回状态，仍然是http短连接,并非长连接的服务器端push）请求状态，如果一切已经就绪（status=200），那么就执行需要的操作。
操作一般就是直接操作dom，所以ajax能做到所谓的“无刷新”用户体验。
我要评论
document.getelementbyid("user1").innerhtml = "数据正在加载...";
if (xmlhttp.status == 200) {
document.write(xmlhttp.responsetext);
}
2. 那么在ajax客户端如何做到的异步呢？实际上就是javascript的回调函数起的作用
提供一个回调javascript函数，一旦服务器响应可用，该函数就被执行
业务函数：
function castvote(rank) {
var url = "/ajax-demo/static-article-ranking.html";
var callback = processajaxresponse;
executexhr(callback, url);
}
需要异步通讯的函数：
function executexhr(callback, url) {
// branch for native xmlhttprequest object
if (window.xmlhttprequest) {
req = new xmlhttprequest();
req.onreadystatechange = callback;
req.open("get", url, true);
req.send()(null);
} // branch for ie/windows activex version
else if (window.activexobject) {
req = new activexobject("microsoft.xmlhttp");
if (req) {
req.onreadystatechange = callback;
req.open("get", url, true);
req.send()();
}
}
}
req.onreadystatechange = callback
req.open("get", url, true)
第一行定义了javascript回调函数，一旦响应就绪它就自动执行，而req.open()方法中所指定的“true”标志说明想要异步执行该请求。
一旦服务器处理完xmlhttprequest并返回给浏览器，使用req.onreadystatechange指派所设置的回调方法将被自动调用。
回调函数：
function processajaxresponse() {
if (req.readystate == 4) {
// only if "ok"
if (req.status == 200) {
document.getelementbyid("user1").innerhtml = req.responsetext;
} else {
alert("there was a problem retrieving the xml data:
" + req.statustext);
}
}
}
以上这篇ajax的原理—如何做到异步和局部刷新【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
荐 http中status状态为canceled牵扯出的ajax一些问题
网友评论