• 2009-03-09

    AJAX+Servlet实现客户端无刷新请求服务器实践 - [ajax]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://allantaylor.blogbus.com/logs/36333079.html

    最近需要做一个在网页中要不断检测服务器端数据程序,当然最简单的方法是在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
     }
     
    //以上代码,均测试成功,相信朋友们一看就懂,错误之处,敬请指教!
    //全文完

    历史上的今天:


    收藏到:Del.icio.us