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

最近需要做一个在网页中要不断检测服务器端数据程序,当然最简单的方法是在html页面头部加以下标签
<META http-equiv=V="REFRESH" content="5;URL=本页面url">
实现将网页设成每隔5秒钟将自身页面刷新一次;从而检测或加载服务器端数据.
但该方法有一个不雅的问题是,页面要不停地闪烁刷新,而且在每次刷新时都会发出windows点击链接的声音.如果时间久了,没有人能忍受的了吧.
　　现在找到了AJAX(异步 JavaScript 和 XML)这个技术,他可以帮我们解决客户端无需提交页面即可发送对服务器的请求,这些均通过客户端javascript实现,以下为实现代码:
第一部分:
<body οnlοad="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
}

//以上代码,均测试成功,相信朋友们一看就懂,错误之处,敬请指教!
//全文完

AJAX+Servlet实现客户端无刷新请求服务器实践相关推荐

jsp 页面刷新_如何应用XML+XSLT+AJAX组合技术实现无刷新数据查询
软件项目实训及课程设计指导--如何应用XML +XSLT +AJAX组合技术实现无刷新的数据查询的应用实例 1.在Web应用系统项目中添加一个实现查询的请求页面searchBook.jsp (1)创建 ...
Ajax弹出式无刷新城市选择特效
为什么80%的码农都做不了架构师?>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
php无刷新实现页面更新,使用laravel和ajax实现整个页面无刷新的操作方法
1.数据库文件 CREATE TABLE IF NOT EXISTS mr_key ( id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT ' ...
zan php demo,ajax+php+mysql实现无刷新点赞功能
从动态图看出来,点击赞的按钮的时候,旁边的赞数量在无刷新地增加.打开数据库也能看到赞数量更新了. 原理就是通过ajax异步提交数据给数据库. 首先前端页面就是一个按钮和赞数量. 数据库名,test,表 ...
JavaWeb之Ajax,省市联动及无刷新数据分页
目录一,Ajax的作用二,$.ajax() 1.jQuery.ajax(url,[settings]) 2.$.ajax() 三,post 1.通过远程 HTTP POST 请求载入信息 2.jQ ...
使用ajax和history.pushState无刷新改变页面URL
HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别传统的ajax有如下的 ...
在Ajax程序中实现无刷新换肤功能(asp.net2.0)
写了一年多的WEB程序,觉得程序中换肤的功能是非常吸引人眼球的技术.特别是在子父级的WEB平台与论坛上应用广泛,可以突出不同人的风格与个性. 从文章的标题上看是Ajax的无刷新换肤,只是本 ...
jquery ajax无刷新请求Struts2验证用户名密码数据库是否存在
通过ajax请求验证后台数据是否存在. 首先导入struts2的核心包. 后台Action代码 import com.opensymphony.xwork2.ActionSupport;public ...
java ajax无刷分页_asp.net+ajax+json来实现无刷新分页功能
现在做网站就是尽可能的提高用户体验,用户浏览网站尽可能不要刷新,响应速度尽可能的快,就是加载速度不好,也要告诉用户你已经很努力的在加载了(loading.....),下面来看看如何实现此功能 USE ...

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

AJAX+Servlet实现客户端无刷新请求服务器实践相关推荐

最新文章

热门文章