BlogJava-飞鸟JAVA-文章分类-AJAXhttp://www.blogjava.net/yczz/category/11244.htmlzh-cnFri, 14 Dec 2007 17:18:42 GMTFri, 14 Dec 2007 17:18:42 GMT60JavaScript日期处理函数大全http://www.blogjava.net/yczz/articles/167785.html飞鸟飞鸟Fri, 14 Dec 2007 07:25:00 GMThttp://www.blogjava.net/yczz/articles/167785.htmlhttp://www.blogjava.net/yczz/comments/167785.htmlhttp://www.blogjava.net/yczz/articles/167785.html#Feedback0http://www.blogjava.net/yczz/comments/commentRss/167785.htmlhttp://www.blogjava.net/yczz/services/trackbacks/167785.html 有人经常问到有关如何使用JS处理日期的问题，我只好献拙了。
希望能够有点用处。
1。解决2000问题
function y2k(number) { return (number < 1000) ? number + 1900 : number; }
2。检查日期是否合法
// 当输入参数为isDate(dd,mm,ccyy)时，表示要检查年，月，日
// 当输入参数为isDate(dd,mm) 表示默认年为当前年
// 当输入参数为isDate(dd)    表示默认年，月为当前年月
// 注意输入月份保证在1-12以内。

function isDate (day,month,year) {
    var today = new Date();
    year = ((!year) ? y2k(today.getYear())year);
    month = ((!month) ? today.getMonth():month-1);
    if (!day) return false
    var test = new Date(year,month,day); 86oo.com提供各类教程
    if ( (y2k(test.getYear()) == year) &&
         (month == test.getMonth()) &&
         (day == test.getDate()) )
        return true;
    else
        return false
}

以下是调用例子：
if (isDate(31,2,1997))
    document.write("Valid");
else
    document.write("Invalid");

3。如何判断两个日期中的间隔天数
function daysElapsed(date1,date2) {
    var difference = Date.UTC(date1.getYear(),date1.getMonth(),date1.getDate(),0,0,0)
                   - Date.UTC(date2.getYear(),date2.getMonth(),date2.getDate(),0,0,0);
    return difference/1000/60/60/24; 86oo.com
}

4。如何将一个下拉列表框中的月份传递到另一页
<FORM>
<SELECT NAME="selectName">
<OPTION>January
<OPTION>February
<OPTION>March
<OPTION>April
<OPTION>May
<OPTION>June
<OPTION>July
<OPTION>August
<OPTION>Spetember
<OPTION>October
<OPTION>November
<OPTION>December
</SELECT>
<INPUT TYPE="BUTTON" VALUE="Go" onClick="window.location.href = 'nextpage.html?' +
this.form.selectName.options[this.form.selectName.selectedIndex].text">
</FORM>

在nextpage.html中加入下面的代码
<FORM name="formName"><INPUT TYPE="TEXT" name="textName"><FORM>
<SCRIPT LANGUAGE="JavaScript"><
document.formName.textName.value = location.search.substring(1);
//-SCRIPT>

或则：
<SCRIPT LANGUAGE="JavaScript"><

86oo精彩教程


document.write("<FORM><INPUT TYPE='TEXT' ");
document.write("VALUE='"location.search.substring(1)+"FORM>")
//-SCRIPT>

5。如何将一个字符串中的时间和当前时间做比较
<SCRIPT LANGUAGE="JavaScript">
/*其中的日期字符串可有以下格式：
   格式 1 : 19970529
   格式 2 : 970529
   格式 3 : 29/05/1997
   格式 4 : 29/05/97
   输入参数dateType是1到4的数字，表示使用哪种格式.
*/
<!-
function isitToday(dateString,dateType) {
    var now = new Date();
    var today = new Date(now.getYear(),now.getMonth(),now.getDate())

    if (dateType == 1)
        var date = new Date(dateString.substring(0,4),
                            dateString.substring(4,6)-1, http://www.86oo.com
                            dateString.substring(6,8));
    else if (dateType == 2)
        var date = new Date(dateString.substring(0,2),
                            dateString.substring(2,4)-1,
                            dateString.substring(4,6));
    else if (dateType == 3)
        var date = new Date(dateString.substring(6,10),
                            dateString.substring(3,5)-1,

您所浏览的文章来自86oo.com


                            dateString.substring(0,2));
    else if (dateType == 4)
        var date = new Date(dateString.substring(6,8),
                            dateString.substring(3,5)-1,
                            dateString.substring(0,2));
    else
        return false;

    if (date.toString() == today.toString())
        return true;
    else
        return false;

86oo精彩教程


}
调用的例子如下：
if (isitToday("19970529",1)) alert('true'); else alert('false');
if (isitToday("970529",2)) alert('true'); else alert('false');
if (isitToday("29/05/1997",3)) alert('true'); else alert('false');
if (isitToday("02/06/97",4)) alert('true'); else alert('false');
//-
</SCRIPT>

6。如何根据一个人的生日计算他的岁数
<SCRIPT LANGUAGE="JavaScript"><
/*其中的日期字符串可有以下格式：
   格式 1 : 19970529
   格式 2 : 970529
   格式 3 : 29/05/1997
   格式 4 : 29/05/97
   输入参数dateType是1到4的数字，表示使用哪种格式.
*/
function getAge(dateString,dateType) {
    var now = new Date();
    var today = new Date(now.getYear(),now.getMonth(),now.getDate())
    var yearNow = now.getYear();
    var monthNow = now.getMonth();
www.86oo.com

    var dateNow = now.getDate();

    if (dateType == 1)
        var dob = new Date(dateString.substring(0,4),
                            dateString.substring(4,6)-1,
                            dateString.substring(6,8));
    else if (dateType == 2)
        var dob = new Date(dateString.substring(0,2),
                            dateString.substring(2,4)-1,
                            dateString.substring(4,6)); 86oo精彩教程
    else if (dateType == 3)
        var dob = new Date(dateString.substring(6,10),
                            dateString.substring(3,5)-1,
                            dateString.substring(0,2));
    else if (dateType == 4)
        var dob = new Date(dateString.substring(6,8),
                            dateString.substring(3,5)-1,
                            dateString.substring(0,2));

您所浏览的文章来自86oo.com


    else
        return '';

    var yearDob = dob.getYear();
    var monthDob = dob.getMonth();
    var dateDob = dob.getDate();

    yearAge = yearNow - yearDob;

    if (monthNow > monthDob)
        var monthAge = monthNow - monthDob;
    else {
        yearAge--;
        var monthAge = 12 + monthNow -monthDob;
    }
    if (dateNow > dateDob)
        var dateAge = dateNow - dateDob;
    else {
        monthAge--;
        var dateAge = 31 + dateNow - dateDob; 欢迎各位访问86oo.com
    }

    return yearAge + ' years ' + monthAge + ' months ' + dateAge + ' days';
}
调用例子
document.write(getAge("19650104",1)+'BR>')
document.write(getAge("650104",2)+'BR>')
document.write(getAge("04/01/1965",3)+'BR>')
document.write(getAge("04/01/65",4)+'BR>')
//-SCRIPT>

7。如何使用下面的格式dd/mm/yy在网页中显示日期
<SCRIPT LANGUAGE = 'JavaScript'>
<!-
var date = new Date();
var d  = date.getDate();
var day = (d < 10) ? '0' + d : d;
var m = date.getMonth() + 1;
var month = (m < 10) ? '0' + m : m;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;

document.write(day + "/" + month + "/" + year);
//-
</SCRIPT>

8。如何使用下面的格式date month year在网页中显示日期
<SCRIPT LANGUAGE = 'JavaScript'> 86oo精彩教程
<!-
function makeArray() {
     for (i = 0; i<makeArray.arguments.length; i++)
          this[i + 1] = makeArray.arguments[i];
}

var months = new makeArray('January','February','March',
    'April','May','June','July','August','September',
    'October','November','December');

var date = new Date();
var day  = date.getDate();
var month = date.getMonth() + 1;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;

document.write(day + " " + months[month] + " " + year);
//-
</SCRIPT>

9.如何让我的网页的最近更新日期更易读
<SCRIPT LANGUAGE = 'JavaScript'><
function makeArray0() {
     for (i = 0; i<makeArray0.arguments.length; i++)
          this[i] = makeArray0.arguments[i];

www.86oo.com


}
var days = new makeArray0("Sunday","Monday","Tuesday","Wednesday",
    "Thursday","Friday","Saturday");
var months = new makeArray0('January','February','March',
    'April','May','June','July','August','September',
    'October','November','December');
function nths(day) {
     if (day == 1 || day == 21 || day == 31)
          return 'st';
     else
          if (day == 2 || day == 22)
               return 'nd';
               if (day == 3 || day == 23)
                    return 'rd';

www.86oo.com


               else return 'th';
}
function y2k(number) { return (number < 1000) ? number + 1900 : number; }
var last = document.lastModified;
var date = new Date(last);
document.write("Last updated on " + days[date.getDay()] + ' ' +
    date.getDate() + nths(date.getDate()) + " " +
    months[date.getMonth()] + ", " +
    (y2k(date.getYear()) + "."
//-SCRIPT>

10。如何显示到某个特定日期的倒记时
<SCRIPT LANGUAGE="JavaScript"><
function y2k(number) { return (number < 1000) ? number + 1900 : number; }

function timeTillDate(whenDay,whenMonth,whenYear) {
    var now = new Date();
    var thisDay = now.getDate(), thisMonth = now.getMonth() + 1, thisYear = y2k(now.getYear())
    var yearsDifference = whenYear - thisYear, monthsDifference = 0, daysDifference = 0, string = '';
86oo.com提供各类教程


    if (whenMonth >= thisMonth) monthsDifference = whenMonth - thisMonth;
    else { yearsDifference--; monthsDifference = whenMonth + 12 - thisMonth; }

    if (whenDay >= thisDay)daysDifference = whenDay - thisDay;
    else {
        if (monthsDifference > 0) monthsDifference--;
        else { yearsDifference--; monthsDifference+=11; }
        daysDifference = whenDay + 31 - thisDay;
    }

    if (yearsDifference < 0) return '';

    if ((yearsDifference == 0) && (monthsDifference == 0) && (daysDifference == 0))
        return '';

    if (yearsDifference > 0) {
        string = yearsDifference + ' year';

您所浏览的文章来自86oo.com


        if (yearsDifference > 1) string += 's';
        string += ' ';
    }

    if (monthsDifference > 0) {
        string += monthsDifference + ' month';
        if (monthsDifference > 1) string += 's';
        string += ' ';
    }
    if (daysDifference > 0) {
        string += daysDifference + ' day';
        if (daysDifference > 1) string += 's';
        string += ' ';
    }

    var difference = Date.UTC(now.getYear(),now.getMonth(),now.getDate(),now.getHours(),now.getMinutes(),now.getSeconds()) - 欢迎各位访问86oo.com
                     Date.UTC(now.getYear(),now.getMonth(),now.getDate(),0,0,0);

    difference = 1000*60*60*24 - difference;

    var hoursDifference = Math.floor(difference/1000/60/60);
    difference = difference - hoursDifference*1000*60*60
    var minutesDifference = Math.floor(difference/1000/60);
    difference = difference - minutesDifference*1000*60
    var secondsDifference = Math.floor(difference/1000);

    if (hoursDifference > 0) {
        string += hoursDifference + ' hour';
        if (hoursDifference > 1) string +='s';
        string += ' ';
    }
86oo.com

    if (minutesDifference > 0) {
        string += minutesDifference + ' minute';
        if (minutesDifference > 1) string +='s';
        string += ' ';
    }

    if (secondsDifference > 0) {
        string += secondsDifference + ' second';
        if (secondsDifference > 1) string +='s';
        string += ' ';
    }
    return string;
}

调用例子，例如现在到31/12/1999还有多久。
document.write(timeTillDate(31,12,1999));
//-SCRIPT>

11。如何从一个日期中减掉几个小时
<SCRIPT LANGUAGE = 'JavaScript'><
var date = new Date();
var date = new Date(Date.UTC(date.getYear(),date.getMonth(),date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds()) - 5*60*60*1000);
www.86oo.com

document.write(date);
//-SCRIPT>

12。如何在一个日期中增加几个月后并能够正确显示出来
<SCRIPT LANGUAGE="JavaScript"><
function makeArray() {
    for (i = 0; i<makeArray.arguments.length; i++)
        this[i + 1] = makeArray.arguments[i];
}
var months = new makeArray('January','February','March','April',
                           'May','June','July','August','September',
                           'October','November','December');
function nths(day) {
    if (day == 1 || day == 21 || day == 31) return 'st';
    else if (day == 2 || day == 22) return 'nd'; 86oo.com提供各类教程
    else if (day == 3 || day == 23) return 'rd';
    else return 'th';
}
function y2k(number) { return (number < 1000) ? number + 1900 : number; }
function monthsahead(noofmonths) {
    var today = new Date();
    var date = new Date(today.getYear(),today.getMonth() + noofmonths,today.getDate(),today.getHours(),today.getMinutes(),today.getSeconds())
    return date.getDate() + nths(date.getDate()) + ' ' + months[date.getMonth() + 1] + ' ' + y2k(date.getYear())
}

调用例子：
document.write(monthsahead(6));
//-SCRIPT>


飞鸟 2007-12-14 15:25 发表评论
]]>Ajax 和 XML: 使用 Ajax 实现 lightboxhttp://www.blogjava.net/yczz/articles/162955.html飞鸟飞鸟Sun, 25 Nov 2007 03:59:00 GMThttp://www.blogjava.net/yczz/articles/162955.htmlhttp://www.blogjava.net/yczz/comments/162955.htmlhttp://www.blogjava.net/yczz/articles/162955.html#Feedback0http://www.blogjava.net/yczz/comments/commentRss/162955.htmlhttp://www.blogjava.net/yczz/services/trackbacks/162955.html在这个一切都要求新奇的世界中，要吸引用户的注意实属不易。了解如何在 Ajax 工具中使用 lightbox、弹出、窗口和渐变消息之类的新技术吸引用户的目光。

