本篇主要讲述AJAX无刷新请求原理,即浏览器网页使用AJAX访问服务器并返回数据的整个请求过程即实现原理。
请求的过程如下:
1、创建XMLHttpRequest对象,对于不同浏览器,创建XMLHttpRequest对象的方法是不同的,具体查看示例代码
2、为XMLHttpRequest对象准备请求内容
xmlhttp.open(method,URL,async,user,password);
method:请求方式(POST、GET)
URL:请求地址
★open方法是异步的
3、为XMLHttpRequest对象注册onreadystatechange监听事件,来监听服务器返回的状态和返回的数据
4、 正式发送请求,并通过onreadystatechange监听服务器的响应
示例代码如下:
<script type="text/javascript">
function functionName() {
//兼容浏览器的创建XMLHttp对象的判断方法
var xmlhttp;
//IE浏览器创建XMLHttpRequest对象
if (window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
}
}
//非IE浏览器创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
//如果创建对象失败,则报异常并返回
if (!xmlhttp) {
alter("创建XMLHTTP对象异常!");
return false;
}
/*
xmlhttp.open(method,URL,async,user,password);
method:请求方式,URL:请求地址
准备向服务器的指定页面(RequestPage.ashx)发起POST或GET请求(GET有缓存,POST没有缓存,建议用POST),
加上一个参数"&ts=" + new Date(),使每次请求都不一样,避免由于缓存导致无法更新
*/
xmlhttp.open("POST", "RequestPage.ashx?id=1" + "&ts=" + new Date(), false);//准备请求
/*
注册onreadystatechange监听事件,此事件在发送后才会被监听
XMLHTTP默认(也推荐)不是同步请求的,也就是open方法并不像WebClient的DownloadString那样把服务器返回的数据拿到才返回,而是异步的,因此需要监听onreadystatechange事件
readyState==4:表示请求服务器完成
state==200:表示请求成功返回
responseText:服务器返回的文本
*/
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {//表示请求服务器完成
if (xmlhttp.state == 200) {//表示请求成功返回
var responseText = xmlhttp.responseText; //服务器返回的文本
//此处处理返回的文本
}
else {
alter("AJAX服务器返回错误!");
}
}
}
xmlhttp.send(); //此处才正式发送请求,并通过onreadystatechange事件来进行监听
}
</script>