在某公司实习,这几天分配下一个任务,就是实现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秒进行一次请求
}
});
}