这可能是流传在都市中的一个传奇故事。很多年之前就有人和我说过这样一个用户交互体验。测试者的座位下面塞了 100 美金，而他正在使用计算机中的桌面应用程序。这个应用程序的状态栏中显示了这样一条信息：“在您的座位下面有 100 美金。”可悲的是，没有一个参与者能够发现他座位下面的钱。这个故事告诉我们状态栏传递信息的效率有多低，而且要吸引用户的注意绝非易事。

本文将介绍如何结合 PHP、动态 HTML（DHTML）和异步的 JavaScript + XML（Ajax）为内容增色，从而真正吸引用户的眼球。

工具提示

在浏览器中设置状态栏相当简单，但是要实现一些有用的功能（比如说弹出一个工具提示）则不是那么容易。考虑到简单性，我选择使用了一个可从网络上免费获得的工具提示库，它构建于出色的 Prototype.js JavaScript 库之上。清单 1 显示了这个工具提示的代码。


清单 1. index.html
            <html>
            <head>
            <script src="prototype.js" type="text/javascript"></script>
            <script src="tooltip.js" type="text/javascript"></script>
            <style>
            body { font-family: arial,verdana; }
            .popup { padding:10px; border:1px solid #ccc;
            background:#eee; width:250px; font-size: small; }
            </style>
            </head>
            <body>
            <div id="book1">Code Generation In Action</div>
            <div id="popup1" class="popup">
            </div>
            </body>
            <script type="text/javascript">
            new Ajax.Updater( 'popup1', 'text.php' );
            new Tooltip('book1', 'popup1')
            </script>
            </html>

该页面首先使用一个 Ajax 调用更新工具提示的内容，方法是使用 Prototype.js 库中的 Ajax.Updater 类。然后再使用工具提示库所提供的 Tooltip 类将工具提示分配给 book1 <div> 标记。

清单 2 显示了该工具提示内容的代码。


清单 2. text.php
            An excellent book on code generation and generative programming
            by Jack Herrington.

现在，可以在浏览器中打开页面以查看效果。显示的页面如 图 1 所示。


图 1. 鼠标未移到文本上
鼠标未移到文本上

当我把鼠标移到文本上，页面将弹出一个小窗口，如 图 2 所示。


图 2. 弹出窗口
弹出窗口
工具提示的动态演示

查看 工具提示单击链接在新窗口中查看工具提示演示 的在线动态演示。

工具提示是一种整洁的页面呈现方式，并能根据用户的需要显示内容。如果某个用户想了解某项内容的更多信息，只需将鼠标移到该内容上便可显示详细信息。这些详细信息可具有不同的复杂度，可以是图像、表格和格式化数据。





回页首


Lightbox

Lightbox 是一种最前沿的创新方法，可以将用户的注意力集中到页面上的某个特定元素。在下面的示例中，我在页面中添加了一个缩略图，当用户单击它时便会在 “lightbox” 中显示出大图。

要创建这种效果，我将使用极为优秀的 Lightbox JS 2.0 库，它同样构建于 Prototype.js 框架之上。清单 3 显示了示例代码。


清单 3. index.html
            <html>
            <head>
            <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
            <script src="js/prototype.js" type="text/javascript"></script>
            <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
            <script src="js/lightbox.js" type="text/javascript"></script>
            </head>
            <body>
            <a href="images/megan1_400_320.jpg" rel="lightbox">
            <img src="images/megan1_400_320.jpg" width="100" height="80"
            alt="Megan" border="0" /></a>
            </body>
            </html>

在浏览器中打开该页面时，只能看到缩略图，如 图 3 所示。


图 3. 单击缩略图之前的显示效果
单击缩略图之前的显示效果

当我单击该缩略图时，实际大小的图像将优雅地显示在窗口中央，如 图 4 所示。


图 4. 显示实际大小图像的 lightbox
显示实际大小图像的 lightbox

此外，背景中的所有其他内容将变成灰色，这样用户将更容易注意到页面中间显示的内容。

lightbox 的动态演示

查看 lightbox单击链接在新窗口中查看工具提示演示 的在线动态演示。

如果您对 lightbox 这个术语还不太熟悉也没有关系：因为它是摄影行业中的一个相当深奥的词汇。在过去胶片摄影的时代，lightbox 是一个 6 英寸高，长宽皆为几英尺的盒子形状的设备，顶部涂有塑性白漆，盒子中间的小灯可以为整个表面提供照明。因此， 我们可以将幻灯片和底片放在 lightbox 上，然后使用一种小型放大镜来检查图像。您可以认为图 4 中的效果就是在通过 lightbox 上的放大镜查看照片。因此，lightbox 的术语便从此而来。

但是，是否可以将图像换成文本，并实现同样的效果呢？

文本 lightbox

Particle Tree 这个站点就使用这种与众不同的方法实现了 lightbox。此方法的优点便是可以显示使用 Ajax 从服务器获取的任意 HTML 代码。我将使用这种方法将额外的文本显示给用户。

清单 4 显示了主页代码。


清单 4. index.html
            <html>
            <head>
            <title>
            Lightbox Text Test
            </title>
            <link rel="stylesheet" href="css/default.css" media="screen,projection" type="text/css" />
            <link rel="stylesheet" href="css/lightbox.css" media="screen,projection"
            type="text/css" />
            <script type="text/javascript" src="scripts/prototype.js"></script>
            <script type="text/javascript" src="scripts/lightbox.js"></script>
            </head>
            <body>
            <a href="text.php" class="lbOn">More About This Article</a>
            </body>
            </html>

清单 5 中的 HTML 代码将通过 Ajax 获取并随后显示给用户。


清单 5. text.php
            <p>This article covers the basics of AJAX Lightbox that
            shows text blocks instead of images</p>
            <p><a href="#" class="lbAction" rel="deactivate">
            Return to article list</a></p>

以上代码在浏览器中的显示效果如 图 5 所示。


图 5. 单击文本便可获得更多信息
单击文本便可获得更多信息

当我单击文本时，可以看到页面内容将突出显示出来。请参见 图 6。


图 6. 运行中的文本 lightbox
运行中的文本 lightbox
文本 lightbox 的动态演示

查看 文本 lightbox单击链接在新窗口中查看工具提示演示 的在线动态演示。

这种方法可以为页面上列出的产品或文章显示额外信息，而不必使用户离开当前页面。相反，您将间接地将用户的注意力转移到这些内容上。与 HTML 代码一样，这些信息可以包括更多的文本内容、图像，或者甚至是表单（比如说注册、评论或登录表单）。





回页首


窗口

我在上一示例中提到过使用 lightbox 显示表单，但是这并不是用户在使用表单时真正需要的。他们真正需要的是窗口。所幸的是，Prototype 库提供了一个极好的窗口实现，该窗口实现具有各种不同的皮肤可满足您的需要。

窗口代码还将使用 Ajax 通过 Prototype 获取将在窗口框架中显示的内容。首先，开发托管窗口的基本页面，如 清单 6 所示。


清单 6. index.html
            <html>
            <head>
            <script type="text/javascript" src="javascripts/prototype.js"></script>
            <script type="text/javascript" src="javascripts/effects.js"></script>
            <script type="text/javascript" src="javascripts/window.js"></script>
            <script type="text/javascript" src="javascripts/window_effects.js"></script>
            <link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
            <link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
            </head>
            <body>
            <a href="javascript:void showWindow();">Show Window</a>
            <script>
            function showWindow()
            {
            win = new Window( { className: 'spread', url: 'test.html',
            title: 'Simple Window', width:400,
            height:300, destroyOnClose: true, recenterAuto:false } );
            win.showCenter();
            }
            </script>
            </body>
            </html>

此处的 JavaScript 代码将响应单击 Show window 按钮的操作，结果是创建一个具有指定宽度、高度、标题和内容（内容由特定的 URL 指定）的窗口。然后使用 showCenter() 方法显示窗口，窗口将显示在在浏览器窗口的中部。

清单 7 显示了窗口的内容。


清单 7. test.html
            <h1>Registration</h1>
            <p>You need to first register the product before...</p>

该页面在浏览器的显示效果如 图 7 所示。


图 7. 窗口链接
窗口链接

页面中并没有什么内容，但是单击窗口链接之后却是另一番景色。如 图 8 所示。


图 8. 弹出窗口
弹出窗口

有点华而不实的感觉，但是它确实可以吸引用户的注意力。除了石灰绿之外，您还可以选择一些不同的皮肤。

但是我真正想要的是弹出表单，不是吗？我特别想在主页上实现一个登录表单，当我单击 Login 按钮时便会弹出一个登录表单。清单 8 显示了主页的代码。


清单 8. form.php
            <html>
            <head>
            <script type="text/javascript" src="javascripts/prototype.js"></script>
            <script type="text/javascript" src="javascripts/effects.js"></script>
            <script type="text/javascript" src="javascripts/window.js"></script>
            <script type="text/javascript" src="javascripts/window_effects.js"></script>
            <link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
            <link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
            </head>
            <body>
            <div id="myloginform" style="display:none;overflow:clip;padding:10px;">
            <form id="loginfrm">
            <table>
            <tr><td>Login</td><td><input type="text" name="name" /></td></tr>
            <tr><td>Password</td><td><input type="password" name="password" /></td></tr>
            </table>
            </form>
            <button onclick="login()">Login</button>
            </div>
            <a href="javascript:void showWindow();">Login</a>
            <script>
            var g_loginWindow = null;
            function login()
            {
            new Ajax.Request( 'login.php', {
            parameters: $('loginfrm').serialize(),
            method: 'post',
            onSuccess: function( transport ) {
            g_loginWindow.close();
            }
            } );
            }
            function showWindow()
            {
            g_loginWindow = new Window( { className: 'spread', title: "Login",
            destroyOnClose: true,
            onClose:function() { $('myloginform').style.display = 'none'; } } );
            g_loginWindow.setContent( 'myloginform', true, true );
            g_loginWindow.showCenter();
            }
            </script>
            </body>
            </html>

这次，窗口的内容将直接存放在页面中。但是，当用户单击表单上的 Login 按钮时，页面将使用 Ajax.Request 对象向服务器请求登录表单。清单 9 显示了这个简单的登录脚本，实际中的实现将远没有这么简单。


清单 9. login.php
            <true />

这时，当我在浏览器中打开该页面时将看到一个登录链接，如 图 9 所示。


图 9. login 链接
login 链接

当我单击该链接时，将看到一个非常酷的 Web 2.0 样式的登录窗口，如 图 10 所示。


图 10. login 窗口
login 窗口
窗口的动态演示

查看 窗口单击链接在新窗口中查看窗口演示 的在线动态演示。

当用户单击 Login 按钮时，页面将把用户名和密码发送给服务器。然后，服务器将验证凭证并建立一个会话 cookie，并回复响应，指示页面返回主页。

实际上，此类功能可以在应用程序中实现弹出窗口，并让用户感觉自己仿佛更像是在使用桌面应用程序，而不是在访问 Web 页面。





回页首


渐变消息

与用户通信的另一种新方法是渐变消息 — 也就是，这种消息将在屏幕的一个重要位置弹出，告诉用户某些重要的事情。在本例中，我将使用 Scriptaculous 效果库（它也构建于 Prototype.js 之上）实现渐变消息。。

首先，我们从 清单 10 开始。


清单 10. index.html
            <html><head>
            <style>
            .alert {
            opacity: 0.0;
            border:2px dashed black;
            padding:5px;
            background:#eee;
            font-family: arial, verdana;
            font-weight: bold; }
            </style>
            <script src="lib/prototype.js"></script>
            <script src="src/effects.js"></script>
            <script>
            function submit()
            {
            new Ajax.Updater( 'result', 'alert.html', {
            method: 'get',
            onSuccess: function() {
            new Effect.Opacity('result',
            { duration: 2.0, from: 0.0, to: 1.0 } );
            new Effect.Opacity('result',
            { delay: 10.0, duration: 2.0, from: 1.0, to: 0.0 } );
            } }
            );
            }
            </script>
            </head><body>
            <div id="result" class="alert"></div><br/><br/>
            <button onclick="submit()">Submit</button>
            </body></html>

在理想情况下，该页面有点类似含有 Submit 按钮的表单。然后，当用户单击 Submit 按钮时，服务器接收到提交的表单数据后将返回一个消息。这个消息将突出显示在某个位置，然后效果将渐渐减弱。在本例中，我省去了表单元素，因此页面中只有一个 Submit 按钮。

Submit 按钮将 Ajax 请求发送给 alert.html 页面。然后，将该页面的结果存放在 result <div> 标记中，Scriptaculous 效果类可以使该标记显示为渐变效果。

清单 11 显示了 alert 页面的代码。


清单 11. alert.html
            A new record has been added.

该页面中浏览器中的显示效果如 图 11 所示。


图 11. 表单的 Submit 按钮
表单的 Submit 按钮

还是一样，页面中并没有什么内容。可以考虑在 Submit 按钮上面加入一些含有数据的表单字段。

当我单击 Submit 按钮时，页面将突出显示警告提示，如 图 12 所示。


图 12. 渐变效果的消息
渐变效果的消息
渐变效果的动态演示

查看 渐变单击链接在新窗口中查看渐变效果演示 的在线动态演示。

几秒钟之后，消息将逐渐消失。

这种与用户交互的方式虽然简单，但是十分有效。只要别过度使用，它可以直接让用户感受到对象的出现和消失。这是人类与生俱来的本能。因此，您会自然地注意到。只要能够合理地使用这些技巧，吸引用户的注意力将不再困难。

分享这篇文章……

digg 将本文提交到 Digg
del.icio.us 发布到 del.icio.us
Slashdot 提交到 Slashdot！

结束语

希望本文中的工具可以让您通过创新的方式实现交互和提示。随着时间的推移，我确信这些技巧将过度使用，并最终落得与状态栏一样的下场。但是在开始阶段，这些工具将提供一种有趣、有效且符合 Web 2.0 的吸引用户注意的方式。



飞鸟 2007-11-25 11:59 发表评论
]]>Ajax 和 XML: 将 Ajax 用于多媒体http://www.blogjava.net/yczz/articles/162953.html飞鸟飞鸟Sun, 25 Nov 2007 03:58:00 GMThttp://www.blogjava.net/yczz/articles/162953.htmlhttp://www.blogjava.net/yczz/comments/162953.htmlhttp://www.blogjava.net/yczz/articles/162953.html#Feedback0http://www.blogjava.net/yczz/comments/commentRss/162953.htmlhttp://www.blogjava.net/yczz/services/trackbacks/162953.html宽带、媒体、电影、图像和声音等技术的出现推动了 Web 2.0 的发展。了解如何把多媒体与 PHP 和 Asynchronous JavaScript™ + XML（Ajax）结合起来创造令人耳目一新的体验。

