BlogJava-Terry.Li-彬-文章分类-Ajax

Ajax Session Timeout 超时处理

礼物 — Thu, 05 Dec 2013 08:11:00 GMT

/**
* Author : Larry Li
* Date : 2013-12-5
* Email : larry.li@aicent.com
*/
var Session = function() {
   var defaults = {
           title        : 'Session Notification',
           message      : 'Your session is about to expire.',
           keepAliveUrl : '/admin/session/keep-alive',
           redirUrl     : '/account/timed-out',
           logoutUrl    : '/account/logout',
           warnAfter    : 900000, // 15 minutes
           redirAfter   : 1200000 // 20 minutes
   };

   var o = defaults, dialogTimer, redirTimer;

   var controlRedirTimer = function(action) {
       switch(action) {
           case 'start':
               // Dialog has been shown, if no action taken during redir period, redirect
               redirTimer = setTimeout(function(){
                   window.location = o.redirUrl;
               }, o.redirAfter - o.warnAfter);
               break;

           case 'stop':
               clearTimeout(redirTimer);
               break;
           case 'restart':
               clearTimeout(redirTimer);
               redirTimer = setTimeout(function(){
                   window.location = o.redirUrl;
               }, o.redirAfter - o.warnAfter);
               break;
       }
   };

   var controlDialogTimer = function(action) {
       switch(action) {
           case 'start':
               dialogTimer = setTimeout(function(){
                   $('#sessionTimeout-dialog').modal('show');
                   controlRedirTimer('start');
               }, o.warnAfter);
               break;
           case 'stop':
               clearTimeout(dialogTimer);
               break;
           case 'restart':
               clearTimeout(dialogTimer);
               dialogTimer = setTimeout(function(){
                   $('#sessionTimeout-dialog').modal('show');
                   controlRedirTimer('restart');
               }, o.warnAfter);
               break;
       }
   };

   var doKeepAlive = function() {
       $.ajax({
           type: 'POST',
           url: o.keepAliveUrl,
           success: function() {
               // Stop redirect timer and restart warning timer
               controlRedirTimer('restart');
               controlDialogTimer('restart');
           }
       });
   };

   return {
       sessionTimeout: function(options) {
           if ( options ) { o = $.extend( defaults, options ); }

           var warning_dialog = '';

           $('body').append(warning_dialog);

           $('#sessionTimeout-dialog-logout').on('click', function () { window.location = o.logoutUrl; });

           $('#_close,#sessionTimeout-dialog-keepalive').click(function() {
               doKeepAlive();
           });
           // Begin warning period
           controlDialogTimer('start');
       },

       sessionTimeoutKeepAlive: function() {
           controlRedirTimer('restart');
           controlDialogTimer('restart');
       }
   };
}();

$(function() {
   Session.sessionTimeout({
       title: 'Session Timeout Notification',
       message: 'Your session is about to expire.',
       keepAliveUrl: contextPath + '/admin/session/keep-alive',
       redirUrl: contextPath + '/account/login',
       logoutUrl: contextPath + '/account/logout',
       warnAfter: 1500000,
       redirAfter: 1780000
   });

   $(document).ajaxComplete(function() {
       Session.sessionTimeoutKeepAlive();
   });
});

礼物 2013-12-05 16:11 发表评论

Ajax 特效应用30处

礼物 — Wed, 15 Jul 2009 03:53:00 GMT

1) noobSlide-
八种ajax实现的slide图片文字轮换缓冲滚动效果
演示http://efectorelativo.net/laboratory/noobSlide/sample.html

Checkout the Demo here.下载
2) Growl 2.0 with Mootools-
图层渐隐渐显效果

演示: 打开演示页，点击左侧Show Growl Smoke. Show Growl 即可看到效果
下载:

--------------------------------------------------------------------------------
3) Easiest Tooltip and Image Preview Using jQuery-鼠标移到连接对象上，滑出提示层效果

Live Demo演示

--------------------------------------------------------------------------------
4) Sliding top panel using mootools-仿flash的菜单移动效果

Live Demo演示

--------------------------------------------------------------------------------
5) Create a Slick Tabbed Content Area using CSS & jQuery-tab标签切换内容根据高度自动缓冲移动变化

Live Demo演示

--------------------------------------------------------------------------------
6) Custom JavaScript Dialog Boxes-ajax对话框效果，周围页面变灰白色

Live Demo演示
Download tutorial from Here下载

--------------------------------------------------------------------------------
7) Facebook Sliders With Mootools and CSS -
按钮拖动控制图片透明度高宽度

