解决的问题：当通过AJAX多次提交请求，而服务器端反映比较慢，导致只有最后一个请求被响应的现象。
首先 提供一个简单的ajax应用，包含两个jsp文件，一个提交请求，一个处理请求。
提交请求：ajaxtest.jsp
<%@ page contentType="text/html; charset=GB2312" %>
<html>
<head>
<title>
ajaxtest
</title>
<script language="javascript">
var count = 0;
var running = false;
var http_request;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
var rtext = http_request.responseText;
document.getElementById("refreshtext").innerHTML = rtext + "<br>"
+ document.getElementById("refreshtext").innerHTML;
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
function refreshTable() {
k = new Date();
send_request('ajaxtestresponse.jsp?count=' + (++count) + '&refreshtime='+k);
}
//window.setTimeout('refreshTable()',10000);
</script>
</head>
<body bgcolor="#ffffff">
<h1>
AJAX TEST</h1><br>
<input type="button" onClick="refreshTable();" value="ClickMe">
<br>
<span id="refreshtext"></span>
</body>
</html>
响应请求：ajaxtestresponse.jsp
<%
String count = request.getParameter("count");
String ctime = request.getParameter("refreshtime");
try {
Thread.sleep(5000);
}
catch (InterruptedException ex1) {
}
out.write("Hello world-"+count+"-"+ctime);
%>
其中，提交请求包含一个技术参数，响应请求延迟5秒左右的时间，再返回请求，以表示系统延迟比较大。
在tomcat中运行http://localhost:8080/ajaxtest.jsp 点击按钮，发送请求，然后等待回应，如果在没有回应之前，连续点击按钮提交请求，虽然后台接收到了这些请求，但是由于对运行状态的判断，web浏览器只能接收到最后一个返回的响应。
为了让浏览器能够全部接受返回的信息，有两个办法：
1、将
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
改为
http_request.open("GET", url, false);
表示等到响应接收到后，才能进行其它操作， 这样web浏览器发送请求后会有较长时间的停顿，影响客户体验，不好。
2、将
function refreshTable() {
k = new Date();
send_request('ajaxtestresponse.jsp?count=' + (++count) + '&refreshtime='+k);
}
改为
function refreshTable() {
if(http_request){
if(http_request.readyState!=4) {
window.setTimeout('refreshTable()',500);
return;
}
}
k = new Date();
send_request('ajaxtestresponse.jsp?count=' + (++count) + '&refreshtime='+k);
}
增加状态判断，并进行延迟。 客户体验好。
有点体会，就和大家共享一下，不足之处，还请多指教，欢迎讨论。
|
|
11 
1
