利用Ajax实现页面局部刷新

最新推荐文章于 2023-12-01 14:25:12 发布
最新推荐文章于 2023-12-01 14:25:12 发布
阅读量1.3k 收藏
点赞数
文章标签： ajax function import xmlhttprequest string table

 2个文件 1个Html文件,一个Servlet

html 代码为:

<html>
<script>
  var xmlHttp;
 
  window.οnlοad=function(){
   //alert("111");
  doStart();
  }
 
  function createXMLHttpRequest(){
   // alert("222");
  if(window.ActiveXObject){
   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if(window.XMLHttpRequest){
   xmlHttp=new XMLHttpRequest();
   }
   }
  
   function doStart(){
   // alert("doStart");
   createXMLHttpRequest();
   var url="dyupdate.yy";
  
     xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=startcallback;
    xmlHttp.send(null);
    }
   
    function startcallback(){
     // alert("startcallback");
     if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
         //alert("正常");
            setTimeout("pollServer()",5000);
            refreshTime();
        }
        else{
        alert(xmlHttp.status);
    }
  }}

   
 function pollServer(){
// alert("pollServer");
    createXMLHttpRequest();
    var url="dyupdate.yy" 
     xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=pollcallback;
    xmlHttp.send(null);
    }
     function pollServer2(ob){
 // alert(ob);
    createXMLHttpRequest();
    var url="dyupdate.yy&task="+ob; 
     xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=pollcallback2;
    xmlHttp.send(null);
    }
   function pollcallback2(){ }
   
  function pollcallback(){
   // alert("pollcallback");
     if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
         //alert("11");
         
           var message=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
           alert(message);
           if(message!=""){
           var new_row=createRow(message);
           var table=document.getElementById("dyupdatearea");
           var table_body=table.getElementsByTagName("tbody").item(0);
          
           var first_row=table_body.getElementsByTagName("tr").item(1);
           table_body.insertBefore(new_row,first_row);
           setTimeout("pollServer()",5000);
           refreshTime();
           }
        else{
       doStart();
    }}
    else{
    alert(xmlHttp.status);
    }
    }
  }
   
   function createRow(message){
   // alert("createRow");
     var row=document.createElement("tr");
     var cell=document.createElement("td");
     var cell_data=document.createTextNode(message);
    
     cell.appendChild(cell_data);
     row.appendChild(cell);
     return row;
     }

function refreshTime(){
  //alert("refreshTime");
 var time_span=document.getElementById("time");
 var time_var=time_span.innerHTML;
 var int_val=parseInt(time_var);
 var new_int_val=int_val-1;
 
 if(new_int_val>-1){
  setTimeout("refreshTime()",1000);
  time_span.innerHTML=new_int_val;
 }else{
  time_span.innerHTML=5;
 }
}
</script>
<body>
 <h1>利用Ajax</h1>
 <input type="button" value="加载" id="go" onClick="doStart();" />
   <p>
    页面将在<span id="time">5</span>秒后刷新
  </p>
  <table id="dyupdatearea" align="left" border="1">
   <tbody>
    <tr id="row0">
     <td></td>
    </tr>
   </tbody>
   
   <input type="text" id="55" name="text" />
   <input type="button" value="提交" onClick="pollServer2(document.getElementById('55').value)" />
   

  </table>
 </body>
</html>  
  

Servlet代码为:

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.LinkedList;

import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.RequestDispatcher;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ajax extends HttpServlet{
 int counter;
 private  static LinkedList list=new LinkedList();
public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
  //response.setC("UTF-8");
 if(list.size()>0)
 {
  System.out.println(list.getFirst().toString());
 }
  System.out.println("已经执行了");
  //int no=1;
 
  String res="";
  String task=request.getParameter("task");
  if(task!=null&&!"".equals(task))
  list.add(task);
  String message="12";
  //String reNo="<count>0</count>"; 

 
//   if(task.equals("reset")){
//    counter=1;
//  }else{
//   switch(counter){
//    case 1:message="1";break;
//    case 2:message="2";break;
//    case 3:message="3";break;
//    case 4:message="4";break;
//    case 5:message="5";break;
//    default:message="done";
//   }
//   counter++;
//  }
 
  if(list.size()>0){
 message=list.removeLast().toString();
   }
   res="<message>"+message+"</message>";
  PrintWriter out=response.getWriter();
 
  response.setContentType("text/xml; charset=UTF-8");
 
  response.setHeader("Cache-Control","no-cache");
  out.println("<response>");
  out.println(res);
  out.println("</response>");
  out.close();
  }

