BlogJava-BeanSoft's Java Blog-随笔分类-AJAX

转载：[原创/整理]首次发布DWR中文文档.PDF

BeanSoft — Fri, 25 Apr 2008 10:02:00 GMT

[原创/整理]首次发布DWR中文文档.PDF

v0.9 点击下载

有些错别字，我会在以后版本更正
http://www.blogjava.net/jorwen/archive/2007/02/08/98857.html

BeanSoft 2008-04-25 18:02 发表评论

推荐Ext的教程：ExtJS2.0实用简明教程

BeanSoft — Sun, 13 Apr 2008 02:03:00 GMT

有人询问除了Ext Grid视频教程之外的基础教程，本着不重复发明轮子的原则，特意推荐开源框架EasyJWeb的成员之一冷雨制作的文章，适合入门学习。特此转载，出处：http://www.easyjf.com/blog/html/20080217/1179671.html

ExtJS2.0实用简明教程

序
ExtJS简介
开始ExtJS
获得ExtJS
应用ExtJS
ExtJS版的Hello
Ext框架基础及核心简介
Ext类库简介
ExtJS的组件
组件的使用
组件的配置属性
事件处理
使用面板
Panel
工具栏Toolbar
选项面板TabPanel
视图区ViewPort
窗口Window及对话框MessageBox
窗口基本应用
窗口分组
对话框
布局layout
布局概述
Border区域布局
Column列布局
Fit布局
Form布局
Accordion布局
Card布局
Table布局及其它布局
使用表格控件Grid
基本表格GridPanel
可编辑的表格EditorGridPanel
与服务器交互
数据存储Stroe
Stroe
DataReader
DataProxy与自定义Store

使用树控件TreePanel
TreePanel基本使用
 TreeNode
TreeLoader
自定义TreeLoader

使用表单Forms
FormPanel基本应用
FieldSet
基本Field
ComboBox
DateField
TimeField
HtmlEditor
拖放(DD)
拖放的基本应用
DD
DDTarget
实用工具(Util)
Ext类
Ext.Ajax类
Ext.util.Format类
Date扩展
String扩展
Function扩展
其它

BeanSoft 2008-04-13 10:03 发表评论

分享两个小代码：ibatis简单示例和在浏览器中同时选中多文件上传

BeanSoft — Wed, 02 Apr 2008 04:55:00 GMT

本文代码一概以不担保，免责（也就是不管你遇到任何问题，都与本人无关）的方式提供，内容仅供参考。

友情提示 : 下载微软网盘文件时关闭下载工具 , 否则你将得到错误的文件 , 双击 EXE 会出来 DOS 窗口 . 正确操作是点击文件名后能看到显示下载链接和文件大小等信息 .

http://cid-519b3f7aa2172030.skydrive.live.com/self.aspx/Public/ibatis/ibatis.zip IMB 这是个我写的iBATIS的入门单表映射例子，MySQL开发，注释完整，表还是我常用的那个 Student.

示例文件：

    PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN"
    "http://ibatis.apache.org/dtd/sql-map-2.dtd">

    insert into Student (
      username,
      password,
      age )
    values (
      #username#, #password#, #age#
    )

    update Student set
      username = #username#,
      password = #password#,
      age = #age#
    where
      ID = #id#

    delete from Student where ID = #id#

另外，做开发时经常有人希望能在浏览器中一次选中多个文件然后上传（注意是在文件打开框里选中多个，不是一次选一个那种），还带上传队列和进度条。不过这个使用HTML自带的File组件是办不到的，可以使用Applet，或者SWF，或者IE插件来实现。有个开源的是FancyUpload，用SWF实现的。大家可以自己去看例子http://digitarald.de/playground/uplooad.html 官方站点 http://digitarald.de/project/fancyupload/

JavaEye上有人把完整代码做了个例子提供下载，并写了个说明，参考：http://www.javaeye.com/topic/144518 Ajax+Flash多文件上传之FancyUpload的应用，尊重作者，这第二个代码是原作者写的，我只是转载，欢迎阅读原文获得信息。

http://cid-519b3f7aa2172030.skydrive.live.com/self.aspx/Public/AJAX/fancyupload.rar 21KB

运行效果示例：

附送美女一张（好像是大旗网的）：

http://image1.daqi.com/pic_search/original/26956/5927cb911989eaf46bd378c75f6b46e7.jpg 点击看大图

BeanSoft 2008-04-02 12:55 发表评论

AJAX 入门视频之 Ext 2.0.1 Grid 增删改 & DWR 1 实例

BeanSoft — Sun, 27 Jan 2008 11:34:00 GMT

说实话, 我也是特别懒的人, 很早就想看看 Ext, 尤其是做一个实时编辑的带后台的表格例子, 一直没能深入, 今天抽时间深入看了看 Ext 的 EditorGrid,可编辑的表格控件,总算凑出来了个实时增删改的例子(不单独弹出添加对话框的那种),带用DWR 1 (不用DWR 2 是因为2个头太大了)开发的后台服务器端,没有整合Spring,JPA啊,Struts,Hibernate等等的流感框架, 这样总的代码非常的小,省得当大家接触到了一些大量的自己不熟悉的框架的时候会产生发晕的感觉,而且那样下来整个例子的源码会远远超过1MB,发布的包更是估计要超过5MB了. 在此之前上网找了好多资料, 然而大部分都是基于 Ext 1 开发, 而 2.0 的呢, 大多又找不到源码下载, 而且其类库比较复杂, 所以今天做它是花了一番功夫,不过当最后的结果出来后, 一切辛苦都显的那么值得了, 学技术,归根到底就是一种学习和总结的能力,您觉得是不是呢(我说的不是发明技术,那个我做不来)?