如果问哪一个网站最能代表 Web 应用程序的新潮流，多数人会回答 YouTube。这个网站不仅仅积极接纳新技术营造出梦幻效果，而且改变了我们对多媒体的看法，改变了我们和媒体的关系。许多故事在以传统媒体渠道传播之前就已经出现在 YouTube 上了，当它们不再流传时，YouTube 就会像全世界的一个巨大的 Tivo，记录着曾经发生的点点滴滴。

媒体分享正在改变世界，而且从技术的观点来说，这并不难做到。本文介绍如何在 Web 视频托管应用程序上增加一个 Ajax 前端。

简单的视频选择

首先来看网站，网站上有一个电影列表可供选择 — 一个不用改变页面就能选择不同电影的网站。页面代码如 清单 1 所示。


清单 1. index.html
            <html>
            <head>
            <script src="prototype.js"></script>
            </head>
            <body>
            <div id="movieHost">
            </div>
            <div id="movieList">
            </div>
            <script>
            function setMovie( url )
            {
            $('movieHost').innerHTML = '';
            var elEmbed = document.createElement( 'embed' );
            elEmbed.src = url;
            $('movieHost').appendChild( elEmbed );
            }
            new Ajax.Request( 'movies.xml', {
            method: 'get',
            onSuccess: function( transport ) {
            var movieTags = transport.responseXML.getElementsByTagName( 'movie' );
            $('movieList').innerHTML = '';
            var bFirst = true;
            for( var b = 0; b < movieTags.length; b++ ) {
            var url = movieTags[b].getAttribute('url');
            var title = movieTags[b].getAttribute('title');
            if ( bFirst )
            {
            setMovie( url );
            bFirst = false;
            }
            var html = '<a href="javascript:void setMovie(\''+url+'\');">';
            html += title+'</a><br/>';
            $('movieList').innerHTML += html;
            }
            }
            } );
            </script>
            </body>
            </html>

该页面使用 Prototype.js 这个很棒的 JavaScript 库向 movies.xml 数据源发送 Ajax 请求。返回数据后通过 getElementsByTagName() 方法查找所有电影标签。对每个电影标签，代码检索 URL 和标题。如果检索的标签是列表中的第一部电影，脚本立即开始放映这部电影。否则添加一个 anchor 标签作为 movieList <div> 的电影选择器。

电影选择器 anchor 调用 setMovie() 函数打开指定的电影。播放电影的方法很简单，首先将 movieHost <div> 标签置空，即删除原来的电影。然后将内容设置为 <embed> 标签，其 URL 由电影列表指定。

<embed> 标签是在页面中播放电影最简单的方法，但是存在跨浏览器的问题。另一种办法是同时使用 <object> 和 <embed> 标签（还有一种办法，即使用 Macromedia Flash Player：本文稍后 再讨论）。

这个简单的例子中，movies.xml 只是一个平面文件，包含一些我自己的家庭短片的引用。该文件如 清单 2 所示。


清单 2. movies.xml
            <movies>
            <movie url="spider.mov" title="Spider" />
            <movie url="swing.mov" title="Swing Set" />
            <movie url="water.mov" title="Water Splash" />
            </movies>

打开该页面时，显示的结果如 图 1 所示。


图 1. 简单的电影列表页面
简单的电影列表页面

最上方是一部由 <embed> 标签播放的电影，下面是其他影片列表。点击其中的任何链接，正在播放的电影就变成所选择的电影。

显然，这个系统不适合大型的视频资料库，还需要对影片列表进行某种搜索。





回页首


可搜索的电影列表

要添加搜索功能，必须添加一个搜索框，如 清单 3 所示。其中增加了搜索输入字段 q。


清单 3. 添加搜索功能
            <html>
            <head>
            <script src="prototype.js"></script>
            </head>
            <body>
            <table><tr><td valign="top">
            <input type="text" id="q" onkeyup="search()">
            <div id="movieList">
            </div>
            </td><td valign="top">
            <div id="movieHost">
            </div>
            </td>
            </tr></table>
            <script>
            function setMovie( url )
            {
            $('movieHost').innerHTML = '';
            var elEmbed = document.createElement( 'embed' );
            elEmbed.src = url;
            $('movieHost').appendChild( elEmbed );
            }
            function search()
            {
            new Ajax.Request( 'search.php?q='+escape($('q').value), {
            method: 'get',
            onSuccess: function( transport ) {
            var movieTags = transport.responseXML.getElementsByTagName( 'movie' );
            $('movieList').innerHTML = '';
            var bFirst = true;
            for( var b = 0; b < movieTags.length; b++ ) {
            var url = movieTags[b].getAttribute('url');
            var title = movieTags[b].getAttribute('title');
            if ( bFirst )
            {
            setMovie( url );
            bFirst = false;
            }
            var html = '<a href="javascript:void setMovie(\''+url+'\');">';
            html += title+'</a><br/>';
            $('movieList').innerHTML += html;
            }
            }
            } );
            }
            </script>
            </body>
            </html>

在 key-up 事件中指定 search() 方法将被调用。search() 方法和 Ajax.Request 调用类似，除了向 search.php 页面传递查询字符串。search.php 脚本返回和原来相同的 XML 格式，因此不需要修改 XML 解析的代码。

我承认对于自己的习惯来说，key-up 上的 search() 函数反映有点太快。理想情况下，系统应该在执行搜索之前等待一秒左右以便输入完整的搜索文本，避免列表不停地闪烁。使用 window.setTimeout() 方法很容易实现这种行为。

清单 4 显示了经过修改的 search.php 脚本。


清单 4. search.php
            <?php
            header( 'content-type: text/xml' );
            $movies = array();
            $movies['spider.mov'] = 'Spider';
            $movies['swing.mov'] = 'Swing Set';
            $movies['water.mov'] = 'Water Splash';
            ?>
            <movies>
            <?php
            foreach( $movies as $k => $v ) {
            if ( strlen( $_GET['q'] ) > 0 &&
            preg_match( '/'.$_GET['q'].'/i', $v ) ) {
            ?>
            <movie url="<?php echo($k) ?>" title="<?php echo($v) ?>" />
            <?php
            } }
            ?>
            </movies>

脚本一开始建立了一个数组保存全部电影。为了简化起见，这里对电影进行了硬编码。实际应用的时候这些元素很可能取自电影清单的数据库。

接下来的代码遍历列表，把搜索查询的正则表达式应用于每个电影的标题。如果匹配则输出包含 URL 和名称的 <movie> 标签。

打开页面并输入 s，将看到 图 2 所示的页面。


图 2. 简单的电影查询页面
简单的电影查询页面

如果按下 Delete 建并输入 water，就会看到 图 3 所示的页面。


图 3. 搜索与 “water” 相关的电影的查询页面
搜索与 “water” 相关的电影的查询页面

虽然本文主要讨论如何使用 Dynamic HTML（DHTML）和 Ajax 建立前端应用程序，但视频共享网站决不是这么简单。





回页首


视频分享基础

先暂时离开实践问题讨论一些更具理论性的东西，视频共享中更加复杂的问题。涉及到三个主要问题：

  • 如何存储和传输视频
  • 如何处理不同的视频格式
  • 如何从上传文件中获得缩略图和视频信息

视频存储是一个实实在在的问题 — 特别是对于小应用程序而言视频文件非常大，需要大容量的硬盘空间来存储。将其传递给客户还面临着带宽的挑战。可以自己购买设备安装到托管设施中。或者使用 Amazon S3 这样的服务，只需很低的价格就能上传任何资料（数据库备份、图片、电影等等）到 Amazon 数据中心，以及提供给其他客户。和建立数据中心的大量投资相比可以先考虑一下这些服务。

下一个问题 — 视频格式 — 提出了一个有趣的挑战。存在多种视频格式，没有任何一种播放器能支持所有格式。事实上多数播放器只能处理自己挑选的视频格式。为了方便用户，也许最好以某种格式为标准然后将所有传来的视频都转化成这种格式。有一种非常方便的工具，即命令行应用程序 FFmpeg。它不仅能把一种视频格式转化成另一种，还能拾取画面的快照从而为用户提供视频缩略图。

选择何种视频格式作为标准可能很麻烦。目前 Flash 视频具有明显的优势，但是 Windows Media®，特别是随着 Microsoft Silverlight（原来的 WPF/Everywhere）的发布，正在赢得越来越多的支持。FFmpeg 几乎能将任何影片格式转化成 Flash 视频格式，这一点很吸引人。而且有一些免费和开源的 Flash 播放器很容易嵌入到网站上。将这些播放器和上述代码结合起来就能建立一个完整的、以 Ajax 为前端的端到端视频分享解决方案。

但 Web 上不仅仅有视频，图像共享也很重要。





回页首


幻灯片放映

清单 5 显示了一个简单的基于 DHTML 的幻灯片，数据来自 XML 文件。


清单 5. index.html
            <html>
            <head>
            <script src="prototype.js"></script>
            </head>
            <body bgcolor="black">
            <div style="text-align:center;">
            <img id="imgItem" src="" style="display:none;"><br>
            <div id="imgTitle" style="color:white;font-family:arial;font-size:24pt;">
            </div>
            </div>
            <script>
            var g_images = [];
            var g_slideIndex = 0;
            function showSlide()
            {
            $('imgTitle').hide();
            $('imgItem').hide();
            var height = 600;
            var width = ( height / g_images[ g_slideIndex ].height ) *
            g_images[ g_slideIndex ].width;
            $('imgItem').src = g_images[ g_slideIndex ].src;
            $('imgItem').width = width;
            $('imgItem').height = height;
            $('imgTitle').innerHTML = g_images[ g_slideIndex ].title;
            $('imgTitle').show();
            $('imgItem').show();
            g_slideIndex++;
            if ( g_slideIndex >= g_images.length )
            g_slideIndex = 0;
            }
            new Ajax.Request( 'images.xml', {
            method: 'get',
            onSuccess: function( transport ) {
            var imageTags = transport.responseXML.getElementsByTagName( 'image' );
            for( var b = 0; b < imageTags.length; b++ ) {
            g_images.push( {
            src: imageTags[b].getAttribute('src'),
            title: imageTags[b].getAttribute('title'),
            width: imageTags[b].getAttribute('width'),
            height: imageTags[b].getAttribute('height')
            } );
            }
            showSlide();
            window.setInterval( showSlide, 5000 );
            }
            } );
            </script>
            </body>
            </html>

