这几天分配下一个任务,就是实现web版的cmd命令执行效果,项目名称是网络追踪工具。先上效果图,图中的结果显示时是一条一条出来的。
实现此效果的重点之一是利用ajax异步请求,页面无刷新的好处,用户在页面看不出ajax的刷新过程,增强了用户体验。实现这个功能我的设想是这样的,点击执行时是一个ajax请求,将用户的cmd命令带到后台java代码中执行,将执行的结果存放到一个Queue中。在这个ajax请求的回调函数中唤起另一个ajax请求,我暂且叫它ajax2吧,ajax2会不断的发送请求,去Queue中poll出执行结果并在它的回调函数中显示在页面上。以下是两个ajax的js代码:
function checkSubmit() { $("#clip").text(""); $("#areaText").attr("value",""); var command = $("#command").val(); var params = $("#params").val(); $.ajax({ async:true,type: "POST",url: "traceback.htm",data: { 'command' :command,'params' :params},success: function (result){ $("#areaText").attr("value",result.areaText); if(result.poll!="*end*"){ setTimeout("searchResult()",100); } if (!hasErrors(result)) { $( "#params" ).focus(); } } }); } function searchResult(){ var Text =$("#areaText").val(); ajaxPost("searchSession.htm",function(result) { $("#areaText").attr("value",Text+result.areaText); document.getElementById("areaText").scrollTop= document.getElementById("areaText").scrollHeight; if(result.poll!="*end*"){ setTimeout("searchResult()",100);//每隔0.1秒进行一次请求 } }); }