//public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
//   String text=(String)request.getParameter("text");
//   response.setContentType("text/xml; charset=UTF-8");
//   if(text!=null)
//   {
//    queue.add(text);
//   }
     RequestDispatcher rd=this.getServletContext().getRequestDispatcher("/ajax.html");
     rd.forward(request,response);
//}
 }

NetFishTail
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax刷新table里的内容,Ajax动态局部刷新table表格内容——jQuery代码示例
weixin_42469191的博客
08-05 1850
Ajax动态局部刷新table表格内容——jQuery代码示例发布时间：2019-04-02 01:37,浏览次数：2161, 标签：AjaxtablejQuery这是我的table表格，内容部分加了个Id=”tabletext“ ,用于后续获取数据覆盖区域align="center" border="0"> 任务ID 用户名 最后运行时间 数据包完成数量 数据包入库数量 ...
利用ajax实现页面的局部刷新
ccsky001的天空
03-09 4188
在web应用中，经常变化的是数据，但为了加载新数据就去从新加载页面，不仅麻烦，也不友好。今天我利用ajax实现了一个页面数据的局部刷新，效果如下： 表格中的信息每隔五秒后刷新，并从服务器端得到信息，加入table中。 下面介绍一下他的实现：onload()函数使页面加载时就被调用，这里介绍一下startcallback函数，其中的setTimeout函数是一
AJAX局部刷新功能实现
just_learing的博客
04-16 2984
Ajax局部刷新功能实现
利用jQuery实现AJAX定时刷新局部页面实例
最新发布
12-01 1677
通过两种方法实例讲解ajax定时刷新局部页面，当然方法有很多种，也可以不使用ajax来刷新页面，可以使用jquery中的append来给指定内容加东西，但是都不太实用，最实用的方法还是ajax加载数据了。局部刷新我们讲述到最多的是ajax 了，当然也可以不使用ajax来刷新页面了，我们可以使用jquery中的append来给指定内容加东西了，当然最实用的还是ajax加载数据了。如果我只能刷新一个特定的页面的一部分，这将是很大的，例如：仪表盘上的交通灯显示系统状态。
ajax异步加载 实现局部刷新
热门推荐
QING
06-29 2万+
这是用jquery进行数据交互 $(function(){ $("#inp1").blur(function(){ var name=$(this).val(); $.ajax({ url:"${pageContext.request.contextPath}/demo", data:{"uname":name,"upwd":"jack123","age":12
利用Ajax创建动态化页面
llqq314的博客
05-30 376
一、创建员工类 public class Employee { private Integer empno; private String ename; private String department; private String job; private Float salary; public Integer getEmpno() { return empno; } public void setEmpno(Integer empno) { this.e
Springmvc加ajax实现上传文件并页面局部刷新
08-19
总结起来，Spring MVC结合Ajax实现文件上传并页面局部刷新，主要涉及前端的文件选择、FormData构建、Ajax请求，以及后端的文件接收和处理。通过这种方式，可以提供更佳的用户体验，避免了传统方式中整个页面刷新带来...
Ajax实现页面自动刷新实例解析
12-11
这段代码每隔5秒就会从当前页面的 URL 加载 ID 为 "content" 的部分，并替换原有内容，实现局部刷新。 总结来说，Ajax 技术在网页开发中扮演着重要角色，通过异步数据交换和局部刷新，极大地提升了网页的动态性和...
Ajax+php数据交互并且局部刷新页面的实现详解
10-19
主要给大家介绍了关于利用Ajax与php数据交互并且局部刷新页面的实现方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
ajax实现了一个页面数据的局部刷新
05-22
本文档利用ajax实现了一个页面数据的局部刷新。
jQuery+ajax实现局部刷新的两种方法
10-19
在项目中，经常会用到ajax，比如实现局部刷新，比如需要前后端交互等，这里呢分享局部刷新的两种方法，主要用的是ajax里面的.load()。感兴趣的朋友一起看看吧
ajax如何实现页面局部跳转与结果返回
09-03
通过上述内容，我们可以看到AJAX如何实现在不刷新整个页面的情况下，只更新部分网页内容以及实现局部跳转。在前端，我们利用JavaScript和jQuery的AJAX功能发起异步请求，并在成功回调中处理返回的结果，包括展示信息...
jquery实现页面局部刷新
05-28
**jQuery 实现页面局部...本文将深入探讨如何利用jQuery实现页面局部刷新，并提供相应的代码示例。 ### 1. jQuery的基本用法 首先，确保在你的HTML文档中引入了jQuery库，通常通过以下方式引入CDN链接： ```html ...
ajax提交成功后局部刷新 jq_jQuery+ajax实现局部刷新的两种方法
weixin_39713833的博客
12-19 490
在项目中，经常会用到ajax，比如实现局部刷新，比如需要前后端交互等，这里呢分享局部刷新的两种方法，主要用的是ajax里面的.load()。第一种：当某几个页面都有相同的头部、导航、底部的时候，点击导航链接可以在几个页面中切换，此时想要的效果是点击链接后只切换内容部分，其他不再重新加载。上代码。jq-load.html：ajax局部刷新首页新闻资讯用户中心首页的内容注：jq-load2.html、...
【Ajax入门】实现页面的局部刷新，前后端交互少不了的技术
apple_51673523的博客
03-21 5450
前言 之前已经学习jQuery了，我们今天在jQuery的基础上继续学习Ajax。如果你不知道jQuery那么你可以先去看看本专栏的上一篇博客。 传送门： 虽然我们是在jQuery的基础上学习Ajax，但是Ajax可是非常非常重要的，在以后的Web开发中会一直用到它的。 目录前言初识Ajax使用Ajax创建XMLHttpRequest对象发送Ajax处理服务器响应利用Ajax实现新闻列表同步与异步jQuery对Ajax的支持练习强化 初识Ajax 首先要知道Ajax不是一种新的编程语言，而是一种用于创建更
AJAX：实现局部刷新
qq_43568982的博客
09-06 6295
开始时间：2021-09-04 AJax
Ajax实现页面局部刷新
12-24 4316
这里通过点击一个按钮，然后下面产生一段文字，而整个页面不用刷新 运行结果：
异步请求，局部更新页面------Ajax
m0_73557631的博客
05-10 514
.XHLHttpRequest是异步发送，在服务端没有响应前，浏览器不需要等待，用户可以完成其他操作。1.请求把数据全部提交给服务端，数据大，没有意义。3.通过http响应，把数据返回给浏览器。
asp.net利用ajax实现无刷新页面
05-28
ASP.NET可以利用Ajax技术实现无刷新页面。Ajax是一种异步的JavaScript和XML通信技术，它可以在不刷新整个页面的情况下，向服务器提交或获取数据，并将返回的数据局部地更新到页面上。在ASP.NET中，可以通过以下步骤来实现无刷新页面： 1. 引入jQuery库。 在ASP.NET页面中，需要通过<script>标签引入jQuery库，例如： ``` <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> ``` 2. 编写JavaScript代码。 通过jQuery库提供的$.ajax()方法，可以向服务器提交或获取数据，并在成功返回数据后更新页面。例如，下面的代码用于向服务器提交数据： ``` $.ajax({ type: "POST", url: "Handler.ashx", data: { name: "张三", age: 18 }, success: function (data) { $("#result").html(data); } }); ``` 其中，type表示提交数据的方式，可以是POST或GET；url表示提交数据的目标地址；data表示提交的数据，可以是JSON对象、字符串或FormData对象；success表示成功返回数据后的回调函数，data参数表示服务器返回的数据。 3. 编写服务器端代码。 在ASP.NET中，可以通过Generic Handler（通用处理程序）来处理Ajax请求。Generic Handler是一种不包含HTML标记的ASP.NET页面，可以处理各种类型的请求。例如，下面的代码用于处理上面的Ajax请求： ``` public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { string name = context.Request.Form["name"]; int age = int.Parse(context.Request.Form["age"]); // 处理请求，返回数据 context.Response.Write("提交成功！"); } public bool IsReusable { get { return false; } } } ``` 在该代码中，通过Request.Form[]属性获取提交的数据，处理请求后通过Response.Write()方法返回数据。 通过以上步骤，就可以在ASP.NET中利用Ajax技术实现无刷新页面了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值