广告: 如果您或者您所在公司需要 Java EE 或者 AJAX 方面的技术顾问或者培训服务,欢迎联系本人!

您可以查看在线演示(不带服务器端代码): http://beansoft.java-cn.org/ajax/extgrid/

源代码下载(带完整注释): http://beansoft.java-cn.org/ajax/extgrid/extdwrgrid.zip 778 KB

视频下载: http://beansoft.java-cn.org/ajax/extgrid/ext.exe 16.1 MB 43分44秒

运行效果:

服务器的输出:

添加用户新用户3, 地区:北京
修改用户 4的字段:area, 值为:河南南阳
修改用户 1的字段:email, 值为:beansoft@126.com22
修改用户 3的字段:email, 值为:aa@bb.com22
删除用户 2

核心的代码(无DWR部分,便于大家自测,注意先把Ext类库所在的目录改对了就可以了):

页面的(注意编码是 UTF-8):

表格编辑器示例

Ext 2.0 & DWR 1表格实时编辑器示例(无Java服务器端)

这个例子展示了如何创建可编辑的表格控件.

注意脚本没有压缩, 因此便于读者阅读. 点击浏览 edit-gridnojava.js.

表格的数据文件加载自 users.xml.

作者: 刘长炯

邮件: beansoft@126.com

博客: http://beansoft.blogjava.net/">http://beansoft.blogjava.net/

2008-01-27

本页面和JS的编码都是 UTF-8.

CSS(自己把图放进去就好了) editor-grid2.css:

/** 定义了一些工具栏按钮的 CSS 样式 */
.add {
background-image:url(./images/add.gif) !important;
}

.remove {
background-image:url(./images/delete.gif) !important;
}

.details {
background-image:url(./images/details.gif) !important;
}

.user-delete {
background-image:url(./images/user_delete.gif) !important;
}

以及数据文件 users.xml

      1
    刘长炯
    河南南阳
    beansoft@126.com
    28
    true
    1980/01/01


    2
    BeanSoft
    北京
    beansoft@126.com
    28
    true
    1980/01/01


    3
    MM
    河北涿州
    aa@bb.com
    22
    false
    1985/01/01

后台的Java类,很简单的模拟数据库操作:

/**
* 基于 DWR 的用户管理类示例, 数据库操作和数据传输协议的选择可以根据情况自行加入,
* 推荐 JPA + JSON 或者 Hibernate + XML.
*
* @author BeanSoft
* 2008-01-27
*/
public class UserManager {
    private int counter = 3;
    /**
     * 虚拟的添加用户功能.
     * TODO: 封装并传递所有参数.
     * @param username 用户名
     * @param area 地区
     * @return 新的数据ID
     */
    public int addUser(String username, String area) {
        System.out.println("添加用户 " + username + ", 地区:" + area);
        return ++counter;
    }
    /**
     * 虚拟的删除用户操作.
     * @param userid 用户编号
     * @return 成功或者失败
     */
    public boolean removeUser(int userid) {
        System.out.println("删除用户 " + userid);
        return new java.util.Random().nextBoolean();
    }
    /**
     * 虚拟的修改用户操作.
     * @param userid 用户编号
     * @param field 改变的字段
     * @param newValue 新的取值
     * @return 是否更改成功
     */
    public boolean editUser(int userid, String field, String newValue) {
        System.out.println("修改用户 " + userid + "的字段:" + field + ", 值为:" + newValue);
        // 模拟网络延迟, 停2秒
        try {
            Thread.sleep(2000);
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return new java.util.Random().nextBoolean();
    }
    /**
     * 虚拟的删除所有用户的操作.
     * @return 是否成功
     */
    public boolean removeAllUser() {
        return new java.util.Random().nextBoolean();
    }
}

DWR的配置文件 dwr.xml:

"http://www.getahead.ltd.uk/dwr/dwr10.dtd">

import java.util.*;
import uk.ltd.getahead.testdwr.*;

]]>

最后,核心的 JS 文件

edit-gridnojava.js

/*
* Ext JS Library 2.0.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

/**
* 无 DWR Java 后台静态页面演示版本.
* 简体中文 Demo 制作: 刘长炯 beansoft@126.com
* http://beansoft.blogjava.net/
*/

