解决的问题:当通过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);
%>
解决的问题:当通过AJAX多次提交请求,而服务器端反映比较慢,导致只有最后一个请求被响应的现象。
其中,提交请求包含一个技术参数,响应请求延迟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);
}
增加状态判断,并进行延迟。 客户体验好。
J2SE综合:AJAX进一阶应用
最新推荐文章于 2024-09-17 01:11:31 发布