Checkout the Live Demo演示

--------------------------------------------------------------------------------
8 ) Making a Javascript Video Player-

Checkout the Demos here.

--------------------------------------------------------------------------------
9) Ajax mosaic builder-
无数张图片组合排列拼贴成一张图的效果

Checkout the Demo here.演示

--------------------------------------------------------------------------------
10) jQuery flipv()-
文字纵向排效果

Checkout the Demo here.演示
Download it from here.下载

--------------------------------------------------------------------------------
11) Drag. Drop. Lock.-
可拖动的层

Checkout the Live Demo演示

--------------------------------------------------------------------------------
12) WebAppers Simple Javascript Progress Bar with CSS-进度条点中间+ -按钮可以直接预览效果，

Checkout the Live Demo演示
Download it from here.下载

--------------------------------------------------------------------------------
13) moowheel-数据图标的动画显示效果
object.

Checkout the Live Demo演示

--------------------------------------------------------------------------------

--------------------------------------------------------------------------------
14) Sliding top panel using mootools-

Download tutorial from Here

--------------------------------------------------------------------------------
15) Mocha UI-ajax js仿windows桌面操作的效果，

Checkout the Demo here.演示

--------------------------------------------------------------------------------
16) ddMenu-
ajax实现右键菜单效果

Checkout the Demo here.演示
Download it from here.下载

--------------------------------------------------------------------------------
17) googleDrive-google地图小工具，实现小汽车在地图上行驶，用方向键控制车头必须朝向马路前方，往边上开就会开不下去。

--------------------------------------------------------------------------------
18) GlassBox-ajax实现类似vista系统窗口半透明的玻璃效果

Checkout the Demo here.演示
Download it from here.下载

--------------------------------------------------------------------------------
19) ProtoFlow-ajax相片展示效果，左右滚动并有倒影效果

Checkout the Demo here.演示
Download it from here.下载

--------------------------------------------------------------------------------
20) ASP.NET AJAX AutoComplete Control (Facebook look)-类似google搜索输入框,下拉显示相关关键字的效果，

Checkout the Demo here.演示
Download it from here.下载

--------------------------------------------------------------------------------
21) ADamnIT - JS error notification- A free reporting service that emails you when a JS error occurs in your webpages.页面js错误提示，点击按钮下方显示对话窗口

Checkout the Demo here.演示
Download it from here.下载

--------------------------------------------------------------------------------
22) Flexigrid-数据表格table 纵向的“列” 可以仿excel一样拖动

Checkout the Demo here.演示
Download it from here.下载

--------------------------------------------------------------------------------
23) prettyPhoto a jQuery lightbox clone-与现在流行的ligtbox 效果类似，点小图，大图弹出，周围页面变灰色半透明。

Checkout the Demo here.演示
Download it from here.下载

--------------------------------------------------------------------------------
24) JavaScript Color Fading Script-js实现颜色渐变动画效果，鼠标移到表格/文字上，颜色缓慢渐变，而不是一般css实现的颜色直接切换。

Checkout the Demo here.演示
Download it from here.下载

--------------------------------------------------------------------------------
25) Rotator-

Checkout the Demo here.
Download it from here.

--------------------------------------------------------------------------------
26) Kotatsu - a simple html table generator-

--------------------------------------------------------------------------------
27) jQuery virtual tour-js虚拟全景，360度环绕图片浏览，鼠标移到图片下方，显示左右及x停止按钮，

Checkout the Demo here.演示
Download it from here.下载

--------------------------------------------------------------------------------
28) Usable directory listings with a little Dojo-

Checkout the Demo here.
Download a zip of the header and .htaccess files here.

--------------------------------------------------------------------------------
29) Cuzillion’-简单的网页版dreamweaver，点击左侧列出的html元素,实时在中间的html代码部分显示，可以拖动改变元素所在位置跟属性,右侧点creat预览页面效果

--------------------------------------------------------------------------------
30) The Sliding date-picker-时间表，可以拖动选择特定时间段

Checkout the Demo here.演示
Download it from here.下载

礼物 2009-07-15 11:53 发表评论

DWR 入門與應用（三）

礼物 — Fri, 04 Apr 2008 03:37:00 GMT

來寫個AJAX版的聊天室吧！先看看直接使用AJAX要如何做到，首先需要一個簡單的聊天室Servlet…