Ext.onReady(function(){
Ext.QuickTips.init();

    // 格式化日期显示
    function formatDate(value){
        return value ? value.dateFormat('Y, M d') : '';
    }
    // 格式化性别显示,这是个 renderer, 渲染器
    function formatSex(value) {
        return value ? "男" : "女";
    }
    // 弄个缩写的别名
    var fm = Ext.form;

    // 列模型定义了表格所有列的信息,
    // dataIndex 将特定的列映射到数据源(Data Store)中的数据列(在后面创建)
    var cm = new Ext.grid.ColumnModel([
            {
           id:'id',
           header: "编号",
           dataIndex: 'id',
           width: 50
        },
        {
           id:'name',
           header: "用户名",
           dataIndex: 'name',
           width: 250,
           editor: new fm.TextField({
               allowBlank: false// 不能为空
           })
        },
        {
           header: "地区",
           dataIndex: 'area',
           width: 100,
           editor: new Ext.form.ComboBox({
               typeAhead: true,
               triggerAction: 'all',
               transform:'area',// 对应的选择框的ID
               lazyRender:true,
               listClass: 'x-combo-list-small'
            })
        },
        {
           header: "电子邮件",
           dataIndex: 'email',
           width: 220,
           align: 'left',
           editor: new fm.TextField({
               allowBlank: true
           })
        },
        {
           header: "年龄",
           dataIndex: 'age',
           width: 70,
           align: 'right',
           editor: new fm.NumberField({
               allowBlank: true,
               allowNegative: false,
               maxValue: 100
           })
        },
        {
           header: "生日",
           dataIndex: 'birthDay',
           width: 95,
           renderer: formatDate,
           editor: new fm.DateField({
                format: 'y/m/d',
                minValue: '1970/01/01',//最小值
                disabledDays: [0, 6],// 禁止选择的日期
                disabledDaysText: '不许周末出生孩子'
            })
        },
        {
           header: "性别",
           dataIndex: 'sex',
           width: 95,
           renderer: formatSex,
           editor: new fm.Checkbox()
        }
    ]);

// 默认情况下列是可排序的
cm.defaultSortable = true;

    // 定义一个用户对象,这样便于我们动态的添加记录,虽然也可以设置成匿名内置对象
    var User = Ext.data.Record.create([
           // 下面的 "name" 匹配读到的标签名称, 除了 "birthDay",它被映射到标签 "birth"
           {name: 'id', type: 'int' },
           {name: 'name', type: 'string'},
           {name: 'area'},
           {name: 'email', type: 'string'},
           {name: 'age', type: 'int'},             // automatic date conversions
           {name: 'birthDay', mapping: 'birth', type: 'date', dateFormat: 'Y/m/d'},
           {name: 'sex', type: 'bool'}
      ]);

    // 创建 Data Store
    var store = new Ext.data.Store({
        // 使用 HTTP 加载
        url: 'users.xml',

        // 因为返回值是 XML, 所以我们创建一个解析器
        reader: new Ext.data.XmlReader({
               // 记录必须包含 "user" 标签
               record: 'user'
           }, User),

sortInfo:{field:'name', direction:'ASC'}// 排序信息
});

    // 创建编辑器表格
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'editor-grid',
        width:800,
        height:300,
        autoExpandColumn:'name',
        title:'用户管理',// 标题
        frame:true,
        clicksToEdit:1,//设置点击几次才可编辑
        selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//设置单行选中模式, 否则将无法删除数据

        // 顶部工具栏按钮
        tbar: [
        {
            text: '添加用户',
            iconCls:'add',//按钮图标的CSS名称
            handler : function(){// 点击按钮执行的操作
                var n = grid.getStore().getCount();// 获得总行数
                var p = new User({
                    id: n + 1,
                    name: '新用户' + n,
                    area: '北京',
                    email: 'beansoft@126.com',
                    age: 20,
                    birthDay: (new Date()).clearTime(),
                    sex: true
                });
                grid.stopEditing();// 停止编辑
                store.insert(n, p);// 插入到最后一行
                grid.startEditing(n, 1);// 开始编辑1单元格
            }
        },
        {
            text: '查看所选',
            iconCls: 'details',
            handler : function(){
                var recordtoedit = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
                if(recordtoedit) {
                    Ext.Msg.alert('查看选中', "您现在选中的用户其名字为:" + recordtoedit.get("name"));// 取得用户名
                    // alert("您现在选中的用户其名字为:" + recordtoedit.get("name"));
                }
            }
        },
        {
            text: '删除所选',
            iconCls:'remove',
            handler : function(){
                var record = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
                if(!record){
                    Ext.Msg.alert("提示","请先选择要删除的行!");
                    return;
                }
                // 弹出对话框警告
                if(record) {
                    Ext.MessageBox.confirm('确认删除',
                        '你真的要删除所选用户吗?',
                        function(btn) {
                         if(btn == 'yes') {// 选中了是按钮
                             // 更新界面, 来真正删除数据
                             store.remove(record);
                         }
                        }
                    );
                }
            }
        },
        {
            text: '删除所有',
            iconCls: 'user-delete',
            handler : function(){
                Ext.MessageBox.confirm('确认删除',
                        '你真的要删除所有用户信息吗?',
                        function(btn) {
                         if(btn == 'yes') {// 选中了是按钮
                             // 更新界面, 来真正删除数据
                             store.removeAll();
                         }
                        }
                    );
            }
        }
        ]
    });

    // 单元格编辑后事件处理
    grid.on("afteredit", afterEdit, grid);
    // 事件处理函数
    function afterEdit(e) {
        var record = e.record;// 被编辑的记录
        // 显示等待对话框
        Ext.Msg.wait("请等候", "修改中", "操作进行中...");

          // 更新界面, 来真正删除数据
            Ext.Msg.alert('您成功修改了用户信息', "被修改的用户是:" + e.record.get("name") + "\n 修改的字段是:"
            + e.field);// 取得用户名
    };

