您的位置：Web开发->J2SE综合:AJAX进一阶应用

J2SE综合:AJAX进一阶应用2008-05-30 来自：lizhe1985  [收藏到我的网摘]

来源：IT专家网

　　解决的问题：当通过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);
　　}

　　增加状态判断，并进行延迟。 客户体验好。

推荐人评论

解决的问题：当通过AJAX多次提交请求，而服务器端反映比较慢，导致只有最后一个请求被响应的现象。

用户评论

正在载入评论列表...