package onlyfun.caterpillar;

             

            import java.io.IOException;

            import java.io.PrintWriter;

            import java.util.LinkedList;

            import java.util.List;

             

            import javax.servlet.ServletException;

            import javax.servlet.http.HttpServletRequest;

            import javax.servlet.http.HttpServletResponse;

             

            public class ChatRoomServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {

            private static LinkedList messages = new LinkedList();

            

            public ChatRoomServlet() {

            super(); 

            }

            

            private List addMessage(String text) {

            if (text != null && text.trim().length() > 0) {

            messages.addFirst(new Message(text));

            while (messages.size() > 10) {

            messages.removeLast();

            }

            }

             

            return messages;

            }

             

            private List getMessages() {

            return messages;

            }

            

            protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

            List list = null;

            

            if("send".equals(request.getParameter("task"))) {

            list = addMessage(request.getParameter("msg"));

            }

            else if("query".equals(request.getParameter("task"))){

            list = getMessages();

            }

             

            PrintWriter out = response.getWriter();

            response.setContentType("text/xml");

            response.setHeader("Cache-Control", "no-cache");

             

            out.println("");

            for(int i = 0; i < list.size(); i++) {

            String msg = list.get(i).getText();

            out.println("" + msg + "");

            }

            out.println("");

            }             

            }

Message物件如下…

package onlyfun.caterpillar;

             

            public class Message {

            private long id = System.currentTimeMillis();

            private String text;

            

            public Message(String newtext) {

            text = newtext;

            if (text.length() > 256) {

            text = text.substring(0, 256);

            }

            text = text.replace('<', '[');

            text = text.replace('&', '_');

            }

             

            public long getId() {

            return id;

            }

             

            public String getText() {

            return text;

            }

            }

Servlet接受訊息新增與查詢，判斷的方式是檢查請求參數task是send或query。

Servlet會以XML傳回目前List當中的訊息，客戶端可以查詢或插入新訊息時，取得目前List中的訊息，接著在web.xml中設定一下…

"1.0" encoding="UTF-8"?>

            "WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

            

            

            

            

            ChatRoomServlet

            ChatRoomServlet

            

            onlyfun.caterpillar.ChatRoomServlet

            

             

            

            ChatRoomServlet

            /ChatRoomServlet

            

            

            

            30

在網頁中，使用者可以在輸入訊息後按下按鈕送出資訊，並在XML回應取得時，將訊息以一列一列的表格方式顯示出來，另外還設定了週期性的輪詢，即使不輸入新訊息，也可以週期性的取得新的聊天訊息…

"-//W3C//DTD HTML 4.01 Transitional//EN">

"Content-Type" content="text/html; charset=BIG5">
Chat Room

Your Message:
"text"/>
"button" value="Send"
onclick="sendMessage()"/>

Messages:

"left">
"dynamicUpdateArea">

簡單抓個畫面…

直接用AJAX，後端用JSP/Servlet，您要對請求參數做些判斷，看看是新增訊息或查詢，並要自行輸出XML，有的沒的…

改成DWR的話，就很簡單了，寫個簡單的Java物件…

package onlyfun.caterpillar;

             

            import java.util.LinkedList;

            import java.util.List;

             

            public class Chat {

            private static LinkedList messages = new LinkedList();

             

            public List addMessage(String text) {

            if (text != null && text.trim().length() > 0) {

            messages.addFirst(new Message(text));

            while (messages.size() > 10) {

            messages.removeLast();

            }

            }

            

            return messages;

            }

             

            public List getMessages() {

            return messages;

            }

            }

接著…在dwr.xml中開放一下…

"1.0" encoding="UTF-8"?>

            "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

            

            

            

             

            "new" javascript="Chat">

            "class" value="onlyfun.caterpillar.Chat"/>

            

            

            "bean" match="onlyfun.caterpillar.Message"/>

使用者取得訊息時，是直接傳回List物件，而List中裝的是Message物件，Message物件是自訂物件，conterver設定為 bean，表示DWR會自動將Message的getter名稱轉換為傳回客戶端的JavaScript物件中的屬性，例如Message中有 getText()，則在客戶端可以用message.text這樣的方式來存取。

接著是簡單的客戶端網頁…

"-//W3C//DTD HTML 4.01 Transitional//EN">

"Content-Type" content="text/html; charset=BIG5">
Insert title here

Your Message:
"text"/>
"button" value="Send"
onclick="sendMessage()"/>

Messages:

"chatlog">