// 触发数据加载
store.load();
});

BeanSoft 2008-01-27 19:34 发表评论

翻译: MyEclipse AJAX 调试教程(含官方视频)

BeanSoft — Thu, 22 Nov 2007 15:52:00 GMT

这是 MyEclipse 帮助文档中的内容的翻译, 点击菜单 Help -> Contents 可以看到 MyEclipse 的全部英文帮助文档.

在线阅读(完整内容含 Flash 动画): http://beansoft.java-cn.org/myeclipse_doc_cn/ajaxtutorial/

下载: http://cid-519b3f7aa2172030.skydrive.live.com/self.aspx/Public/MyEclipse中文文档/ajaxtutorial.zip 1.53 MB

友情提示: 下载微软网盘文件时关闭下载工具, 否则你将得到错误的文件, 双击 EXE 会出来 DOS 窗口. 正确操作是点击文件名后能看到显示下载链接和文件大小等信息.

翻译: 刘长炯 BeanSoft@126.com
Blog: http://www.blogjava.net/beansoft/
日期: 2007-11-22
声明: 中文文字版权归刘长炯所有, 原文及相关的图片等资源的版权归原作者 Genuitec L.L.C 公司所有.

BeanSoft 的 AJAX 视频, 电子书集中下载

BeanSoft — Mon, 05 Nov 2007 01:30:00 GMT

BeanSoft 的 AJAX 视频, 电子书集中下载

陆续上传中, 请关注:

http://cid-519b3f7aa2172030.skydrive.live.com/browse.aspx/Public/AJAX

BeanSoft 2007-11-05 09:30 发表评论

改进后的第一次访问弹出欢迎仿MSN通知的代码

BeanSoft — Fri, 26 Oct 2007 03:06:00 GMT

每次访问都弹出有点太扰民了, 而且导致鼠标滚轮不可用. 现在改成访问时只在第一次弹出一次. 用 cookie 做判断.

BeanSoft 2007-10-26 11:06 发表评论

页面外仿 MSN 弹出提示信息的脚本改进版(仅能在IE下运行!) + 页面内完美仿MSN右下角弹出广告附带关闭按钮(支持多种浏览器)

BeanSoft — Thu, 18 Oct 2007 15:03:00 GMT

从网上找的版本呢, 有白边. 今天花时间改进了一下, 效果打开页面的时候你就应该看到了. 如果配合 AJAX 做基于网页版 Outlook 通知的话会有一点点用. 首先感谢最初的原作者(转载的太多了, 找不到了).

显示效果:

其实有人做的有更好的版本, 参考这里(也是仅支持IE的):
Web的桌面提醒（Popup）效果演示: http://webuc.net/MyProject/Popup/popup.htm
下载: http://webuc.net/MyProject/Popup/popup.rar

< SCRIPT >
var oPopup;
try {
oPopup = window.createPopup();
} catch (e) {
window.status = '弹出通知消息仅能用于 IE 下 ! ';
}

var popTop = 10 ;
var mytime;

function popmsg(msgstr){
if ( ! oPopup) {
return ;
}
oPopup.document.body.innerHTML = msgstr;
popshow();
}

function popshow(){
// window.status=popTop;
if (popTop > 1720 ){
clearTimeout(mytime);
oPopup.hide();
return ;
} else if (popTop >= 1720 - 108 && popTop <= 1720 ){
oPopup.show(screen.width - 200 ,screen.height, 193 , 1720 - popTop);
} else if (popTop >= 1500 && popTop < 1720 - 108 ){
oPopup.show(screen.width - 200 , screen.height - 220 + (popTop - 1500 ), 193 , 108 );
} else if (popTop <= 108 ){
oPopup.show(screen.width - 200 , screen.height, 193 , popTop);
}
else if (popTop <= 220 ){
oPopup.show(screen.width - 200 , screen.height - popTop, 193 , 108 );
} else {
// window.status=popTop + " else";
oPopup.show(screen.width - 200 , screen.height - 220 , 193 , 108 );
}

popTop += 10 ;
mytime = setTimeout( " popshow(); " , 40 );
}

function hidePop() {
clearTimeout(mytime);
oPopup.hide();
}

