利用ajax持续发送请求,实现web版的cmd命令执行效果

前端之家收集整理的这篇文章主要介绍了利用ajax持续发送请求,实现web版的cmd命令执行效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

猜你在找的Ajax相关文章