`
wzu_xiaomai
  • 浏览: 4232 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

利用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秒进行一次请求
     }
   });
 }

 

 

  • 大小: 23.9 KB
分享到:
评论

相关推荐

    Ajax发送请求js代码

    打包好的Ajax代码,实现了对象化,使用时直接调用就可以了,调用时需要重构三个方法,如下: function onerror() //错误处理方法 { alert("error"); } function getInfo() //发送请求方法,包括请求方法和请求...

    解决Ajax 发送多个请求引发的并发问题

    在Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛用于实现页面的异步更新,从而提升用户体验。然而,当需要发送多个Ajax请求时,可能会出现并发问题,导致数据处理混乱或者请求响应顺序不可控。本文...

    原生javascript实现ajax 发送post请求

    原生javascript实现ajax发送pos请求,这样可以脱离jquery框架,

    利用Ajax+Jquery实现异步进度条效果

    "利用Ajax+Jquery实现异步进度条效果"这个主题正是围绕这一目标展开,它涉及到C#后端开发、.NET框架、Ajax技术以及Jquery库的前端应用。下面将详细阐述这些知识点。 首先,C#是一种面向对象的编程语言,广泛应用于...

    Ajax邮件发送(实现无刷新)

    Ajax邮件发送技术是一种在网页端实现无刷新通信的机制,主要通过JavaScript的XMLHttpRequest对象来与服务器进行异步数据交换,从而更新部分网页内容,无需重新加载整个页面。本项目基于Visual Studio 2005 (VS2005) ...

    HTML使用极简的方式通过ajax请求实现前后端交互代码实现

    在现代Web开发中,前后端交互是不可或缺的一部分,而AJAX(Asynchronous JavaScript and XML)技术使得这种交互变得更加高效和无缝。本篇文章将探讨如何使用HTML、JavaScript(jQuery库)和Ajax来实现前后端的数据...

    什么是Ajax?Ajax如何发送请求(详)源码

    Ajax如何发送请求? 原文章: https://blog.csdn.net/weixin_52203618/article/details/131324686 Ajax 是 Asynchronous Javascript And XML 的缩写,它是异步的 Javascript 和 XML技术,是由 Javascript 、 XML 、...

    Ajax实现的简单的web聊天

    **Ajax 实现的 Web 聊天系统详解** 在当今的网页应用中,实时交互性已经成为了一项基本需求。为了实现这一目标,开发者们经常使用 AJAX(Asynchronous JavaScript and XML)技术来创建无需刷新页面就能更新内容的...

    AJAX 请求完成时执行函数。Ajax 事件。

    总结,AJAX请求的完成阶段执行的函数和相关事件是Web开发中的重要组成部分,它们使得我们可以灵活地处理异步数据交互。了解并熟练运用这些技术,可以创建出更加高效、流畅的交互式Web应用。在实际开发中,应根据项目...

    ajax发送xml请求小示例

    在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。XML(Extensible Markup Language)则是一种用于...

    利用Ajax 实现Web 水平方向Tree

    下面我们将详细探讨如何利用Ajax来实现Web上的水平树视图。 首先,让我们了解Ajax的基本原理。Ajax的核心是XMLHttpRequest对象,它允许JavaScript在后台与服务器通信,而不会中断用户的交互。通过创建...

    Ajax请求过程中显示“进度”的简单实现

    Ajax在Web应用中使用得越来越频繁。在进行Ajax调用过程中一般都具有这样的做法:显示一个GIF图片动画表明后台正在工作,同时阻止用户操作本页面(比如Ajax请求通过某个按钮触发,用户不能频繁点击该按钮产生多个并发...

    如何在Thymeleaf中实现ajax请求url的可靠构造

    在Thymeleaf中构建可靠的Ajax请求URL是Web开发中的一个重要环节,特别是在使用Spring Boot和其他MVC框架时。Thymeleaf是一个强大的服务器端模板引擎,它可以与Ajax结合使用,提供动态更新页面的能力,而无需刷新整个...

    利用Ajax实现无刷新验证用户名和密码是否正确

    在现代Web应用中,用户体验的重要性不言而喻。"利用Ajax实现无刷新验证用户名和密码是否正确"这一技术就是为了让用户在输入登录信息时能够得到即时反馈,无需等待页面整体刷新,极大地提升了交互体验。Ajax...

    利用Ajax实现的实用聊天室源码

    在这个项目中,我们讨论的是如何利用Ajax构建一个实用的聊天室,让用户可以实时地发送和接收消息。 1. **前端结构**: - HTML:创建聊天室的基础结构,包括输入框、发送按钮和显示聊天记录的区域。 - CSS:用于...

    Ajax + JQuery 实现无刷新效果

    Ajax(异步JavaScript和XML)技术是实现这一目标的关键工具之一,而jQuery库则通过简化JavaScript的复杂性,让开发者更容易地利用Ajax功能。本篇文章将深入探讨如何结合Ajax和jQuery来实现无刷新效果。 首先,Ajax...

    ajax请求后台数据实现分页功能

    通过以上步骤,我们可以利用jQuery的AJAX功能实现在不刷新页面的情况下,动态地从服务器获取分页数据并展示给用户。在实际项目中,你可能还需要考虑错误处理、缓存策略、SEO优化等问题,以提供更完善的分页功能。...

    Java通过jQuery实现ajax异步请求

    本示例工程"Java通过jQuery实现ajax异步请求"着重展示了如何利用jQuery的AJAX功能与后端Java服务器进行数据通信,从而实现页面的无刷新更新。以下将详细解释这个过程中涉及的关键知识点。 首先,jQuery是一个强大的...

    一个完整的jquery+ajax传送请求的实例

    总结来说,这个jQuery+AJAX的实例展示了如何利用jQuery的$.ajax方法进行异步数据请求,包括设置请求参数、处理返回数据和异常情况。在实际开发中,我们需要根据项目需求灵活运用这些技巧,以实现高效、友好的前端...

    Ajax的Post请求

    最近做项目遇到一个需求,需要通过Ajax的post请求下载文件,把实现代码分享给大家。

Global site tag (gtag.js) - Google Analytics