AJAX+Servlet實現客戶端無刷新請求服務器實踐
www.yjyunda.com/art??2005-12-22??星語文章
最近需要做一個在網頁中要不斷檢測服務器端數據程序,當然最簡單的方法是在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
}
posted on 2006-10-21 18:57 JAVA_UFO 閱讀(1630) 評論(1) 編輯 收藏 所屬分類: ajax