popmsg( "

BlogJava 系统消息

请留言或者捐款支持 BeanSoft 的 Java EE 学习视频, 谢谢 !!

" );

SCRIPT >

最后来一个支持页面内的跨浏览器的:

完美仿MSN右下角弹出广告代码并可自动消失,附带关闭按钮.

先飞电脑技术网

	网站温馨提示：	×
http://pic.tianyaclub.com/images/windty_bg.jpg'); padding-right: 1px; padding-bottom: 1px" colSpan=3 height=90> 先飞电脑技术网全新改版，免费精品网络资源，你用了吗？ http://www.xfbbs.com" target="_blank"> 进入网站浏览

BeanSoft 2007-10-18 23:03 发表评论

最简单的 AJAX 例子代码(完整注释)

BeanSoft — Fri, 12 Oct 2007 05:19:00 GMT

"button" onclick="ajaxTest()" value="AJAX测试">

"button" onclick=" document.getElementById('weather').innerHTML='' " value="隐藏">



"weather">

BeanSoft 2007-10-12 13:19 发表评论

Instant Source 实时 IE HTML 源码查看(视频讲解)

BeanSoft — Sun, 23 Sep 2007 16:07:00 GMT

软件下载请看这里: Instant Source 2003 1.44 汉化版

Instant Source - the first real-time HTML source viewer and editor.
测试过的浏览器: IE 5,6,7
这是一个IE浏览器插件，主要功能是实时的查看和修改 HTML 网页上的源代码，当鼠标指向或选择网页的某一部分，即可在下方的窗口中快速看到网页的源代码，这对网页设计相关人员还是相当有用的。而且可以列出当前页面的所有源码(包括引用到的 JS, CSS 文件等)推荐使用！例如大家看到 Google 网页的时候, 想拿到他们的所有代码, 或者想看看某个控件的源码, 这时候就非常方便了, 第一个可以通过 "Display Entire Page(current State)"来看到, 第二个可以通过"Display Element Under Cursor"来看到. 同样, 也可以方便的来检测自己写的页面是否达到了预期的目的.
阅读全文

操作讲解视频:

http://download.gro.clinux.org/beansoft/InstantSource.swf 1.45 MB

BeanSoft 2007-09-24 00:07 发表评论

几个比较好的 JavaScript UI 控件

BeanSoft — Sat, 22 Sep 2007 05:35:00 GMT

http://scbr.com/docs/products/dhtmlxGrid/

比较完毕的表格编辑系统, 支持 Editor, Renderer 等, OpenSource.

http://www.walterzorn.com/index.htm

JavaScript 向量图.

http://webfx.eae.net/

包括 Tab Pane, Tree, Menu, Table, Tooltip 等众多的 HTML 特效文章和作品下载(含源码).

BeanSoft 2007-09-22 13:35 发表评论

Custom Alert Demonstration

BeanSoft — Sat, 22 Sep 2007 04:22:00 GMT

http://slayeroffice.com/code/custom_alert/

Custom Alert Demonstration

This is a demonstration of how to over-ride the default window.alert method of a browser.

This was born from the design requirements of a recent project to have non-standard alerts to notify the user of a problem with data they had entered. The trick here was that all products use the same validation scripts, and not all of them fell under this requirement.

To modify the validation scripts to expect another argument that would have told it to use a DIV overlay or a standard alert would have proven difficult to implement and maintain. A co-worker (Dean) wondered out loud if it was possible to overload the alert method, and turns out - you can.

You can test the alert functionality with the following button. You can also type javascript:alert("Hello World"); from your browsers URL bar to see it work.

The markup for the above button is:

Psuedo-modality is achieved by using a 100% wide and 100% tall absolutely positioned DIV element that acts as the parent element of the custom alert. This DIV overlays everything on the page and prevents user interaction with elements other than the custom alert. Note that a 1x1 transparent png image is set as the background-image -- this prevents MSIE from allowing the parent DIV to be "hollow", which would defeat its purpose.

Only one alert can exist at a time -- the function will return if it detects the existence of a previous instance of the "modalContainer" parent element. Hitting the "Ok" button will remove the "modalContainer" element from the DOM along with its child elements and hand control of the page back to the user.

In browsers that support position:fixed, meaning all of them except MSIE, the alert will stay with the user as they scroll. Thanks to Kevin for the education on that property value.

This has been tested and verified to work in MSIE6, Firefox 1.0, Safari and Opera 7.1+.

Note: This is a demonstration only. I am not saying that this is a production worthy alternative to the default behavior of the window.alert method as it does not allow for true modality. I am only showing what is possible - implement at your own risk. Feel free to contact me with any suggestions.

Source:


// constants to define the title of the alert and button text.
var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";

// over-ride the alert method only if this a newer browser.
// Older browser will see standard alerts
if(document.getElementById) {
	window.alert = function(txt) {
		createCustomAlert(txt);
	}
}

function createCustomAlert(txt) {
	// shortcut reference to the document object
	d = document;

	// if the modalContainer object already exists in the DOM, bail out.
	if(d.getElementById("modalContainer")) return;

	// create the modalContainer div as a child of the BODY element
	mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
	mObj.id = "modalContainer";
	 // make sure its as tall as it needs to be to overlay all the content on the page
	mObj.style.height = document.documentElement.scrollHeight + "px";

	// create the DIV that will be the alert 
	alertObj = mObj.appendChild(d.createElement("div"));
	alertObj.id = "alertBox";
	// MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
	if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
	// center the alert box
	alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";

	// create an H1 element as the title bar
	h1 = alertObj.appendChild(d.createElement("h1"));
	h1.appendChild(d.createTextNode(ALERT_TITLE));

	// create a paragraph element to contain the txt argument
	msg = alertObj.appendChild(d.createElement("p"));
	msg.appendChild(d.createTextNode(txt));

	// create an anchor element to use as the confirmation button.
	btn = alertObj.appendChild(d.createElement("a"));
	btn.id = "closeBtn";
	btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
	btn.href = "#";
	// set up the onclick event to remove the alert when the anchor is clicked
	btn.onclick = function() { removeCustomAlert();return false; }

	
}

// removes the custom alert from the DOM
function removeCustomAlert() {
	document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}

Custom Alert Demonstration
version 1.0
last revision: 02.02.2005
steve@slayeroffice.com
http://slayeroffice.com

BeanSoft 2007-09-22 12:22 发表评论

AJAX In Action Download

BeanSoft — Sat, 22 Sep 2007 03:57:00 GMT

A good book as someone said.

Here:

http://keke.ersha.cn/ftp/linshi/AJAXInAction.pdf 9.96MB

BeanSoft 2007-09-22 11:57 发表评论

JSEclipse - 被 Adobe 收购的 Eclipse 下的 JavaScript 编辑工具

BeanSoft — Sat, 22 Sep 2007 03:37:00 GMT

http://labs.adobe.com/technologies/jseclipse/

JSEclipse

Update: JSEclipse prerelease 2 released on April 2, 2007. Get it now.

JSEclipse is a new plugin for the Eclipse environment that helps developers code JavaScript faster and with no errors. With JSEclipse, you can complete a variety of tasks, from editing small sections of code to working with the next big AJAX library or developing plug-ins for a product that embeds JavaScript snippets.

Download and install JSEclipse and improve your JavaScript coding experience with:

Contextual code completion & shortcuts.
Project outline and quick navigation through function declarations.
Syntax highlighting.
Error reporting.
Customizable code templates to get you started.
Support for popular JavaScript libraries (Dojo, Prototype, Spry, YUI, Qooxdoo).
Support for JavaDoc documentation and multi-line comments.
Adobe Flex Builder 2 compatibility.

Download and Discuss

For visual examples of how code completion, code templates, and JavaScript libraries (Ajax) features in JSEclipse behave, watch the streaming demonstration videos hosted on Labs.

Getting Started
Community
Product Details

Follow these steps to get started with the JSEclipse prerelease.

Prerequisites

In order to install and use JSEclipse, you need the following:

Hardware requirements: same as for Eclipse SDK.
The Eclipse SDK version 3.1 or higher
The Java Runtime Environment version 1.4 or higher
Approximately 2 MB of available disk space.

Installation

Download JSEclipse
Read the installation notes
Watch the demonstration videos for a tour of the features in JSEclipse.
Check out the JSEclipse online documentation for a detailed description of the features and installation process.
Join the discussion on the JSEclipse forum, where you can ask questions, discuss your experience, and give us your feedback.
Please note that your submission of comments, ideas, feature requests and techniques on this and other Adobe maintained forums, as well as Adobe's right to use such materials, is governed by the Terms of Use.

BeanSoft 2007-09-22 11:37 发表评论

AJAX Suggest Tutorial

BeanSoft — Sat, 22 Sep 2007 03:32:00 GMT

http://www.dynamicajax.com/fr/AJAX_Suggest_Tutorial-271_290_312.html

BeanSoft 2007-09-22 11:32 发表评论

JSDoc - JavaScript Documentation Tool

BeanSoft — Sat, 22 Sep 2007 03:23:00 GMT

http://jsdoc.sourceforge.net/

JSDoc - JavaScript Documentation Tool

Introduction

JSDoc is a tool that parses inline documentation in JavaScript source files, and produces an documentation of the JavaScript code. This is typically in the form of HTML (example), but XML and XMI (UML) export are also supported. JSDoc is based on the (very successful) javadoc tool that was created for the same purpose for the Java programming language.

JSDoc is primarily intended for libraries of object-oriented JavaScript files, although it also works with procedural code. There is a basic ability to determine inheritance built into the parser, although some more obscure dynamic constructs will not be understood (for example, defining a method to set one class as the superclass of another).

Anyone familiar with the javadoc tool will be able to use JSDoc right away; for anyone else it is a very simple matter to get started. JSDoc picks up on comments that are opened with a slash followed by two stars (/**), and closed with the typical star-slash (*/).

Top

Installation

JSDoc is implemented in Perl, as as such, requires the perl executable. This shouldn't be a problem for Linux/Unix users, but Windows users will probably have to install a perl runtime; ActivePerl is recommended.

JSDoc is distributed as a gzipped tarball, and can be downloaded from the JSDoc project page. Once you have downloaded JSDoc-x-x.tgz, just unpack it (tar zxf JSDoc-x-x.tgz on Linux/Unix, use WinZip on Windows), and you're ready to go. You can immediately try out JSDoc on the included test.js JavaScript file by going into the JSDoc directory and entering the command

                  perl jsdoc.pl test.js

This should output a set of HTML files in a directory called js_docs_out.

If you get an error message right away that looks something like

                  Can't locate HTML/Template.pm in @INC ......

then you will need to install the HTML::Template Perl module. Luckily, this is a very trivial operation thanks to the CPAN. In a Linux/Unix/POSIX-style operating system, open a terminal and run the following command as root:

                  # perl -MCPAN -e 'install HTML::Template'

If you're running Windows and ActivePerl, open a command prompt window and enter the following command:

                  C:\> ppm

This will start the Perl Package Manager; at the PPM prompt, enter the following two commands (PPM> is the PPM prompt):

                  PPM> install HTML-Template
                  PPM> quit

JSDoc should run without problems now.

Top

Usage

The general idea of JSDoc is to pick up the form and documentation of code. A major part of JSDoc's functionality is based around documentation strings embedded in JavaScript code. The definitive reference to writing documentation strings for Java (with a large amount of carry-over to JSDoc) can be found at the javadoc reference page.

JSDoc currently supports a subset of javadoc's '@'-prefixed attributes, but the parser is customizable (as explained later). An example JavaScript file (test.js) is included with the JSDoc distribution. Most functionality of JSDoc can be seen within this script file, however for the impatient a small (and incomplete) example of a common usage of JSDoc is shown below

                  
                  /**
                   * Shape is an abstract base class. It is defined simply
                   * to have something to inherit from for geometric 
                   * subclasses
                   * @constructor
                   */
                   function Shape(color){
                     this.color = color;
                   }

                   // Bind the Shape_getColor method to the Shape class
                   Shape.prototype.getColor = Shape_getColor;
                    
                   /**
                    * Get the name of the color for this shape
                    * @returns A color string for this shape
                    */
                   function Shape_getColor(){
                     return this.color;
                   }
                    
                   /**
                    * Circle is a subclass of Shape
                    */
                   function Circle(radius){
                     this.radius = radius;
                   }
                    
                   /**
                    * A very rough value for pi
                    */
                   Circle.PI = 3.14;
                   
                   /**
                    * Get the radius of this circle 
                    * @returns The radius of this circle
                    */
                   function Circle_getRadius(){
                     return this.radius;
                   }
                  
                   // Circle is a subclass of Shape
                   Circle.prototype = new Shape(null);

One important difference between javadoc and JSDoc is that JSDoc deals with a much more dynamic language that javadoc. For example, in JavaScript there are many different ways to make one class a subclass of another. The JSDoc parser is able to catch some of these methods, but for particularly dynamic scripts the parser will not be able to do it all on its own. For that reason, JSDoc is customizable with a file called .jsdoc_config that resides in the JSDoc install directory. In this configuration file, JSDoc's behaviour can be customized for any kind of '@'-prefixed attribute. Although this configuration file actually contains Perl code, simple customizations can be done by someone with minimal experience with Perl.

JSDoc also uses a several non-javadoc '@'-attributes: @constructor and @private are two of the most important ones. As noted above, JavaScript has the capability to be a much more dynamic language than Java. The JSDoc parser can usually find class constructors on it's own, but there are some situations when it needs some additional assistance. For this reason, it is a good practice to always include the @constructor tag in the documentation for a class constructor, as shown below:

                  
                  /**
                   * Nothing is a class that represents nothing
                   * @constructor
                   */
                  function Nothing(){
                     // ... initialization ...
                  }

The @private attribute simply displays the marked method as being private.

To get more information on the use of the jsdoc.pl executable itself, run it with the --help commandline option.

Top

Tag Reference

The following is a summary of the supported tags ('@'-attributes) that are supported by JSDoc. For actual examples of the usage of these tags, please see the test.js JavaScript file that is included in the JSDoc distribution.

`@param`	Provide information about a function parameter. A datatype indicator can be added between curly braces with this tag, as follows: /** * @param {String} paramName This is a string parameter */
`@argument`	Synonym for `@param`
`@return`	Provide information about the return value of a function.
`@returns`	Synonym for `@return`
`@author`	Provide information about the author of a JavaScript file or a function.
`@deprecated`	Signify that a function or class is deprecated, and should not be used if possible.
`@see`	Link to another class or function that is of importance to the current class or function. This tag can take several forms. To link to another method within the same class: @see #methodName To link to another class: @see ClassName To link to a specific method of another class: @see ClassName#methodName
`@version`	Show the version number of the current file or class
`@requires`	Define a dependency upon another class. The syntax for this tag is as follows: @requires OtherClassName This is text to be shown
`@throws`	Show that a method can throw a certain type of exception. The syntax for this tag is: @throws ExceptionType This is the label text
`@exception`	Synonym for `@throws`
`@link`	This is a powerful tag that can be used to link to a large number of other pages. It is also the only tag that can be used in the description text of a documentation string before the '@'-tag section. The usage is very similar to that of the `@see` tag, but the entire tag is wrapped in curly braces. For example: /** * This utility method is also a member of the {@link String} class, * in the form of the {@link String#utility} method. */
`@fileoverview`	This is a special-use tag. If the first block of documentation in a file starts with a `@fileoverview` tag, the rest of the documentation block will be used to provide a file overview in the documentation.
`@class`	This tag is used in a constructor's documentation block to provide information about the actual class. The included documentation will then not be included in the constructor's documentation.
`@constructor`	Signify that a function is the constructor for a class.
`@type`	Show the return type of a function. For example: /** * This function returns a String. * @return The name of the current user * @type String */
`@extends`	Used to show that a class is a subclass of another class. JSDoc is often quite good at picking this up on its own, but in some situations this tag is required.
`@private`	Signify that a function or class is private. Private classes and functions will not be available in the documentation unless JSDoc is run with the `--private` commandline option.
`@final`	Flag a value as being a final (constant) value.
`@member`	Show that a function is a member of a given class: /** * @member MyClass */ function SomeFunc(){ }
`@ignore`	Tell JSDoc to totally ignore this method.
`@base`	Force JSDoc to view the current class constructor as a subclass of the class given as the value to this tag: /** * This is a subclass of Shape * @constructor * @base Shape */ function Circle(){ // ... }
`@exec`	*Experimental!* Force JSDoc to "execute" this method as part of its preprocessing step, in the same way that class contructors are executed. This can allow attributes to be added to a class from within a function.

Top

Frequently Asked Questions

I get an error message that says Can't locate HTML/Template.pm in @INC ....... What's going on?
This means that you don't have the HTML::Template perl module installed. Luckily, it's very easy to remedy this problem; see the Installation section of this page.
I've found a bug in JSDoc. What should I do?
Go to the JSDoc Project Page and register a bug report. You can also send information about the bug to the JSDoc-user mailing list. But just before you do that, please make sure that it's actually a bug that we're talking about, and not just JSDoc acting differently that what you were expecting.
JSDoc segfaults! What should I do?
This is a tough one to answer. JSDoc uses a lot of recursive regular expressions, and sometimes a certain combination of a certain build of perl and a certain JavaScript file will cause perl to segfault while running JSDoc. This problem mostly occurs with binary installations of perl; downloading the most recent source distribution of perl and building it on your own machine seems to solve this problem.
I want JSDoc to do X, but it doesn't!
Well, that's actually not a question, it's more of a statement. However, it is stated quite frequently, so it's not totally out of place here. If you're interested in having a new feature added to JSDoc, you can register a Feature Request at the JSDoc Project Page. You may also want to consider sending information about your request to the JSDoc-user mailing list.
Is there a mailing list for JSDoc?
Okay, I admit that this isn't actually a Frequently Asked Question; it's actually just an attempt to promote the JSDoc-user mailing list.
I want to help out with JSDoc. Where should I start?
First of all, help is very welcome! The most welcome kinds of help are context diffs that fix a bug in JSDoc, but pretty much anything that's an attempt at helping out is appreciated. Use the JSDoc-user mailing list.

Top

More Information

A very complete and informative article (written by Rainer Eschen) on the use of JSDoc can be found at Webetiser. The article is based on JSDoc 1.5, but is still very relevant. I've been told that the article will be updated in the near future.

As noted above, the definitive reference for writing Java docstrings can be found at the javadoc reference page. Please send comments, bugs, complaints, requests for additional information, and whatever else to the JSDoc mailing list.

Top

BeanSoft 2007-09-22 11:23 发表评论

AJAX 入门介绍 - (3) 整合 XML 和 DOM

BeanSoft — Wed, 23 May 2007 10:02:00 GMT

摘要: 阅读全文

BeanSoft 2007-05-23 18:02 发表评论

AJAX入门介绍 - (2) GET 和 POST 配合表单

BeanSoft — Wed, 23 May 2007 09:11:00 GMT

摘要: 阅读全文

BeanSoft 2007-05-23 17:11 发表评论

AJAX 入门培训 PPT 1.2 版本

BeanSoft — Wed, 16 May 2007 03:27:00 GMT

摘要: 阅读全文

BeanSoft 2007-05-16 11:27 发表评论

BlogJava-BeanSoft's Java Blog-随笔分类-AJAX

转载：[原创/整理]首次发布DWR中文文档.PDF

推荐Ext的教程：ExtJS2.0实用简明教程

分享两个小代码：ibatis简单示例和在浏览器中同时选中多文件上传

AJAX 入门视频之 Ext 2.0.1 Grid 增删改 & DWR 1 实例

Ext 2.0 & DWR 1表格实时编辑器示例(无Java服务器端)

翻译: MyEclipse AJAX 调试教程(含官方视频)

友情提示: 下载微软网盘文件时关闭下载工具, 否则你将得到错误的文件, 双击 EXE 会出来 DOS 窗口. 正确操作是点击文件名后能看到显示下载链接和文件大小等信息.

目录

BeanSoft 的 AJAX 视频, 电子书集中下载

改进后的第一次访问弹出欢迎仿MSN通知的代码

页面外仿 MSN 弹出提示信息的脚本改进版(仅能在IE下运行!) + 页面内完美仿MSN右下角弹出广告附带关闭按钮(支持多种浏览器)

最简单的 AJAX 例子代码(完整注释)

Instant Source 实时 IE HTML 源码查看(视频讲解)

几个比较好的 JavaScript UI 控件

Custom Alert Demonstration

Custom Alert Demonstration

Source:

AJAX In Action Download

JSEclipse - 被 Adobe 收购的 Eclipse 下的 JavaScript 编辑工具

JSEclipse

Download and Discuss

Prerequisites

Installation

AJAX Suggest Tutorial

JSDoc - JavaScript Documentation Tool

JSDoc - JavaScript Documentation Tool

AJAX 入门介绍 - (3) 整合 XML 和 DOM

AJAX入门介绍 - (2) GET 和 POST 配合表单

AJAX 入门培训 PPT 1.2 版本

推荐一些AJAX视频和文章

多看看别人的观点和思路...

推荐书籍: AJAX 快车道(Google搜索可得)