分享这篇文章……

digg 提交到 Digg
del.icio.us 发布到 del.icio.us
Slashdot 提交到 Slashdot！

上述代码需要用到 Prototype.js JavaScript 库。利用 Ajax.Request 对象获得要显示的图片列表。然后解析返回的 XML 代码，获得图片的 URL、宽、高和标题。然后调用 showSlide() 函数得到幻灯片显示效果。设置的计时器每五秒切换到下一张幻灯片。

幻灯片放映通过包含当前图片的 <image> 标签和标题 <div> 标签实现。所谓放映只不过是隐藏当前的图片和标题，将图片来源和标题文本设置为新幻灯片的内容并显示。如果需要某种淡入淡出效果，建议使用 Scriptaculous 库中的 Effects 类，它是构建在 Prototype.js 上的。

清单 6 显示了数据图像文件。


清单 6. images.xml
            <images>
            <image src="images/megan1_875_700.jpg" title="Megan" width="875" height="700" />
            <image src="images/oso1_875_700.jpg" title="Oso 1" width="875" height="700" />
            <image src="images/oso2_873_700.jpg" title="Oso 2" width="873" height="700" />
            </images>

这里虽然使用了硬编码，但使用 PHP 脚本很容易生成 XML 代码。幻灯片放映如 图 4 所示。


图 4. 简单的幻灯片放映
简单的幻灯片放映

注意：我以前介绍过一个更加精细的幻灯片放映版本（要获得相关链接，参见参考资料）。现在这个版本的区别在于使用了 Prototype.js 库，各幻灯片之间的切换更简单。





回页首


结束语

像 Flikr 和 YouTube 之类的网站仅仅显示了 Web 上的多媒体应用的巨大潜能的冰山一角。本文介绍了一些非常简便的视频和图片浏览的实现，可用于您自己的项目。如果有效，请参加 developerWorks Ajax 论坛（参见 参考资料）告诉我您取得的成功。



飞鸟 2007-11-25 11:58 发表评论
]]>FCKEditor使用说明http://www.blogjava.net/yczz/articles/158024.html飞鸟飞鸟Sun, 04 Nov 2007 02:41:00 GMThttp://www.blogjava.net/yczz/articles/158024.htmlhttp://www.blogjava.net/yczz/comments/158024.htmlhttp://www.blogjava.net/yczz/articles/158024.html#Feedback0http://www.blogjava.net/yczz/comments/commentRss/158024.htmlhttp://www.blogjava.net/yczz/services/trackbacks/158024.html 1. FCKeditor 介绍
FCKeditor 这个开源的HTML 文本编辑器可以让web 程序拥有如MS Word 这样强大的编辑功
能.FCKeditor 支持当前流行的浏览器如IE 5.5+, Firefox 1.0+, Mozilla 1.3+与Netscape 7+等。

FCKeditor官司方网址：http://www.fckeditor.net/

FCKeditor在线DEMO：http://www.fckeditor.net/demo

FCKeditor下载直址：http://www.fckeditor.net/download (该版本为2.3.2)，最新版已经是2.4了。

2.FCKeditor.java介绍

不能直接在JSP项目中使用，需要FCKeditor.java库的支持。

FCKeditor.java是针对对JAVA中使用FCKeditor由Simone Chiaretta开发的FCKeditor的JAVA实现。

下载地址：http://www.fckeditor.net/download (最近版本为2.3)

3.在JAVA项目中使用FCKeditor在线编辑器

开发环境：JDK5.0 ＋<!--[if !supportLists]--> Eclipse3.2.1 + WTP1.5.2

（1）新建一个WEB工程：


（2）解压 FCKeditor_2.3.2.zip包，将其中的 edit 文件夹到项目中的 WebRoot 目录

（3）解压 FCKeditor_2.3.2.zip 包，将其中的 fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml 文件夹到项目中的 WebRoot 目录

（4）解压 FCKeditor.java-2.3.zip 包，将其中的 "web"WEB-INF"lib 下的两个 jar 文件到项目的 WebRoot"WEB-INF"lib 目录

（5）解压 FCKeditor.java-2.3.zip 包，将其中的 "src 下的 FCKeditor.tld 文件到项目的 WebContent"WEB-INF 目录

（6）删除 WebContent"edit 目录下的 _source 文件夹（以“_”开始的文件，在项目中无用）

完成后的目录结构下如：

说明：图中的input.jsp和display.jsp两个是我写的测试集成FCKeditor的JSP文件。

  • 修改WebContent/WEB-INF/web.xml文件，加入FCKeditor的配置信息，如下：
xml 代码
 
  1. xml version="1.0" encoding="UTF-8"?>  
  2. <web-app id="WebApp_ID" version="2.4"  
  3.     xmlns="http://java.sun.com/xml/ns/j2ee"  
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  
  6.     <display-name>FCKeditor<!--</span-->display-name>  
  7.     <servlet>  
  8.         <servlet-name>Connector<!--</span-->servlet-name>  
  9.         <servlet-class>  
  10.             com.fredck.FCKeditor.connector.ConnectorServlet  
  11.         <!--</span-->servlet-class>  
  12.         <init-param>  
  13.             <param-name>baseDir<!--</span-->param-name>  
  14.             <!-- 此为文件浏览路径 -->  
  15.             <param-value>/UserFiles/<!--</span-->param-value>  
  16.         <!--</span-->init-param>  
  17.         <init-param>  
  18.             <param-name>debug<!--</span-->param-name>  
  19.             <param-value>true<!--</span-->param-value>  
  20.         <!--</span-->init-param>  
  21.         <load-on-startup>1<!--</span-->load-on-startup>  
  22.     <!--</span-->servlet>  
  23.     <servlet>  
  24.         <servlet-name>SimpleUploader<!--</span-->servlet-name>  
  25.         <servlet-class>  
  26.             com.fredck.FCKeditor.uploader.SimpleUploaderServlet  
  27.         <!--</span-->servlet-class>  
  28.         <init-param>  
  29.             <param-name>baseDir<!--</span-->param-name>  
  30.             <!-- 此为文件上传路径，需要在WebRoot 目录下新建 UserFiles 文件夹 -->  
  31.             <!-- 根据文件的类型还需要新建相关的文件夹 Image、Flash -->  
  32.             <param-value>/UserFiles/<!--</span-->param-value>  
  33.         <!--</span-->init-param>  
  34.         <init-param>  
  35.             <param-name>debug<!--</span-->param-name>  
  36.             <param-value>true<!--</span-->param-value>  
  37.         <!--</span-->init-param>  
  38.         <init-param>  
  39.             <!-- 此参数为是否开启上传功能 -->  
  40.             <param-name>enabled<!--</span-->param-name>  
  41.             <param-value>false<!--</span-->param-value>  
  42.         <!--</span-->init-param>  
  43.         <init-param>  
  44.             <param-name>AllowedExtensionsFile<!--</span-->param-name>  
  45.             <param-value><!--</span-->param-value>  
  46.         <!--</span-->init-param>  
  47.         <init-param>  
  48.             <!-- 此参数为文件过滤，以下的文件类型都不可以上传 -->  
  49.             <param-name>DeniedExtensionsFile<!--</span-->param-name>  
  50.             <param-value>  
  51.                 php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi  
  52.             <!--</span-->param-value>  
  53.         <!--</span-->init-param>  
  54.         <init-param>  
  55.             <param-name>AllowedExtensionsImage<!--</span-->param-name>  
  56.             <param-value>jpg|gif|jpeg|png|bmp<!--</span-->param-value>  
  57.         <!--</span-->init-param>  
  58.         <init-param>  
  59.             <param-name>DeniedExtensionsImage<!--</span-->param-name>  
  60.             <param-value><!--</span-->param-value>  
  61.         <!--</span-->init-param>  
  62.         <init-param>  
  63.             <param-name>AllowedExtensionsFlash<!--</span-->param-name>  
  64.             <param-value>swf|fla<!--</span-->param-value>  
  65.         <!--</span-->init-param>  
  66.         <init-param>  
  67.             <param-name>DeniedExtensionsFlash<!--</span-->param-name>  
  68.             <param-value><!--</span-->param-value>  
  69.         <!--</span-->init-param>  
  70.         <load-on-startup>1<!--</span-->load-on-startup>  
  71.     <!--</span-->servlet>  
  72.     <servlet-mapping>  
  73.         <servlet-name>Connector<!--</span-->servlet-name>  
  74.         <url-pattern>  
  75.             /editor/filemanager/browser/default/connectors/jsp/connector  
  76.         <!--</span-->url-pattern>  
  77.     <!--</span-->servlet-mapping>  
  78.     <servlet-mapping>  
  79.         <servlet-name>SimpleUploader<!--</span-->servlet-name>  
  80.         <url-pattern>  
  81.             /editor/filemanager/upload/simpleuploader  
  82.         <!--</span-->url-pattern>  
  83.     <!--</span-->servlet-mapping>  
  84. <!--</span-->web-app>  

注：web.xml中已经加入了一些常用配置的说明。

  • 新建input.jsp文件，内容如下：(注意内容中的” testfck”这个id)


（上面不能直接帖HTML的代码，所以只能帖一个图片上来，要是有知道如何帖HTML代码的朋友，请告诉我一下，谢谢）

说明：在JSP中集成FCKeditor<!--[endif]-->JavaScript集成：

如上面内容所示，通过新建一个FCKeditor对象，然后调用该对象的设置方法来设置FCKeditor的各个属性，最后调用FCKeditor的ReplaceTextarea()替换HTML页面中的<textarea>标签。另外FCKeditor也可以调用它的create()方法来直接在JSP嵌入FCKeditor编辑器。

注：注意上面的oFCKeditor.BasePath = "";用这种方式FCKeditor会去查找它的editor目录下的fckeditor.html文件，由于我是直接将editor文件夹拷贝到WebContent目录下，所以将它的BasePath设置为””，如果您将editor拷贝到其它目录，请设置相应的BasePath属性。FCKeditor默认是将其放在fckeditor目录

（2）<!--[endif]-->使用自定义标签该方法一定要完成第步：解压 FCKeditor.java-2.3.zip 包，将其中的 "src 下的 FCKeditor.tld 文件到项目的 WebContent"WEB-INF 目录

首先在JSP中加入FCKeditor标签：

<%@ taglib uri=”/WEB-INF/FCKeditor.tld” prefix=”fck” %>

       JSP页面中加入如下代码，集成FCKeditor编辑器：
js 代码
  2.     id="testfck" <!--—注意这里 -->  
  3.     basePath="/FCKeditor/"   
  4.     height="60%"  
  5.     skinPath="/FCKeditor/editor/skins/default/"   
  6.     toolbarSet="Default"  
  7.     imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
  8.     linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
  9.     flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
  10.     imageUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
  11.     linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
  12.     flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">  
  13.   

(10) 新建文件，这个文件比较简单，只是简单的显示从在线编辑器传递过来的内容，如下：

<%=request.getParameter("testfck")%>

注意这里的getParameter(“testfck”)，这个”testfck”就是在input.jsp中设置的id。

４．FCKeditor类说明

下面是用来在页面中建立编辑器的FCKEDITOR 类的说明

(1) 构造器:

FCKeditor(instanceName[,width,height,toolbarSet,value])


  • instanceName:编辑器的唯一名称(相当于ID)

  • WIDTH:宽度

  • HEIGHT:高度

  • toolbarSet:工具条集合的名称

  • value:编辑器初始化内容


(2) 属性:

  • instanceName:编辑器实例名

  • width:宽度,默认值为100%

  • height:高度,默认值是200

  • ToolbarSet:工具集名称,参考FCKCONFIG.JS,默认值是Default

  • value:初始化编辑器的HTML 代码,默认值为空

  • BasePath:编辑器的基路径,默认为/Fckeditor/文件夹,注意,尽量不要使用相对路径.最用相对于站点根路径的表示方法,要以/结尾

  • CheckBrowser:是否在显示编辑器前检查浏览器兼容性,默认为true

  • DisplayErrors:是否显示提示错误,默为true

(3) 集合:

Config[Key]=value

这个集合用于更改配置中某一项的值,如

oFckeditor.Config["DefaultLanguage"]="ptbr"

(4) 方法:

Create()

建立并输出编辑器

RepaceTextArea(TextAreaName)

用编辑器来替换对应的文本框

5.如何配置FCKEDITOR

FCKEDITOR 提供了一套用于定制其外观,特性及行为的设置集.主配置文件名为Fckconfig.js你既可以编辑主配置文件,也可以自己定义单独的配置文件.配置文件使用JAVASCRIPT 语法.修改后,在建立编辑器时,可以使用以下语法:

varoFCKeditor=newFCKeditor('FCKeditor1')

oFCKeditor.Config['CustomConfigurationsPath']='/myconfig.js'

oFCKeditor.Create()

