利用Ajax实现页面局部刷新

 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);
//}
 }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值