您现在的位置是:首页 > 电脑技术查询 > web开发

AJAX+Servlet兑现客户端无刷新请求服务器实践

编辑:chaxungu时间:2022-10-10 23:23:58分类:web开发

AJAX+Servlet实现客户端无刷新请求服务器实践
最近需要做一个在网页中要不断检测服务器端数据程序,当然最简单的方法是在html页面头部加以下标签
<META http-equiv=V="REFRESH" content="5;URL=本页面url">
实现将网页设成每隔5秒钟将自身页面刷新一次;从而检测或加载服务器端数据.
但该方法有一个不雅的问题是,页面要不停地闪烁刷新,而且在每次刷新时都会发出windows点击链接的声音.如果时间久了,没有人能忍受的了吧.
  现在找到了AJAX(异步 JavaScript 和 XML)这个技术,他可以帮我们解决客户端无需提交页面即可发送对服务器的请求,这些均通过客户端javascript实现,以下为实现代码:
第一部分:
<body onload="checknew()">页面加载时即开始调用脚本checknew.
第二部分:页面脚本
//页面声明对象var http_request; function checknew(){        http_request = false;        //下面需要建立一个XMLHttpRequest对象,用它进行服务器请求,针对不同浏览器建立方法不同        if (window.XMLHttpRequest)         { // Mozilla, Safari,...            http_request = new XMLHttpRequest();            if (http_request.overrideMimeType)             {                http_request.overrideMimeType('text/xml');            }        }         else if (window.ActiveXObject)         { // IE            try             {                http_request = new ActiveXObject("Msxml2.XMLHTTP");            }            catch (e)            {                try                 {                    http_request = new ActiveXObject("Microsoft.XMLHTTP");                }                 catch (e) {}            }        }                if (!http_request) {            alert('出现错误,不能建立一个XMLHTTP实例!');            return false;        }        //funccallback为请求返回后要调用的javascript方法        http_request.onreadystatechange = funccallback;        //该请求用get方式发送至url为/servlet/CheckServlet的Servlet,url可以带参数或数据方式同一般url传值,Servlet请看后面代码        http_request.open('GET',url, true);        http_request.send(null);        //如果要使用HTTP POST方式,必须要对 XMLHttpRequest 对象设置一个 Content-Type 头,使用以下语句(url中也可包含参数):        //http_request.open('POST',url, true);       //http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");        //http_request.send("这里为传的参数");       //每隔5秒循环一次服务器请求        setTimeout('checknew()',5000);}    //请求返回后调用方法    function funccallback()     {        //检测请求状态http_request.readyState有以下几种状态 0 (未初始化) 1 (正在装载) 2 (装载完毕) 3 (交互中) 4 (完成)         if (http_request.readyState == 4)         {//XMLHttpRequest的status属性被测试用来确定请求是否成功完成。当处理简单的GET与POST请求,你可以认为只要不是200(OK)的状态就表示发生了错误。            if (http_request.status == 200)             {                //http_request.responseText为服务器返回的文本内容,可自行做各种处理                 alert(http_request.responseText);            }             else             {                alert('对不起,请求出现错误!');            }        }    }
//第三部分 ,java Servlet的代码:
首先在web.xml中配置web Servlet,如下:
<servlet>    <servlet-name>CheckServlet</servlet-name>    <servlet-class>com.view.CheckServlet</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>CheckServlet</servlet-name>    <url-pattern>/servlet/CheckServlet</url-pattern>  </servlet-mapping>
下面为Servlet实例:
package com.view;//导入包略去,可在ide中自动导入(以下代码包含部分ide自动生成代码,可略去)public class CheckServlet extends HttpServlet{ public void destroy() {  super.destroy(); // Just puts "destroy" string in log  // Put your code here } public void doGet(HttpServletRequest request, HttpServletResponse response)   throws ServletException, IOException {  //用get方式发送请求,因此在此处理,  response.setContentType("text/xml");  response.setHeader("Cache-Control", "no-cache");  String ids="hello,China!";  //将ids返回给客户端  response.getWriter().write(ids); } public void doPost(HttpServletRequest request, HttpServletResponse response)   throws ServletException, IOException {  //如果用post方式请求,则在此处理 } public void init() throws ServletException {  // Put your code here }

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/fenglibing/archive/2006/04/27/680457.aspx