場景1:當有新郵件的時候,網頁自動彈出提示信息而無需用戶手動的刷新收件箱。
場景2:當用戶的手機掃描完成頁面中的二維碼以后,頁面會自動跳轉。
場景3:在類似聊天室的環境中有任何人發言,所有登錄用戶都可以即時看見信息。
與傳統的MVC模型請求必須從客戶端發起由服務器響應相比,使用反向Ajax能夠模擬服務器端主動向客戶端推送事件從而提高用戶體驗。本文將分兩個部分討論反向Ajax技術,包括:Comet和WebSocket。文章旨在演示如何實現以上兩種技術手段,Struts2或SpringMVC中的應用并未涉及。此外,Servlet的配置也采用注解的方式,相關知識大家可以參考其它資料。
一、Comet(最佳的兼容手段)
Comet本質上則是這樣的一種概念:能夠從服務器端向客戶端發送數據。在一個標準的 HTTP Ajax 請求中,數據是發送給服務器端的,反向 Ajax 以某些特定的方式來模擬發出一個 Ajax 請求,這樣的話,服務器就可以盡可能快地向客戶端發送事件。由于普通HTTP請求往往會伴隨頁面的跳轉,而推送事件則需要瀏覽器停留在同一個頁面或者框架下,因此Comet的實現只能夠通過Ajax來完成。
它的實現過程如下:頁面加載的時候隨即向服務器發送一條Ajax請求,服務器端獲取請求并將它保存在一個線程安全的容器中(通常為隊列)。同時服務器端仍然可以正常響應其他請求。當需要推送的事件到來的時候,服務器遍歷容器中的請求在返回應答后刪除。于是所有停留在頁面中的瀏覽器都會獲得該應答,并再次發送Ajax請求,重復上述過程。
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE html><html lang="en"><base href="<%=basePath%>"><head><title>WebSocket</title><script type="text/javascript" src="static/jquery-1.9.1.min.js"></script><script type="text/javascript">$(function() {connect();$("#btn").click(function() {var value = $("#message").val();$.ajax({url : "longpolling?method=onMessage&msg=" + value,cache : false,dataType : "text",success : function(data) {}});});});function connect() {$.ajax({url : "longpolling?method=onOpen",cache : false,dataType : "text",success : function(data) {connect();alert(data);}});}</script></head><body><h1>LongPolling</h1><input type="text" id="message" /><input type="button" id="btn" value="發送" /></body></html>
新聞熱點
疑難解答
圖片精選