提醒:当你修改配置后,请清空浏览器缓存以查看效果

配置选项:

AutoDetectLanguage=true/false 自动检测语言

BaseHref=""相对链接的基地址

ContentLangDirection="ltr/rtl"默认文字方向

ContextMenu=字符串数组,右键菜单的内容

CustomConfigurationsPath=""自定义配置文件路径和名称

Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容

DefaultLanguage=""缺省语言

EditorAreaCss=""编辑区的样式表文件

EnableSourceXHTML=true/false 为TRUE 时,当由可视化界面切换到代码页时,把HTML 处理成XHTML

EnableXHTML=true/false 是否允许使用XHTML 取代HTML

FillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代

FontColors=""设置显示颜色拾取器时文字颜色列表

FontFormats=""设置显示在文字格式列表中的命名

FontNames=""字体列表中的字体名

FontSizes=""字体大小中的字号列表

ForcePasteAsPlainText=true/false 强制粘贴为纯文本

ForceSimpleAmpersand=true/false

FCKEditor.bmp
 描述:  
 文件大小:  90 KB
 看过的:  文件被下载或查看 2242 次

FCKEditor.bmp
下载
SRC.bmp
 描述:  
 文件大小:  286 KB
 看过的:  文件被下载或查看 2163 次

SRC.bmp
下载
NewApp.bmp
 描述:  
 文件大小:  759 KB
 看过的:  文件被下载或查看 2147 次

NewApp.bmp
下载


飞鸟 2007-11-04 10:41 发表评论
]]>javascript对下拉列表框(select)的操作http://www.blogjava.net/yczz/articles/155489.html飞鸟飞鸟Wed, 24 Oct 2007 02:37:00 GMThttp://www.blogjava.net/yczz/articles/155489.htmlhttp://www.blogjava.net/yczz/comments/155489.htmlhttp://www.blogjava.net/yczz/articles/155489.html#Feedback0http://www.blogjava.net/yczz/comments/commentRss/155489.htmlhttp://www.blogjava.net/yczz/services/trackbacks/155489.html
下面是我们例子的基础；这不是一个标准的表单。

下面是我们例子的基础；这不是一个标准的表单。

<form id="f">
<select size="1" name="s">
<option value="aspxuexi.com">asp学习网</option>
<option value="baidu.com">百度</option>
</select>
</form>

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

<script type="text/javascript">
<!--
var f = document.getElementById("f");

//获得select列表项数目
document.write(f.s.options.length);
document.write(f.s.length);

//当前选中项的下标(从0 开始)（有两种方法）
//如果选择了多项，则返回第一个选中项的下标
document.write(f.s.options.selectedIndex);
document.write(f.s.selectedIndex);

//检测某一项是否被选中
document.write(f.s.options[0].selected);

//获得某一项的值和文字
document.write(f.s.options[0].value);
document.write(f.s.options[1].text);

//删除某一项
f.s.options[1] = null;

//追加一项
f.s.options[f.s.options.length] = new Option("追加的text", "追加的value");

//更改一项
f.s.options[1] = new Option("更改的text", "更改的value");
//也可以直接设置该项的 text 和 value
//-->
</script>


//全选列表中的项
function SelectAllOption(list)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = true;
}
}


//反选列表中的项 by aspxuexi.com asp学习网
function DeSelectOptions(list)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = !list.options[i].selected;
}
}


//返回列表中选择项数目
function GetSelectedOptionsCnt(list)
{
var cnt = 0;
var i = 0;
for (i=0; i<list.options.length; i++)
{
if (list.options[i].selected)
{
cnt++;
}
}

return cnt;
}


//清空列表
function ClearList(list)
{
while (list.options.length > 0)
{
list.options[0] = null;
}
}


//删除列表选中项
//返回删除项的数量
function DelSelectedOptions(list)
{
var i = 0;
var deletedCnt = 0;
while (i < list.options.length)
{
if (list.options[i].selected)
{
list.options[i] = null;
deletedCnt++;
}
else
{
i++;
}
}

return deletedCnt;
}
//此函数查找相应的项是否存在
//repeatCheck是否进行重复性检查
//若为"v"，按值进行重复值检查
//若为"t"，按文字进行重复值检查
//若为"vt"，按值和文字进行重复值检查
//其它值，不进行重复性检查，返回false
function OptionExists(list, optText, optValue, repeatCheck)
{
var i = 0;
var find = false;

if (repeatCheck == "v")
{
//按值进行重复值检查
for (i=0; i<list.options.length; i++)
{
if (list.options[i].value == optValue)
{
find = true;
break;
}
}
}
else if (repeatCheck == "t")
{
//按文字进行重复检查
for (i=0; i<list.options.length; i++)
{
if (list.options[i].text == optText)
{
find = true;
break;
}
}
}
else if (repeatCheck == "vt")
{
//按值和文字进行重复检查
for (i=0; i<list.options.length; i++)
{
if ((list.options[i].value == optValue) && (list.options[i].text == optText))
{
find = true;
break;
}
}
}

return find;
}


//向列表中追加一个项
//list 是要追加的列表
//optText 和 optValue 分别表示项的文字和值
//repeatCheck 是否进行重复性检查，参见 OptionExists
//添加成功返回 true，失败返回 false
function AppendOption(list, optText, optValue, repeatCheck)
{
if (!OptionExists(list, optText, optValue, repeatCheck))
{
list.options[list.options.length] = new Option(optText, optValue);
return true;
}
else
{
return false;
}
}


//插入项
//index 插入位置，当插入位置 >= 列表现有项数量时，其作用相当于不进行重复检查的追加项
//optText 和 optValue 分别表示项的文字和值
function InsertOption(list, index, optText, optValue)
{
var i = 0;
for (i=list.options.length; i>index; i--)
{
list.options[i] = new Option(list.options[i-1].text, list.options[i-1].value);
}

list.options[index] = new Option(optText, optValue);
}
//将一个列表中的项导到另一个列表中
//repeatCheck是否进行重复性检查，参见OptionExists
//deleteSource项导到目标后，是否删除源列表中的项
//返回影响的项数量
function ListToList(sList, dList, repeatCheck, deleteSource)
{
//所影响的行数
var lines = 0;
var i = 0;
while (i<sList.options.length)
{
if (sList.options[i].selected && AppendOption(dList, sList.options[i].text, sList.options[i].value, repeatCheck))
{
//添加成功
lines++;
if (deleteSource)
{
//删除源列表中的项
sList.options[i] = null;
}
else
{
i++;
}
}
else
{
i++;
}
}

return lines;
}


//列表中选中项上移
function MoveSelectedOptionsUp(list)
{
var i = 0;
var value = "";
var text = "";
for (i=0; i<(list.options.length-1); i++)
{
if (!list.options[i].selected && list.options[i+1].selected)
{
value = list.options[i].value;
text = list.options[i].text;
list.options[i] = new Option(list.options[i+1].text, list.options[i+1].value);
list.options[i].selected = true;
list.options[i+1] = new Option(text, value);
}
}
}


//列表中选中项下移
function MoveSelectedOptionsDown(list)
{
var i = 0;
var value = "";
var text = "";
for (i=list.options.length-1; i>0; i--)
{

//www.aspxuexi.com
if (!list.options[i].selected && list.options[i-1].selected)
{
value = list.options[i].value;
text = list.options[i].text;
list.options[i] = new Option(list.options[i-1].text, list.options[i-1].value);
list.options[i].selected = true;
list.options[i-1] = new Option(text, value);
}
}
} 

 

飞鸟 2007-10-24 10:37 发表评论
]]>HTML中事件触发列表与解说http://www.blogjava.net/yczz/articles/144817.html飞鸟飞鸟Thu, 13 Sep 2007 04:58:00 GMThttp://www.blogjava.net/yczz/articles/144817.htmlhttp://www.blogjava.net/yczz/comments/144817.htmlhttp://www.blogjava.net/yczz/articles/144817.html#Feedback0http://www.blogjava.net/yczz/comments/commentRss/144817.htmlhttp://www.blogjava.net/yczz/services/trackbacks/144817.html
一般事件
事件 浏览器支持 描述
onClick HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 		鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onDblClick HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 		鼠标双击事件
onMouseDown HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 		鼠标上的按钮被按下了
onMouseUp HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 		鼠标按下后，松开时激发的事件
onMouseOver HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 		当鼠标移动到某对象范围的上方时触发的事件
onMouseMove HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 		鼠标移动时触发的事件
onMouseOut HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N3 | O3 		当鼠标离开某对象范围时触发的事件
onKeyPress HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 		当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
onKeyDown HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 		当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUp HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 		当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
页面相关事件
事件 浏览器支持 描述
onAbort HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N3 | O 		图片在下载时被用户中断
onBeforeUnload HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 		当前页面的内容将要被改变时触发的事件
onError HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N3 | O 		捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误
onLoad HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 		页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成
onMove HTML: 2 | 3 | 3.2 | 4
Browser: IE | N4 | O 		浏览器的窗口被移动时触发的事件
onResize HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 		当浏览器的窗口大小被改变时触发的事件
onScroll HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 		浏览器的滚动条位置发生变化时触发的事件
onStop HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O		 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
onUnload HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 		当前页面将被改变时触发的事件
表单相关事件
事件 浏览器支持 描述
onBlur HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 		当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]
onChange HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 		当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]
onFocus HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 		当某个元素获得焦点时触发的事件
onReset HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N3 | O3 		当表单中RESET的属性被激发时触发的事件
onSubmit HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 		一个表单被递交时触发的事件
滚动字幕事件
事件 浏览器支持 描述
onBounce HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 		在Marquee内的内容移动至Marquee显示范围之外时触发的事件
onFinish HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 		当Marquee元素完成需要显示的内容后触发的事件
onStart HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 		当Marquee元素开始显示内容时触发的事件
编辑事件
事件 浏览器支持 描述
onBeforeCopy HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 		当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
onBeforeCut HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 		当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
onBeforeEditFocus HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O		 当前元素将要进入编辑状态
onBeforePaste HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 		内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件
onBeforeUpdate HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 		当浏览者粘贴系统剪贴板中的内容时通知目标对象
onContextMenu HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O		 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了]
onCopy HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 		当页面当前的被选择内容被复制后触发的事件
onCut HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 		当页面当前的被选择内容被剪切时触发的事件
onDrag HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 		当某个对象被拖动时触发的事件 [活动事件]
onDragDrop HTML: 2 | 3 | 3.2 | 4
Browser: IE | N4 | O 		一个外部对象被鼠标拖进当前窗口或者帧
onDragEnd HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 		当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了
onDragEnter HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 		当对象被鼠标拖动的对象进入其容器范围内时触发的事件
onDragLeave HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 		当对象被鼠标拖动的对象离开其容器范围内时触发的事件
onDragOver HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 		当某被拖动的对象在另一对象容器范围内拖动时触发的事件 [活动事件]
onDragStart HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 		当某对象将被拖动时触发的事件
onDrop HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 		在一个拖动过程中，释放鼠标键时触发的事件
onLoseCapture HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 		当元素失去鼠标移动所形成的选择焦点时触发的事件
onPaste HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O 		当内容被粘贴时触发的事件
onSelect HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 		当文本内容被选择时的事件
onSelectStart HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O 		当文本内容选择将开始发生时触发的事件
数据绑定
事件 浏览器支持 描述
onAfterUpdate HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O		 当数据完成由数据源到对象的传送时触发的事件
onCellChange HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O		 当数据来源发生变化时
onDataAvailable HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O		 当数据接收完成时触发事件
onDatasetChanged HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O		 数据在数据源发生变化时触发的事件
onDatasetComplete HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O		 当来子数据源的全部有效数据读取完毕时触发的事件
onErrorUpdate HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O		 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onRowEnter HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O		 当前数据源的数据发生变化并且有新的有效数据时触发的事件
onRowExit HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O		 当前数据源的数据将要发生变化时触发的事件
onRowsDelete HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O		 当前数据记录将被删除时触发的事件
onRowsInserted HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O		 当前数据源将要插入新数据记录时触发的事件
外部事件
事件 浏览器支持 描述
onAfterPrint HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O		 当文档被打印后触发的事件
onBeforePrint HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O		 当文档即将打印时触发的事件
onFilterChange HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O		 当某个对象的滤镜效果发生变化时触发的事件
onHelp HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O		 当浏览者按下F1或者浏览器的帮助选择时触发的事件
onPropertyChange HTML: 2 | 3 | 3.2 | 4
Browser: IE5 | N | O		 当对象的属性之一发生变化时触发的事件
onReadyStateChange HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N | O		 当对象的初始化属性值发生变化时触发的事件


飞鸟 2007-09-13 12:58 发表评论
]]>DWR文档之开始使用 DWRhttp://www.blogjava.net/yczz/articles/138923.html飞鸟飞鸟Thu, 23 Aug 2007 12:21:00 GMThttp://www.blogjava.net/yczz/articles/138923.htmlhttp://www.blogjava.net/yczz/comments/138923.htmlhttp://www.blogjava.net/yczz/articles/138923.html#Feedback0http://www.blogjava.net/yczz/comments/commentRss/138923.htmlhttp://www.blogjava.net/yczz/services/trackbacks/138923.htmlDWR文档之开始使用 DWR