當List物件傳回時，它成為gotMessages(messages)中的messages物件，而messages物件中包括 Message物件轉換後對應的JavaScript物件，由於我們已經設定了Converter，所以可以用messages[data].text來取得傳回的訊息…

簡單抓個畫面…

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1311605

礼物 2008-04-04 11:37 发表评论

Ajax基本原理

礼物 — Sun, 11 Nov 2007 06:07:00 GMT

Ajax基本原理

摘要：本文介绍了Ajax的基本原理，交互过程和与之相关的技术及简单的实现方法，在此基础上给出了一个完整的实例，以使得能够对Ajax有一个更清楚的理解。

关键字：Ajax，JavaScript，DOM，无刷新页面，不完全刷新

引言

计算机桌面应用使我们得以用以前不能想象的方式处理大量的复杂数据；基于计算机网络的C/S模式应用使得共享数据和资源成为现实。然而，正如C/S模式的应用是由于人们不满足单机的桌面应用一样，人们对C/S模式也心存抱怨了：C/S模式除了带给我们数据和资源共享的便利之外，也给我们带来了令我们（程序开发设计人员）和客户头疼的部署和发布问题。于是，B/S模式应用应运而生，而且得到了迅速的发展。B/S模式应用符合一定规范的浏览器作为通用客户端，从而解决了C/S模式中最令人头疼的部署和发布问题。但是，到此并没有结束，B/S虽然解决了应用的部署和发布问题，却因为种种限制，使得应用没有了以前丰富的交互，并且每次与服务器的交互都要完全刷新页面，这是非常糟糕和令人不快的。本文讨论了如何解决页面完全刷新和缺乏交互性的问题，我们用的方法就是――Ajax。

Ajax

那么，Ajax到底是什么呢？Ajax（Asynchronous JavaScript + XML），即异步JavaScript + XML的缩写，这只是最初的观点，最初由Jesse James Garrett创造出来的。但是，Ajax现在的覆盖面已经有了进一步的扩展，把允许浏览器与服务器通信而无需刷新当前页面的技术都涵盖在其中了。

坦率的讲，Ajax并不是什么新鲜玩艺。也就是说，Ajax并不是一种全新的技术，而更像一种技巧，是把过去的几种技术巧妙结合的技巧。真正与Ajax相关的新名词应该是XMLHttpRequest――一个最早在IE 5中出现，最近开始在多数浏览器得到支持的用来实现异步通信的对象。正如前面所说，B/S模式是利用浏览器作为其通用的客户端，所以要想异步通讯成为可能，必须要得到浏览器的支持。如果不是有了浏览器对XMLHttpRequest对象的广泛支持，我们可能不会看到Ajax的今天，更不会看到许多对Ajax的著名应用，如Google Map，Google Suggest，Ta-da List等。

Ajax的处理过程是怎样的呢？下图为Ajax应用的标准处理模式。

数据库

XHR

事件

Function callback()

