利用Ajax实现页面局部刷新
2007-06-18 13:25
726 查看
2个文件 1个Html文件,一个Servlet
html 代码为:
<html>
<script>
var xmlHttp;
window.onload=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);
//}
}
html 代码为:
<html>
<script>
var xmlHttp;
window.onload=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);
//}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 利用ajax实现与php数据交互，并局部刷新页面
- 利用Ajax实现在页面显示局部刷新
- 在JSF页面利用Ajax实现局部刷新
- 利用Ajax实现页面局部刷新
- 利用Ajax实现页面局部刷新
- 利用ajax和JSP技术实现网页中表单的局部刷新（只刷新表单数据，而不刷新整个页面）
- 利用ajax实现与php数据交互，并局部刷新页面
- 利用ajax实现与php(json数组)数据交互，并局部刷新页面
- 利用ajax实现页面的局部刷新
- 利用ajax对页面局部刷新
- Ajax请求返回一个页面，实现页面局部刷新
- jQuery实现AJAX定时刷新局部页面实例
- 静态页中利用AJAX.NET实现无刷新页面
- 静态页中利用AJAX.NET实现无刷新页面
- AjaxAnyWhere 实现页面局部刷新,局部分页
- asp.net mvc3 利用Ajax实现局部刷新
- pushState()、popstate事件配合ajax实现浏览器前进后退页面局部刷新
- ASP.NET使用ajax实现分页局部刷新页面功能
- 静态页中利用AJAX.NET实现无刷新页面
- 利用JQuery+Ajax实现aspx页面无刷新异步请求