原文出处: http://www.javatang.com/archives/2006/10/20/254879.html
翻译: Jet Mah
声明: 请维持文章的完整性任意转载

开始使用 DWR

有两种方法来开始 DWR 的学习，最简单的做法是下载官方提供的 WAR 文件然后对此深入研究。不过这种方式不能使你感到将 DWR 整合到你现有的 web 程序有多么的简单，所以我们推荐你跟随下面三个步骤：

1. 安装 DWR JAR 包
下载 dwr.jar 文件，然后将它放在 web 程序的 WEB-INF/lib 目录下面，很可能在这个目录下已经有一些 jar 文件了。

2. 编辑 config 文件

将下面的代码添加到 WEB-INF/web.xml 文件中，<servlet>需要放在另外的<servlet>之后，<servlet-mapping>也是如此。

<servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <display-name>DWR Servlet</display-name>
  <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
  <init-param>
     <param-name>debug</param-name>
     <param-value>true</param-value>
  </init-param>
</servlet>

<servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

接下来创建 dwr.xml 文件并将此放在 web.xml 所在的 WEB-INF 目录下。文件中类似下面的内容：

<!DOCTYPE dwr PUBLIC
    ”-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN”
    ”http://www.getahead.ltd.uk/dwr/dwr10.dtd”>

<dwr>
  <allow>
    <create creator=”new” javascript=”JDate”>
      <param name=”class” value=”java.util.Date”/>
    </create>
    <create creator=”new” javascript=”Demo”>
      <param name=”class” value=”your.java.Bean”/>
    </create>
  </allow>
</dwr>

DWR 配置文件定义了由 DWR 创建和被 Javascript 远程使用的类。在上面的例子中我们在远程创建了2个类，并且给出了在 Javascript 中的类名。