{//……}

服务器资源

1

2

6

3

5

4

图 1 标准Ajax处理过程

从图中我们可以看出：由事件触发，创建一个XMLHttpRequest对象，把HTTP方法（Get/Post）和目标URL以及请求返回后的回调函数设置到XMLHttpRequest对象，通过XMLHttpRequest向服务器发送请求，请求发送后继续响应用户的界面交互，只有等到请求真正从服务器返回的时候才调用callback()函数，对响应数据进行处理。

在这个交互过程中，涉及到几种我们不得不提的技术：

1． XHTML和CSS――用来使表现标准化；

2．DOM――动态的修改文档的内容和结构；

3．XML――进行数据的交换和处理；

4．JavaScript――对上述几种技术进行绑定，使其成为协同工作的整体。

Ajax相关技术及基本原理

1．XMLHttpRequest简介

XMLHttpRequest，是我们得以实现异步通讯的根本。最早在IE 5 中以ActiveX组件实现；最近，Mozilla 1.0和Safari 1.2中实现为本地对象。XMLHttpRequest虽然不是W3C标准，但却得到了FireFox、Safari、Opera、Konqueror、IE等绝大多数浏览器的支持。这就使得Ajax有了今天如火如荼的发展。

用XMLHttpRequest进行异步通讯，首先必须用JavaScript创建一个XMLHttpRequest对象实例。创建XMLHttpRequest对象实例的代码清单如下所示：

var xmlHttp;

function createXMLHttpRequest(){

if(window.ActiveXObject){

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else if(window.XMLHttpRequest){

xmlHttp = new XMLHttpRequest();

}

可以看出，创建XMLHttpRequest对象相当容易。首先，声明一个全局变量xmlHttp用来保存即将创建的XMLHttpRequest对象的引用；然后，在createXMLHttpRequest()方法中完成具体创建工作。因为IE与其他浏览器对XMLHttpRequest 对象的实现方法不同，因此在创建时，通过一个分支语句进行判断。如果window.ActiveXObject调用返回true，则证明为IE浏览器，那么就通过传递“Microsoft.XMLHTTP”给ActiveXObject()来创建XMLHttpRequest对象，否则就把XMLHttpRequest实现为本地JavaScript对象。XMLHttpRequest对象在不同浏览器上的实现是兼容的，所以可以用同样的方法访问XMLHttpRequest的方法和属性。

表 1 标准XMLHttpRequest方法

方法

说明

abort()

getAllResponseHeader()

getResponseHeader("Header")

open("method", "url")

send(content)

setRequestHeader("header", "value")

停止当前请求

把HTTP请求的所有响应头部作为键/值对返回

返回指定首部的串值

建立对服务器的调用

向服务器发送请求

把指定首部设置为所提供的值

表 2 标准XMLHttpRequest属性

属性

说明

onreadystatechange

readyState

responseText

responseXML

status

statusText

每个状态改变都会触发这个事件处理器

请求的状态：0－未初始化，1－正在加载，2－已加载，3－交互中，4－完成

服务器的响应，表示为一个文本字符串值

服务器的响应，表示为一个XML

服务器的HTTP状态码

HTTP状态码的相应文本

2．利用XMLHttpRequest对象发送简单请求

创建了XMLHttpRequest对象，并了解了XMLHttpRequest对象的方法和属性之后，让我们来看看怎样利用XMLHttpRequest对象发送简单的请求。利用XMLHttpRequest对象发送简单请求的基本步骤如下：

1）创建XMLHttpRequest对象实例。

2）设定XMLHttpRequest对象的回调函数，利用onreadystatechange属性。

3）设定请求属性：设定HTTP方法（GET或POST）；设定目标URL。利用open()方法。

4）将请求发送给服务器。利用send()方法。

3．利用DOM对服务器响应进行处理

前面已经设置了回调函数，回调函数正是用来处理服务器响应信息的。但是，别忘了我们的最终目的：解决页面完全刷新和缺乏交互性的问题。在服务器对我们的请求信息作出响应后，我们就得实现页面的无缝更新（就是无闪烁的更新信息）。要实现这一点，那么就不得不提到DOM了。

DOM（Document Object Model）,文档对象模型，是以面向对象方式描述页面文档的对象模型。DOM中定义了，与平台和语言无关的，用来表示和修改文档所需的对象、以及这些对象的属性和方法。通过DOM，我们可以把页面上的数据和结构抽象成一个树型表示，进而可以通过DOM中定义的属性和方法对文档进行操作，如遍历、编辑等。

这样，服务器相应信息就可以通过DOM的方法和属性，动态的更新到页面的相应节点。

从而使用户感觉不到刷新过程的存在，提高了交互性。

4．一个完整的例子

在这里我们给出一个完整的利用Ajax的实例。实例包含两个文件：Request.htm和Response.xml。通过Request.htm向服务器发送请求，而Response.xml模仿了从服务器返回的响应。两个文件清单如下：

Ajax</span><span style="font-family: 宋体">应用实例

Ajax应用实例

辽宁河北天津

山东江苏

浙江福建广东

广西海南上海

台湾香港澳门

小结

我们已经了解了Ajax的基本原理和相关的技术。其实，Ajax就是通过JavaScript创建XMLHttpRequest对象，再由JavaScript调用XMLHttpRequest对象的方法完成异步通信；然后，再由JavaScript通过DOM的属性和方法，完成页面的不完全刷新。

参考文献

1．Ryan Asleson , Nathaniel T.Schutta 著金灵等译《Ajax基础教程人民邮电出版社

2．张晓龙基于Ajax的web应用《电脑开发与应用》第19卷第8期 17～18页

3．史胜辉 Ajax技术在WEB客户端开发中的应用《中国管理信息化》2006年6月第9卷第6期 88～90页

礼物 2007-11-11 14:07 发表评论

Ajax 和 XML: 五种 Ajax 反模式

礼物 — Sun, 04 Nov 2007 16:15:00 GMT

摘要: Ajax 和 XML: 五种 Ajax 反模式避免常见的 Ajax 代码陷阱 ... 阅读全文

礼物 2007-11-05 00:15 发表评论