上面使用的 new creator 使用了所有的 JavaBeans 必须含有的公有（public）无参（no-args）的构造函数。值得一提的是， DWR 还有一些限制：

  • 避免使用 JavaScript 保留字；以保留字命名的方法将自动被排除。大多数 JavaScript 的保留字同时也是 Java 的保留字，因此无论如何你也不能使用一个名为 “try()” 的方法。但是最常用的一个词 “delete()”，在 JavaScript 中有特殊的含义而在 Java 中没有。
  • 重载方法（Overloaded methods）将会在调用的时候陷入未知的状况，因此应该避免重载方法。

    3. 访问下面的地址
    http://localhost:8080/[YOUR-WEBAPP]/dwr/

    你应该会看到一个页面，上面显示了刚才你在第二步所创建的类。进入一个链接之后你会看到所有等待调用方法的列表。这些动态产生的例子你也能通过 DWR 来实现。

    亲自尝试和体会下吧。

    怎样应用到你的 Web 程序中？

    在侧边栏有很多例子演示了怎样改变网页中的文本、更新列表、操作表单和动态修改表格。每一个例子都有详细的说明。

    另外一个开始方法就是从页面中查看源代码，这些页面你刚刚浏览过：

  • 进入 http://localhost:8080/[YOUR-WEBAPP]/dwr/ 然后点击你创建的类；
  • 查看源代码然后定位到你所感兴趣的方法的代码行；
  • 将这些文本粘贴到你 Web 程序的一个 HTML 或 JSP页面中；
  • 包含下面的 javascrip 文件：

    <script src=’/[YOUR-WEBAPP]/dwr/interface/[YOUR-SCRIPT].js’></script>
    <script src=’/[YOUR-WEBAPP]/dwr/engine.js’></script>

    你可以根据实际情况修改 /[YOUR-WEBAPP]/ 部分。

     



    • 飞鸟 2007-08-23 20:21 发表评论
    ]]>    Javascript中最常用的55个经典技巧http://www.blogjava.net/yczz/articles/136557.html飞鸟飞鸟Tue, 14 Aug 2007 01:03:00 GMThttp://www.blogjava.net/yczz/articles/136557.htmlhttp://www.blogjava.net/yczz/comments/136557.htmlhttp://www.blogjava.net/yczz/articles/136557.html#Feedback0http://www.blogjava.net/yczz/comments/commentRss/136557.htmlhttp://www.blogjava.net/yczz/services/trackbacks/136557.html1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
    <table border oncontextmenu=return(false)><td>no</table> 可用于Table

    2. <body onselectstart="return false"> 取消选取、防止复制

    3. onpaste="return false" 不准粘贴

    4. oncopy="return false;" oncut="return false;" 防止复制

    5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

    6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标


    7. <input style="ime-mode:disabled"> 关闭输入法


    8. 永远都会带着框架
    <script language="JavaScript"><!--
    if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页
    // --></script>


    9. 防止被人frame
    <SCRIPT LANGUAGE=JAVASCRIPT><!--
    if (top.location != self.location)top.location=self.location;
    // --></SCRIPT>


    10. 网页将不能被另存为
    <noscript><*** src="/*.html>";</***></noscript>


    11. <input type=button value="/查看网页源代码
    onclick="window.location = "view-source:"+ "http://www.pconline.com.cn"">
    12.删除时确认
    <a href=""javascript :if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"">删除</a>


    13. 取得控件的绝对位置
    //Javascript
    <script language="Javascript">
    function getIE(e){
    var t=e.offsetTop;
    var l=e.offsetLeft;
    while(e=e.offsetParent){
    t+=e.offsetTop;
    l+=e.offsetLeft;
    }
    alert("top="+t+"/nleft="+l);
    }
    </script>
    //VBScript
    <script language="VBScript"><!--
    function getIE()
    dim t,l,a,b
    set a=document.all.img1
    t=document.all.img1.offsetTop
    l=document.all.img1.offsetLeft
    while a.tagName<>"BODY"
    set a = a.offsetParent
    t=t+a.offsetTop
    l=l+a.offsetLeft
    wend
    msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"
    end function
    --></script>


    14. 光标是停在文本框文字的最后
    <script language="javascript">
    function cc()
    {
    var e = event.srcElement;
    var r =e.createTextRange();
    r.moveStart("character",e.value.length);
    r.collapse(true);
    r.select();
    }
    </script>
    <input type=text name=text1 value="123" onfocus="cc()">


    15. 判断上一页的来源
    javascript :
    document.referrer


    16. 最小化、最大化、关闭窗口
    <object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
    <param name="Command" value="Minimize"></object>
    <object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
    <param name="Command" value="Maximize"></object>
    <OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
    <PARAM NAME="Command" value="/Close"></OBJECT>
    <input type=button value="/最小化 onclick=hh1.Click()>
    <input type=button value="/blog/最大化 onclick=hh2.Click()>
    <input type=button value=关闭 onclick=hh3.Click()>
    本例适用于IE


    17.屏蔽功能键Shift,Alt,Ctrl
    <script>
    function look(){
    if(event.shiftKey)
    alert("禁止按Shift键!"); //可以换成ALT　CTRL
    }
    document.onkeydown=look;
    </script>


    18. 网页不会被缓存
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    或者<META HTTP-EQUIV="expires" CONTENT="0">


    19.怎样让表单没有凹凸感？
    <input type=text style="""border:1 solid #000000">
    或
    <input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:
    1 solid #000000"></textarea>


    20.<div><span>&<layer>的区别？
    <div>(division)用来定义大段的页面元素，会产生转行
    <span>用来定义同一行内的元素，跟<div>的唯一区别是不产生转行
    <layer>是ns的标记，ie不支持，相当于<div>


    21.让弹出窗口总是在最上面:
    <body onblur="this.focus();">


    22.不要滚动条?
    让竖条没有:
    <body style="overflow:scroll;overflow-y:hidden">
    </body>
    让横条没有:
    <body style="overflow:scroll;overflow-x:hidden">
    </body>
    两个都去掉？更简单了
    <body scroll="no">
    </body>


    23.怎样去掉图片链接点击后，图片周围的虚线？
    <a href="#" onFocus="this.blur()"><img src="/logo.jpg" border=0></a>


    24.电子邮件处理提交表单
    <form name="form1" method="post" action=mailto:****@***.com
    enctype="text/plain">
    <input type=submit>
    </form>


    25.在打开的子窗口刷新父窗口的代码里如何写？
    window.opener.location.reload()


    26.如何设定打开页面的大小
    <body onload="top.resizeTo(300,200);">
    打开页面的位置<body onload="top.moveBy(300,200);">


    27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
    <STYLE>
    body
    {background-image:url(/logo.gif); background-repeat:no-repeat;
    background-position:center;background-attachment: fixed}
    </STYLE>


    28. 检查一段字符串是否全由数字组成
    <script language="Javascript"><!--
    function checkNum(str){return str.match(//D/)==null}
    alert(checkNum("1232142141"))
    alert(checkNum("123214214a1"))
    // --></script>


    29. 获得一个窗口的大小
    document.body.clientWidth; document.body.clientHeight


    30. 怎么判断是否是字符
    if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");
    else alert("全是字符");


    31.TEXTAREA自适应文字行数的多少
    <textarea rows=1 name=s1 cols=27 onpropertychange
    ="this.style.posHeight=this.scrollHeight">
    </textarea>


    32. 日期减去天数等于第二个日期
    <script language=Javascript>
    function cc(dd,dadd)
    {
    //可以加上错误处理
    var a = new Date(dd)
    a = a.valueOf()
    a = a - dadd * 24 * 60 * 60 * 1000
    a = new Date(a)
    alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
    }
    cc("12/23/2002",2)
    </script>


    33. 选择了哪一个Radio
    <HTML><script language="vbscript">
    function checkme()
    for each ob in radio1
    if ob.checked then
    window.alert ob.value
    next
    end function
    </script><BODY>
    <INPUT name="radio1" type="radio" value="/style" checked>Style
    <INPUT name="radio1" type="radio" value="/blog/barcode">Barcode
    <INPUT type="button" value="check" onclick="checkme()">
    </BODY></HTML>


    34.脚本永不出错
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Hide
    function killErrors() {
    return true;
    }
    window.onerror = killErrors;
    // -->
    </SCRIPT>


    35.ENTER键可以让光标移到下一个输入框
    <input onkeydown="if(event.keyCode==13)event.keyCode=9">


    36. 检测某个网站的链接速度：
    把如下代码加入<body>区域中:
    <script language=Javascript>
    tim=1
    setInterval("tim++",100)
    b=1
    var autourl=new Array()
    autourl[1]=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>www.njcatv.net"
    autourl[2]="javacool.3322.net"
    autourl[3]=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>www.sina.com.cn"
    autourl[4]="www.nuaa.edu.cn"
    autourl[5]=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>www.cctv.com"
    function butt(){
    ***("<form name=autof>")
    for(var i=1;i<autourl.length;i++)
    ***("<input type=text name=txt"+i+" size=10 value="/测试中……> =》<input type=text
    name=url"+i+" size=40> =》<input type=button value="/blog/GO
    onclick=window.open(this.form.url"+i+".value)><br>")
    ***("<input type=submit value=刷新></form>")
    }
    butt()
    function auto(url){
    document.forms[0]["url"+b].value=url
    if(tim>200)
    {document.forms[0]["txt"+b].value="/链接超时"}
    else
    {document.forms[0]["txt"+b].value="/blog/时间"+tim/10+"秒"}
    b++
    }
    function run(){for(var i=1;i<autourl.length;i++)***("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1
    onerror=auto("http://"+autourl+"")>")}
    run()</script>


    37. 各种样式的光标
    auto ：标准光标
    default ：标准箭头
    hand ：手形光标
    wait ：等待光标
    text ：I形光标
    vertical-text ：水平I形光标
    no-drop ：不可拖动光标
    not-allowed ：无效光标
    help ：?帮助光标
    all-scroll ：三角方向标
    move ：移动标
    crosshair ：十字标
    e-resize
    n-resize
    nw-resize
    w-resize
    s-resize
    se-resize
    sw-resize


    38.页面进入和退出的特效
    进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
    推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">  
    这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:
    　　0 矩形缩小
    　　1 矩形扩大
    　　2 圆形缩小
    　　3 圆形扩大
    　　4 下到上刷新
    　　5 上到下刷新
    　　6 左到右刷新
    　　7 右到左刷新
    　　8 竖百叶窗
    　　9 横百叶窗
    　　10 错位横百叶窗
    　　11 错位竖百叶窗
    　　12 点扩散
    　　13 左右到中间刷新
    　　14 中间到左右刷新
    　　15 中间到上下
    　　16 上下到中间
    　　17 右下到左上
    　　18 右上到左下
    　　19 左上到右下
    　　20 左下到右上
    　　21 横条
    　　22 竖条
    　　23 以上22种随机选择一种


    39.在规定时间内跳转
    <META http-equiv=V="REFRESH" content="5;URL=http://www.51js.com">


    40.网页是否被检索
    <meta name="ROBOTS" content="属性值">
    　　其中属性值有以下一些:
    　　属性值为"all": 文件将被检索，且页上链接可被查询；
    　　属性值为"none": 文件不被检索，而且不查询页上的链接；
    　　属性值为"index": 文件将被检索；
    　　属性值为"follow": 查询页上的链接；
    　　属性值为"noindex": 文件不检索，但可被查询链接；
    　　属性值为"nofollow": 文件不被检索，但可查询页上的链接。


    41、email地址的分割
    把如下代码加入<body>区域中
    <a href="mailto:webmaster@sina.com">webmaster@sina.com</a>


    42、流动边框效果的表格
    把如下代码加入<body>区域中
    <SCRIPT>
    l=Array(6,7,8,9,'a','b','b','c','d','e','f')
    Nx=5;Ny=35
    t="<table border=0 cellspacing=0 cellpadding=0 height="+((Nx+2)*16)+"><tr>"
    for(x=Nx;x<Nx+Ny;x++)
    t+="<td width=16 id=a_mo"+x+">　</td>"
    t+="</tr><tr><td width=10 id=a_mo"+(Nx-1)+">　</td><td colspan="+(Ny-2)+" rowspan="+(Nx)+">　</td><td width=16 id=a_mo"+(Nx+Ny)+"></td></tr>"
    for(x=2;x<=Nx;x++)
    t+="<tr><td width=16 id=a_mo"+(Nx-x)+">　</td><td width=16 id=a_mo"+(Ny+Nx+x-1)+">　</td></tr>"
    t+="<tr>"
    for(x=Ny;x>0;x--)
    t+="<td width=16 id=a_mo"+(x+Nx*2+Ny-1)+">　</td>"
    ***(t+"</tr></table>")
    var N=Nx*2+Ny*2
    function f1(y){
    for(i=0;i<N;i++){
    c=(i+y)%20;if(c>10)c=20-c
    document.all["a_mo"+(i)].bgColor=""""#0000"+l[c]+l[c]+"'"}
    y++
    setTimeout('f1('+y+')','1')}
    f1(1)
    </SCRIPT>


    43、JavaScript主页弹出窗口技巧
    窗口中间弹出
    <script>
    window.open("http://www.cctv.com","","width=400,height=240,top="+(screen.availHeight-240)/2+",left="+(screen.availWidth-400)/2);
    </script>
    ============
    <html>
    <head>
    <script language="LiveScript">
    function WinOpen() {
        msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
        msg.***("<HEAD><TITLE>哈 罗!</TITLE></HEAD>");
        msg.***("<CENTER><H1>酷 毙 了!</H1><h2>这 是<B>JavaScript</B>所 开 的 视 窗!</h2></CENTER>");
    }
    </script>
    </head>
    <body>
    <form>
    <input type="button" name="Button1" value="Push me" onclick="WinOpen()">
    </form>
    </body>
    </html>
    ==============
    一、在下面的代码中，你只要单击打开一个窗口，即可链接到赛迪网。而当你想关闭时，只要单击一下即可关闭刚才打开的窗口。
    　　代码如下：
    　　<SCRIPT language="JavaScript">
    　　<！--
    　　function openclk() {
    　　another=open('1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>http://www.ccidnet.com'，'NewWindow');
    　　}
    　　function closeclk() {
    　　another.close();
    　　}
    　　//-->
    　　</SCRIPT>
    　　<FORM>
    　　<INPUT TYPE="BUTTON" NAME="open" value="/打开一个窗口" onClick="openclk()">
    　　<BR>
    　　<INPUT TYPE="BUTTON" NAME="close" value="/blog/关闭这个窗口" onClick="closeclk()">
    　　</FORM>
    　　二、上面的代码也太静了，为何不来点动感呢？如果能给页面来个降落效果那该多好啊！
    　　代码如下：
    　　<script>
    　　function drop(n) {
    　　if(self.moveBy){
    　　self.moveBy (0，-900);
    　　for(i = n; i > 0; i--){
    　　self.moveBy(0，3);
    　　}
    　　for(j = 8; j > 0; j--){
    　　self.moveBy(0，j);
    　　self.moveBy(j，0);
    　　self.moveBy(0，-j);
    　　self.moveBy(-j，0);
    　　}
    　　}
    　　}
    　　</script>
    　　<body onLoad="drop(300)">
    　　三、讨厌很多网站总是按照默认窗口打开，如果你能随心所欲控制打开的窗口那该多好。
    　　代码如下:
    　　<SCRIPT LANGUAGE="JavaScript">
    　　<！-- Begin
    　　function popupPage(l， t， w， h) {
    　　var windowprops = "location=no，scrollbars=no，menubars=no，toolbars=no，resizable=yes" +
    　　"，left=" + l + "，top=" + t + "，width=" + w + "，height=" + h;
    　　var URL = "http://www.80cn.com";
    　　popup = window.open(URL，"MenuPopup"，windowprops);
    　　}
    　　// End -->
    　　</script>
    　　<table>
    　　<tr>
    　　<td>
    　　<form name=popupform>
    　　<pre>
    　　打开页面的参数<br>
    　　离开左边的距离: <input type=text name=left size=2 maxlength=4> pixels
    　　离开右边的距离: <input type=text name=top size=2 maxlength=4> pixels
    　　窗口的宽度: <input type=text name=width size=2 maxlength=4> pixels
    　　窗口的高度: <input type=text name=height size=2 maxlength=4> pixels
    　　</pre>
    　　<center>
    　　<input type=button value="打开这个窗口！" onClick="popupPage(this.form.left.value， this.form.top.value， this.form.width.value，
    this.form.height.value)">
    　　</center>
    　　</form>
    　　</td>
    　　</tr>
    　　</table>你只要在相对应的对话框中输入一个数值即可，将要打开的页面的窗口控制得很好。


    44、页面的打开移动
    把如下代码加入<body>区域中
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    for (t = 2; t > 0; t--) {
    for (x = 20; x > 0; x--) {
    for (y = 10; y > 0; y--) {
    parent.moveBy(0,-x);
       }
    }
    for (x = 20; x > 0; x--) {
    for (y = 10; y > 0; y--) {
    parent.moveBy(0,x);
       }
    }
    for (x = 20; x > 0; x--) {
    for (y = 10; y > 0; y--) {
    parent.moveBy(x,0);
       }
    }
    for (x = 20; x > 0; x--) {
    for (y = 10; y > 0; y--) {
    parent.moveBy(-x,0);
         }
       }
    }
    //-->
    //   End -->
    </script>


    45、显示个人客户端机器的日期和时间
    <script language="LiveScript">
    <!-- Hiding
       today = new Date()
       ***("现 在 时 间 是： ",today.getHours(),":",today.getMinutes())
       ***("<br>今 天 日 期 为： ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
    // end hiding contents -->
    </script>


    46、自动的为你每次产生最後修改的日期了：
    <html>
    <body>
    This is a simple HTML- page.
    <br>
    Last changes:
       <script language="LiveScript">
       <!--   hide script from old browsers
         ***(document.lastModified)
       // end hiding contents -->
       </script>
    </body>
    </html>


    47、不能为空和邮件地址的约束：
    <html>
    <head>
    <script language="JavaScript">
    <!-- Hide
    function test1(form) {
       if (form.text1.value == "")
         alert("您 没 写 上 任 何 东 西， 请 再 输 入 一 次 !")
       else {
        alert("嗨 "+form.text1.value+"! 您 已 输 入 完 成 !");
       }
    }
    function test2(form) {
       if (form.text2.value == "" ||
           form.text2.value.indexOf('@', 0) == -1)
             alert("这 不 是 正 确 的 e-mail address! 请 再 输 入 一 次 !");
       else alert("您 已 输 入 完 成 !");
    }
    // -->
    </script>
    </head>
    <body>
    <form name="first">
    Enter your name:<br>
    <input type="text" name="text1">
    <input type="button" name="button1" value="输 入 测 试" onClick="test1(this.form)">
    <P>
    Enter your e-mail address:<br>
    <input type="text" name="text2">
    <input type="button" name="button2" value="输 入 测 试" onClick="test2(this.form)">
    </body>


    48、跑马灯
    <html>
    <head>
    <script language="JavaScript">
    <!-- Hide
    var scrtxt="怎麽样 ! 很酷吧 ! 您也可以试试."+"Here goes your message the visitors to your
    page will "+"look at for hours in pure fascination...";
    var lentxt=scrtxt.length;
    var width=100;
    var pos=1-width;
    function scroll() {
       pos++;
       var scroller="";
       if (pos==lentxt) {
         pos=1-width;
       }
       if (pos<0) {
         for (var i=1; i<=Math.abs(pos); i++) {
           scroller=scroller+" ";}
         scroller=scroller+scrtxt.substring(0,width-i+1);
       }
       else {
         scroller=scroller+scrtxt.substring(pos,width+pos);
       }
       window.status = scroller;
       setTimeout("scroll()",150);
       }
    //-->
    </script>
    </head>
    <body onLoad="scroll();return true;">
    这里可显示您的网页 !
    </body>
    </html>


    49、在网页中用按钮来控制前页，后页和主页的显示。
    <html>
    <body>
    <FORM NAME="buttonbar">
          <INPUT TYPE="button" VALUE="Back" onClick="history.back()">
          <INPUT TYPE="button" VALUE="JS- Home" onClick="location='script.html'">
          <INPUT TYPE="button" VALUE="Next" onCLick="history.forward()">
    </FORM>
    </body>
    </html>
    50、查看某网址的源代码
    把如下代码加入<body>区域中
    <SCRIPT>
    function add()
    {
    var ress=document.forms[0].luxiaoqing.value
    window.location="view-source:"+ress;
    }
    </SCRIPT>
    输入要查看源代码的URL地址:
    <FORM><input type="text" name="luxiaoqing" size=40 value="http://"></FORM>
    <FORM><br>
    <INPUT type="button" value="查看源代码" onClick=add()>
    </FORM>


    51、title显示日期
    把如下代码加入<body>区域中:
    <script language="JavaScript1.2">
    <!--hide
    var isnMonth = new
    Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
    var isnDay = new
    Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
    today = new Date () ;
    Year=today.getYear();
    Date=today.getDate();
    if (document.all)
    document.title="今天是: "+Year+"年"+isnMonth[today.getMonth()]+Date+"日"+isnDay[today.getDay()]
    //--hide-->
    </script>


    52、显示所有链接
    把如下代码加入<body>区域中
    <script language="JavaScript1.2">
    <!--
    function extractlinks(){
    var links=document.all.tags("A")
    var total=links.length
    var win2=window.open("","","menubar,scrollbars,toolbar")
    win2.***("<font size='2'>一共有"+total+"个连接</font><br>")
    for (i=0;i<total;i++){
    win2.***("<font size='2'>"+links[i].outerHTML+"</font><br>")
    }
    }
    //-->
    </script>
    <input type="button" onClick="extractlinks()" value="显示所有的连接">


    53、回车键换行
    把如下代码加入<body>区域中
    <script type="text/javascript">                
    function handleEnter (field, event) {
       var keyCode = event.keyCode ? event.keyCode : event.which ?
    event.which : event.charCode;
       if (keyCode == 13) {
        var i;
        for (i = 0; i < field.form.elements.length; i++)
         if (field == field.form.elements[i])
          break;
        i = (i + 1) % field.form.elements.length;
        field.form.elements[i].focus();
        return false;
       }
       else
       return true;
    }      
    </script>
    <form>
    <input type="text" onkeypress="return handleEnter(this, event)"><br>
    <input type="text" onkeypress="return handleEnter(this, event)"><br>
    <textarea>回车换行


    54、确认后提交
    把如下代码加入<body>区域中
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function msg(){
    if (confirm("你确认要提交嘛！"))
    document.lnman.submit()
    }
    //-->
    </SCRIPT>
    <form name="lnman" method="post" action="">
       <p>
         <input type="text" name="textfield" value="确认后提交">
       </p>
       <p>
         <input type="button" name="Submit" value="提交" onclick="msg();">
       </p>
    </form>


    55、改变表格的内容
    把如下代码加入<body>区域中
    <script ***script>
    var arr=new Array()
    arr[0]="一一一一一";
    arr[1]="二二二二二";
    arr[2]="三三三三三";
    </script>
    <select onchange="zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]">
       <option value=a>改变第一格</option>
       <option value=a>改变第二格</option>
       <option value=a>改变第三格</option>
    </select>
    <table id=zz border=1>
       <tr height=20>
         <td width=150>第一格</td>
    <td width=150>第二格</td>
    <td width=150>第三格</td>
       </tr>
    </table>



    飞鸟 2007-08-14 09:03 发表评论
    ]]>    解决AJAX中文乱码问题比较好的方案http://www.blogjava.net/yczz/articles/109866.html飞鸟飞鸟Wed, 11 Apr 2007 04:12:00 GMThttp://www.blogjava.net/yczz/articles/109866.htmlhttp://www.blogjava.net/yczz/comments/109866.htmlhttp://www.blogjava.net/yczz/articles/109866.html#Feedback0http://www.blogjava.net/yczz/comments/commentRss/109866.htmlhttp://www.blogjava.net/yczz/services/trackbacks/109866.html 写在前面：
         
          这段时间在深圳一家公司实习，公司规定要做2个课题来考验我们水平，遇到一个模块只有用AJAX实现才是最完美的，这让我我想起最初接触AJAX时就是由于中文乱码问题让我放弃了使用这个技术，但是这次我没有放弃选择权，我不得不开启喜爱的百度，搜索着解决方案，但是用来网上所说的好几个方法都无法解决，所以不得不自己思考一下解决乱码的方法。
           现在WEB系统基本上都要用到过滤流技术可是几乎所有的公司都是用GBK编码来过滤字符，但是AJAX是老外的技术他们用UTF-8编码，怎么解决这个问题呢，我想到的昨天一个double类型转换为金钱格式显示问题，如果在后台处理这个问题要花费很多功夫，但是放在前台用javascript处理就很好，这样既不影响后台业务，又实现了前台显示格式的要求。那么AJAX编码能不能在前台转换了，立刻寻找相关质料在下面列出。
     
    URL编码方法有3种
    escape() ,unescape()      encodeURI(),decodeURI()       encodeURIComponent(),decodeURIComponent() 这几种编码所起的作用各不相同

    escape() 方法：  

    采用ISO Latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。

    不会被此方法编码的字符： @ * / +

    encodeURI() 方法：

    把URI字符串采用UTF-8编码格式转化成escape格式的字符串。

    不会被此方法编码的字符：! @ # $& * ( ) = : / ; ? + '

    encodeURIComponent() 方法：

    把URI字符串采用UTF-8编码格式转化成escape格式的字符串。与encodeURI()相比，这个方法将对更多的字符进行编码，比如 / 等字符。所以如果字符串里面包含了URI的几个部分的话，不能用这个方法来进行编码，否则 / 字符被编码之后URL将显示错误。

    不会被此方法编码的字符：! * ( ) '

    因此，对于中文字符串来说，如果不希望把字符串编码格式转化成UTF-8格式的（比如原页面和目标页面的charset是一致的时候），只需要使用escape。如果你的页面是GB2312或者其他的编码，而接受参数的页面是UTF-8编码的，就要采用encodeURI或者encodeURIComponent。

    在后台JAVA处理函数：

    JS是：escape()函数    
    Java是:   
    java.net.URLEncoder.encode()   
    java.net.URLDecoder.decode()  
    但是这个函数已经不推荐使用了
    现在推荐使用
    java.net.URLEncoder.encode(str,encode);
    java.net.URLDecoder.decode(str,encode);

    这样就构成了统一的编码格式下面举简单的个例子：
    在服务器端：
    String encode=java.net.URLEncoder.encode("大家好","utf-8");
    //encode=("%E5%A4%A7%E5%AE%B6%E5%A5%BD"
    String decode=java.net.URLDecoder.decode("%E5%A4%A7%E5%AE%B6%E5%A5%BD","utf-8");

    客户端解码Javascript:
    decodeURIComponent(xmlHttp.responseText);
    客户端传送时编码：
    encodeURIComponent("大家好")
    或
    encodeURI("大家好")
    这样就可以解决中文乱码编码问题了。

    下面方一个最简单的AJAX给大家下载：
    点击下载

    飞鸟 2007-04-11 12:12 发表评论
    ]]>    dwr简介--一个例子(续)http://www.blogjava.net/yczz/articles/46819.html飞鸟飞鸟Thu, 18 May 2006 06:59:00 GMThttp://www.blogjava.net/yczz/articles/46819.htmlhttp://www.blogjava.net/yczz/comments/46819.htmlhttp://www.blogjava.net/yczz/articles/46819.html#Feedback0http://www.blogjava.net/yczz/comments/commentRss/46819.htmlhttp://www.blogjava.net/yczz/services/trackbacks/46819.html阅读全文

    飞鸟 2006-05-18 14:59 发表评论
    ]]>    dwr简介--一个例子(续二) http://www.blogjava.net/yczz/articles/46820.html飞鸟飞鸟Thu, 18 May 2006 06:59:00 GMThttp://www.blogjava.net/yczz/articles/46820.htmlhttp://www.blogjava.net/yczz/comments/46820.htmlhttp://www.blogjava.net/yczz/articles/46820.html#Feedback0http://www.blogjava.net/yczz/comments/commentRss/46820.htmlhttp://www.blogjava.net/yczz/services/trackbacks/46820.html阅读全文

    飞鸟 2006-05-18 14:59 发表评论
    ]]>    dwr简介--一个例子(结合Struts) http://www.blogjava.net/yczz/articles/46795.html飞鸟飞鸟Thu, 18 May 2006 05:48:00 GMThttp://www.blogjava.net/yczz/articles/46795.htmlhttp://www.blogjava.net/yczz/comments/46795.htmlhttp://www.blogjava.net/yczz/articles/46795.html#Feedback0http://www.blogjava.net/yczz/comments/commentRss/46795.htmlhttp://www.blogjava.net/yczz/services/trackbacks/46795.html阅读全文

    飞鸟 2006-05-18 13:48 发表评论
    ]]>    转帖DWR学习 http://www.blogjava.net/yczz/articles/46793.html飞鸟飞鸟Thu, 18 May 2006 05:47:00 GMThttp://www.blogjava.net/yczz/articles/46793.htmlhttp://www.blogjava.net/yczz/comments/46793.htmlhttp://www.blogjava.net/yczz/articles/46793.html#Feedback0http://www.blogjava.net/yczz/comments/commentRss/46793.htmlhttp://www.blogjava.net/yczz/services/trackbacks/46793.html http://getahead.ltd.uk/dwr/
    这段时间较闲,研究了一番dwr.发现dwr实现的AJAX有些地方确实很是先进.比如动态生成javascript代码;隐藏的http协议;javascript于java代码交互的是javascript对象(或字符串)等.
    以下是我临时译的一些东西.本来想全译,发现dwr实在是简单,就随便写了.英文居差,现一把.

    1、DWR: Easy AJAX for JAVA

    作为一个java open source library,DWR可以帮助开发人员完成应用AJAX技术的web程序。它可以让浏览器上的javascript方法调用运行在web服务器上java方法。

    DWR主要由两部门组成。javascript与web服务器通信并更新web页；运行在web服务器的Servlet处理请求并把响应发回浏览器。

    DWR采用新颖的方法实现了AJAX(本来也没有确切的定义)，在java代码基础上动态的生成javascript代码。web开发者可以直接调用这些javascript代码，然而真正的代码是运行在web服务器上的java code。出与安全考虑，开发者必须配置哪些java class暴露给DWR.(dwr.xml)

    这种从(java到javascript)调用机制给用户一种感觉，好象常规的RPC机制，或RMI or SOAP.但是它运行在web上，不需要任何浏览器插件。

    DWR不认为浏览器和web服务器之间协议重要，把系统界面放在首位。最大挑战是java method call的同步特征与ajax异步特性之间的矛盾。在异步模型里，结果只有在方法结束后才有效。DWR解决了这个问题，把回调函数当成参数传给方法，处理完成后，自动调用回调方法。

    这个图表显示了，通过javascript事件，DWR能改变select的内容，当然这些内容由java代码返回。 javascript函数Data.getOptions(populateList)由DWR动态生成，这个函数会调用java class Data类的方法。DWR处理如何远程调用，包括转换所有的参数和返回的结果（javascript\java）。java方法执行完后，执行回调方法populateList。在整个过程中我们就想在用本地的方法一样。

    2、Getting Started

    废话少说，试试就ok了。
    web.xml

    <?xml version="1.0" encoding="ISO-8859-1"?>
    <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">

    <web-app id="dwr">
    <servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
    </servlet>
    <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>
    </web-app>

    dwr.xml 与web.xml同目录
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
    <dwr>
    <allow>
    <create creator="new" javascript="JDate">
    <param name="class" value="/oblog312/java.util.Date"/>
    </create>
    </allow>
    </dwr>

    index.html
    <html>
    <head>
    <title>DWR - Test Home</title>
    <script type='text/javascript' src="/oblog312/dwr/interface/JDate.js"></script>
    <script type='text/javascript' src="/oblog312/dwr/engine.js"></script>
    <script>
    function init(){
    JDate.getYear(load);
    }
    function load(data){
    alert(data+1900+'年')
    }
    </script>
    </head>
    <body onload="init()">
    </body>
    </html>

    dwr.jar 下载放lib下

    完了，什么，够了，就这些。访问ok!
    3、Examples
    http://www.aboutmyhealth.org/ 这不是Google Suggest吗!ok.
    4、源码浅析
    dwr的设计很象webwork2的设计,隐藏http协议,扩展性，兼容性及强。

    通过研究uk.ltd.getahead.dwr.DWRServlet这个servlet来研究下dwr到底是如何工作滴。

    java代码:  

    web.xml配置
    <servlet>
        <servlet-name>dwr-invoker</servlet-name>
        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
      </servlet>
      <servlet-mapping>
        <servlet-name>dwr-invoker</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>


    这样所有的/dwr/*所有请求都由这个servlet来处理，它到底处理了些什么能。我们还以上面最简单的例子来看。
    1、 web服务器启动，DWRServlet init()方法调用，init主要做了以下工作。
    设置日志级别、实例化DWR用到的单例类（这些类在jvm中只有一个实例对象）、读去配置文件（包括dwr.jar包中的dwr.xml,WEB-INF/dwr.xml. config*.xml）。
    2、请求处理
    DWRServlet.doGet, doPost方法都调用processor.handle(req, resp)方法处理。Processor对象在init()方法中已经初始化了。
    java代码:  

    public void handle(HttpServletRequest req, HttpServletResponse resp)
            throws IOException
        {
            String pathinfo = req.getPathInfo();
            if(pathinfo == null || pathinfo.length() == 0 || pathinfo.equals("/"))
            {
                resp.sendRedirect(req.getContextPath() + req.getServletPath() + '/' + "index.html");
            } else
            if(pathinfo != null && pathinfo.equalsIgnoreCase("/index.html"))
            {
                doIndex(req, resp);
            } else
            if(pathinfo != null && pathinfo.startsWith("/test/"))
            {
                doTest(req, resp);
            } else
            if(pathinfo != null && pathinfo.equalsIgnoreCase("/engine.js"))
            {
                doFile(resp, "engine.js", "text/javascript");
            } else
            if(pathinfo != null && pathinfo.equalsIgnoreCase("/util.js"))
            {
                doFile(resp, "util.js", "text/javascript");
            } else
            if(pathinfo != null && pathinfo.equalsIgnoreCase("/deprecated.js"))
            {
                doFile(resp, "deprecated.js", "text/javascript");
            } else
            if(pathinfo != null && pathinfo.startsWith("/interface/"))
            {
                doInterface(req, resp);
            } else
            if(pathinfo != null && pathinfo.startsWith("/exec"))
            {
                doExec(req, resp);
            } else
            {
                log.warn("Page not found. In debug/test mode try viewing /[WEB-APP]/dwr/");
                resp.sendError(404);
            }
        }


    哦。这些恍然大悟。dwr/*处理的请求也就这几种。
    （1）dwr/index.html，dwr/test/这种只能在debug模式下使用，调试用。
    dwr/engine.js，dwr/util.js，dwr/deprecated.js当这个请求到达，从dwr.jar包中读取文件流，响应回去。（重复请求有缓存）
    （2）当dwr/interface/这种请求到来，（例如我们在index.html中的 <script type='text/javascript' src="/oblog312/dwr/interface/JDate.js"></script>）DWR做一件伟大的事。把我们在WEB-INF/dwr.xml中的
    <create creator="new" javascript="JDate">
    <param name="class" value="/oblog312/java.util.Date"/>
    </create>
    java.util.Date转化为javascript函数。
    http://localhost:port/simpledwr/dwr/interface/JDate.js看看吧。
    细节也比较简单，通过java反射，把方法都写成javascript特定的方法。（我觉得这些转换可以放到缓存里，下次调用没必要再生成一遍，不知道作者为什么没这样做）。
    （3）dwr/exec
    javascript调用方法时发送这种请求，可能是XMLHttpRequest或IFrame发送。
    当然，javascript调用的方法签名与java代码一致，包括参数，还有javascript的回调方法也传到了服务器端，在服务器端很容易实现。回调方法的java的执行结果 返回类似 <script>callMethod(结果)<script>的javascript字符串,在浏览器执行。哈，一切就这么简单，巧妙。

    dwr的设计构思很是巧妙。
    第一、把java类转化为javascript类由dwr自动完成，只需简单的配置。
    第二、应用起来极其简单。开发者不要该服务器代码就可以集成。
    第三、容易测试。和webwork一样，隐藏的http协议。
    第四、及强扩展性。例如与spring集成，只需修改一点代码。
    第五、性能。就我与jason,等简单比较，dwr性能可能是最好的。

    飞鸟 2006-05-18 13:47 发表评论
    ]]>