BlogJava-

︻┳═一Java

-文章分类-Ajax

ajax jsp 无刷新上传文件

Eric.Zhou — Wed, 19 Mar 2008 02:23:00 GMT

首先要说的就是 ajax 是无法实现上传文件的，可以想一下ajax与后台通信都是通过传递字符串，怎么能传递文件呢？其实出于安全考虑js是不能操作文件的，所以就不要再说用ajax来实现文件的上传了，这是不可能的。
    而本文实现的文件上传也是无页面刷新的，可以说是一种"类似AJAX"方法。
    开始之前先说两句无关的，其实在ajax出现之前，web应用也可以是无刷新的，那时大多通过IFrame来做到这一点。当然Ajax出现之后，人们一窝蜂地投奔Ajax 的阵营了，iFrame 就乏人问津了。但是用iFrame来实现无刷新上传文件确实一个很好的选择。ps：Ajax技术基本上可以说是由google公司带起来的，但少Gmail中上传文件用的还是 IFrame，所以说使用IFrame来上传文件是最好的选择。
    我在这里这里用的技术是jsp，其实asp，php等也是一样可以这么实现的
    一共两个文件就可实现：index.html 和 upload.jsp
--index.html

＜html＞
＜body＞
＜form action="upload.jsp" id="form1" name="form1" encType="multipart/form-data" method="post" target="hidden_frame" ＞
＜input type="file" id="file" name="file" style="width:450"＞
＜INPUT type="submit" value="上传文件"＞＜span id="msg"＞＜/span＞
＜br＞
＜font color="red"＞支持JPG,JPEG,GIF,BMP,SWF,RMVB,RM,AVI文件的上传＜/font＞
＜iframe name='hidden_frame' id="hidden_frame" style='display:none'＞＜/iframe＞
＜/form＞
＜/body＞
＜/html＞
＜script type="text/javascript"＞
function callback(msg)
{
document.getElementById("file").outerHTML = document.getElementById("file").outerHTML;
document.getElementById("msg").innerHTML = "＜font color=red＞"+msg+"＜/font＞";
}
＜/script＞

index.html 中主要要做的就是写一个 form 和 iframe ，并把 form 的 target 设为 iframe 的名字，注意要把 iframe 设为不可见，其他的都是正常的文件上传的写法，这样刷新的页面就是这个隐藏的 Iframe ，而在 index.html 中是不会有页面刷新的，js的 callback 方法是回调方法。用于清空文件上传框和显示后台信息，注意清空文件上传框的方法，和普通方法有点不一样。

--upload.jsp

＜%@ page language="Java" contentType="text/html; charset=gb2312" %＞
＜%@ page import="com.jspsmart.upload.SmartUpload"%＞
＜%
//新建一个SmartUpload对象
SmartUpload su = new SmartUpload();
//上传初始化
su.initialize(pageContext);
// 设定上传限制
//1.限制每个上传文件的最大长度。
su.setMaxFileSize(10000000);
//2.限制总上传数据的长度。
su.setTotalMaxFileSize(20000000);
//3.设定允许上传的文件（通过扩展名限制）,仅允许doc,txt文件。
su.setAllowedFilesList("doc,txt,jpg,rar,mid,waw,mp3,gif");
boolean sign = true;
//4.设定禁止上传的文件（通过扩展名限制）,禁止上传带有exe,bat,jsp,htm,html扩展名的文件和没有扩展名的文件。
try {
su.setDeniedFilesList("exe,bat,jsp,htm,html");
//上传文件
su.upload();
//将上传文件保存到指定目录
su.save("c:\\");
} catch (Exception e) {
e.printStackTrace();
sign = false;
}
if(sign==true)
{
out.println("＜script＞parent.callback('upload file success')＜/script＞");
}else
{
out.println("＜script＞parent.callback('upload file error')＜/script＞");
}
%＞

upload.jsp 中只要注意最后输出的格式就可以了。其实原理就是输出一段js代码到 iframe 中，然后在iframe中来控制它的父页面。

OK，至此一个无刷新的页面上传组件就做好了，不要忘了在 WEB-INF/lib 下加上必须的 jspSmartUpload.jar 包。
需要说明的是使用Iframe来上传，状态栏还是会有刷新的，因为iframe 中的页面刷新了嘛，但是外部页面，就是你所看到的页面是没有刷新的，所以也可以说是类似Ajax上传。

Eric.Zhou 2008-03-19 10:23 发表评论

Ajax.Updater

Eric.Zhou — Tue, 18 Mar 2008 09:49:00 GMT

Syntax `new Ajax.Updater(container, url, options); // make a HTTP request to the specified URL and update the 'container' element.`

Note: to only update a div on success, you may optionally substitute a property list for a simply element id (ie {success:’div_name’} instead of ‘div_name’)

Options

Option	Default value	Description
asynchronous	true	Type of request
evalScripts	false	When set as “true”, scripts in requested url are evaluated
method	‘post’	Lets you decide whether to use Get or Post for the request to the server
contentType	‘application/x-www-form-urlencoded’	Allows you to set the content-type sent to the server
encoding	‘UTF-8’	Allows you to determine the encoding type information given to the server
parameters	’’	Allows you to attach parameters to your AJAX request. Most common: parameters:Form.serialize(this)
postBody	’’	Specify data to post. Something like: postBody:’thisvar=true&thatvar=Howdy’ How does this differ from parameters?
username	’’
password	’’
requestHeaders	’’	Allows you to override the headers, see the Prototype AJAX options for details
onComplete	’’	Function to call on completion of request
onSuccess	’’	Function to call on successful completion of request
onFailure	’’	Function to call on failed request
onException	’’	Function to call on failed request (e.g. attempted cross-site request)
on + Status Code	’’	on404 etc. raise an event when given status code is encountered.
insertion	None	Instead of inserting the response in the existing content (possibly overwriting it) you can pass a valid Insertion object, such as Insertion.Top, Insertion.Bottom, Insertion.Before or Insertion.After.

Hint: If you have set evalScripts:true the script you call (the url parameter) must return a header of ‘Content-Type: text/javascript’ else the browser will not execute it.

Eric.Zhou 2008-03-18 17:49 发表评论

在Struts 2中使用JSON Ajax支持

Eric.Zhou — Wed, 20 Feb 2008 09:02:00 GMT

JSON插件提供了一种名为json的ResultType，一旦为某个Action指定了一个类型为json的Result，则该Result无需映射到任何视图资源。因为JSON插件会负责将Action里的状态信息序列化成JSON格式的数据，并将该数据返回给客户端页面的JavaScript。

　　简单地说，JSON插件允许我们在JavaScript中异步调用Action，而且Action不再需要使用视图资源来显示该Action里的状态信息，而是由JSON插件负责将Action里的状态信息返回给调用页面——通过这种方式，就可以完成Ajax交互。

　　Struts2提供了一种可插拔方式来管理插件，安装Struts2的JSON插件与安装普通插件并没有太大的区别，一样只需要将Struts2插件的JAR文件复制到Web应用的WEB-INF/lib路径下即可。

　　安装JSON插件按如下步骤进行：

　　(1)登陆http://code.google.com/p/jsonplugin/downloads/list站点，下载Struts2的JSON插件的最新版本，当前最新版本是0.7，我们可以下载该版本的JSON插件。

　　(2)将下载到的jsonplugin-0.7.jar文件复制到Web应用的WEB-INF路径下，即可完成JSON插件的安装。

　　实现Actio逻辑

　　假设wo,en输入页面中包含了三个表单域，这三个表单域对于三个请求参数，因此应该使用Action来封装这三个请求参数。三个表单域的name分别为field1、field2和field3。

　　处理该请求的Action类代码如下：　　

public class JSONExample
　　{
　　//封装请求参数的三个属性
　　private String field1;
　　private transient String field2;
　　private String field3;
　　//封装处理结果的属性
　　private int[] ints = {10, 20};
　　private Map map = new HashMap();
　　private String customName = "custom";
　　//三个请求参数对应的setter和getter方法
　　public String getField1()
　　{
　　return field1;
　　}
　　public void setField1(String field1)
　　{
　　this.field1 = field1;
　　}
　　//此处省略了field1和field2两个字段的setter和getter方法
　　...
　　//封装处理结果的属性的setter和getter方法
　　public int[] getInts()
　　{
　　return ints;
　　}
　　public void setInts(int[] ints)
　　{
　　this.ints = ints;
　　}
　　public Map getMap()
　　{
　　return map;
　　}
　　public void setMap(Map map)
　　{
　　this.map = map;
　　}
　　//使用注释语法来改变该属性序列化后的属性名
　　@JSON(name="newName")
　　public String getCustomName()
　　{
　　return this.customName;
　　}
　　public String execute()
　　{
　　map.put("name", "yeeku");
　　return Action.SUCCESS;
　　}
　　}

　　在上面代码中，使用了JSON注释，注释时指定了name域，name域指定Action属性被序列化成JSON对象的属性名。除此之外，JSON注释还支持如下几个域：

serialize：设置是否序列化该属性

　　deserialize：设置是否反序列化该属性。

　　format：设置用于格式化输出、解析日期表单域的格式。例如"yyyy-MM-dd'T'HH:mm:ss"。

　　配置该Action与配置普通Action存在小小的区别，应该为该Action配置类型为json的Result。而这个Result无需配置任何视图资源。

　　配置该Action的struts.xml文件代码如下：　

＜?xml version="1.0" encoding="GBK"?＞
＜!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd"＞
＜struts＞
＜constant name="struts.i18n.encoding" value="UTF-8"/＞
＜package name="example" extends="json-default"＞
＜action name="JSONExample" class="lee.JSONExample"＞
＜result type="json"/＞
＜/action＞
＜/package＞
＜/struts＞　　

　　在上面配置文件中有两个值得注意的地方：

　　第一个地方是配置struts.i18n.encoding常量时，不再是使用GBK编码，而是UTF-8编码，这是因为Ajax的POST请求都是以UTF-8的方式进行编码的。

　　第二个地方是配置包时，自己的包继承了json-default包，而不再继承默认的default包，这是因为只有在该包下才有json类型的Result。

Eric.Zhou 2008-02-20 17:02 发表评论

JS常见的location及URL变量

Eric.Zhou — Fri, 11 Jan 2008 05:29:00 GMT

alert(location);
alert(location.href);
alert(location.search);
alert(location.pathname);

上面四个分别得到下面四个结果

http://www.baidu.com/s/abc/d?ie=gb2312&bs=baseURL&sr=&z=&cl=3&f=8&wd=baseURL+IE+FF&ct=0
http://www.baidu.com/s/abc/d?ie=gb2312&bs=baseURL&sr=&z=&cl=3&f=8&wd=baseURL+IE+FF&ct=0
?ie=gb2312&bs=baseURL&sr=&z=&cl=3&f=8&wd=baseURL+IE+FF&ct=0
/s/abc/d

Eric.Zhou 2008-01-11 13:29 发表评论

JavaFX发现之旅：JavaFX Script With Eclipse 入门（第一部分）

Eric.Zhou — Wed, 09 Jan 2008 05:20:00 GMT

http://blog.eshangrao.com/index.php/2007/05/16/391-javafx-script-javafx-script-with-eclipse

Eric.Zhou 2008-01-09 13:20 发表评论

如何在dwr的回调函数中传递多个参数

Eric.Zhou — Fri, 28 Dec 2007 15:42:00 GMT

Eric.Zhou 2007-12-28 23:42 发表评论

【教程】 jquery第一次亲密接触(转载)

Eric.Zhou — Wed, 24 Oct 2007 09:23:00 GMT

jquery是继prototype之后又一个优秀的Javascript框架。对prototype我使用不多，简单了解过。但使用上jquery之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery就像ruby.实际上我比较喜欢java（少接触Ruby罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自已唯一的框架类包。使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。
一，找到你了！
还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。没错，jquery也跟风了。为达到document.getElementById()的目的，jquery是这样写的：

代码
var someElement = $("#myId");

看起来比其他两个框架的要多了一个#，好，看看下面的用法：

代码
$("div p");(1)
$("div.container")(2)
$("div #msg");(3)
$("table a",context);(4)

在prototype里看过这样的写法吗？第一行代码得到所有

标签下的

元素。第二行代码得到class为container的

元素,第三行代码得到

标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。
如果你熟悉CSS，Xpath，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。
二，Jquery对象？
jquery提供了很多便利的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象是Jquer对象。使一个Dom对象成为一个Jquery对象很简单，通过下面一些方式（只是一部分）：

代码
var a = $("#cid");(1)
var b = $("

hello

");(2)
var c = document.createElement("table"); var tb = $(c);

三，代替body标签的onload
这个惯例，也许是除了$()之外，用得最多的地方了。下面一段代码：

代码
$(document).ready(function(){
alert("hello");
});(1)

（2）

上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作，即$(document).ready(fn)可以在一个页面中重复出现，而不会冲突。基本上Jqeury的很多plugin都是利用这个特性，正因为这个特性，多个plugin共同使用起来，在初始化时不会发生冲突。
不管怎么说，这个惯例可以分离javascript与HTML。推荐使用。
四，事件机制
我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascript代码与html代码分离，保持HTML的清洁，还可以很轻松地绑定事件，甚至你可以不知道“事件”这个名词。

代码
$(document).ready(function(){
$("#clear").click(function(){
alert("i am about to clear the table");
});
$("form[0]").submit(validate);
});
function validate(){
//do some form validation
}

五，同一函数实现set&get

代码
$("#msg").html();
$("#msg").html("hello");

上面两行代码，调用了同样的函数。但结果却差别很大。
第一行是返回指定元素的HTML值，第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。
六，ajax
这是一个ajax横行的时代。多少人，了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样简单异常

代码
$.get("search.do",{id:1},rend);
function rend(xml){
alert(xml);
} (1)
$.post("search.do",{id:1},rend);
function rend(xml){
alert(xml);
} (2)

$("#msg").ajaxStart(function(){
this.html("正在加载。。。。");
});(3)
$("#msg").ajaxSuccess(function(){
this.html("加载完成！");
});(4)

这些都是较常用的方法，get和post用法一样。第一个参数是异步请求的url，第二个为参数，第三个回调方法。
3，4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然，jquery的AJAX相关的函数不仅是这些，有兴趣可以去研究再多。
七，渐入淡出

代码
$("#msg").fadeIn("fast");
$("#msg").fadeOut("slow");

没错，上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条，用jquery就那么简单。两个函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为MS。
八，plugin
这也是一个插件的时代。
jquery插件给我的感觉清一色的清洁，简单。如Jtip，要使用它的功能，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好，很精彩的插件。

写得很烂。可能大家看不出jquery的好处。嗯，光听是没用的，试用一下吧。你会发觉很有趣。
暂时告一段落吧。待有新的发现再来分享。

加一些Jquery的资源：
http://www.visualjquery.com/index.xml 很好的API查询站点
http://jquery.com/demo/thickbox/ 知道lightBox吧，看看Jquery是怎样实现相同的东西
http://www.codylindley.com/blogstuff/js/jtip/ Jtip，实用的提示工具
http://jquery.com/plugins/ 很多牛的插件。

http://15daysofjquery.com

Eric.Zhou 2007-10-24 17:23 发表评论

Ajax-------IE和FIREFOX 脚本的一些区别

Eric.Zhou — Fri, 26 Jan 2007 01:51:00 GMT

用AJAX开发不可避免的要遇到浏览器不同，实现不同的问题，下面是AoiUmi的一些总结。

1：innerText
IE支持，FIREFOX不支持
解决办法：用innerHTML,2种浏览器都识别innerHTML

2：document.createElement
document.appendChild
在往表里插入行时
FIREFOX支持，IE不支持
解决办法：把行插入到TBODY中，不要直接插入到表

3：setAttribute('style','color:red;')
FIREFOX支持(除了IE，现在所有浏览器都支持)，IE不支持
解决办法：不用setAttribute('style','color:red')
而用object.style.cssText = 'color:red;'(这写法也有例外)
最好的办法是上面种方法都用上，万无一失 ^_^
4:class
setAttribute('class','styleClass')
FIREFOX支持，IE不支持(指定属性名为CLASS，IE不会设置元素的CLASS属性，相反只使用SETATTRIBUTE时IE自动识别CLASSNAME属性)
解决办法：
setAttribute('class','styleClass')
setAttribute('className','styleClass')
2种都用上

5:用setAttribute设置事件
var obj = document.getElementById('objId');
obj.setAttribute('onclick','funcitonname();');
FIREFOX支持，IE不支持
解决办法：
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
如下：
var obj = document.getElementById('objId');
obj.onclick=function(){fucntionname();};
这种方法所有浏览器都支持

6：建立单选钮
IE以外的浏览器
var rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','radiobtn');
rdo.setAttribute('value','checked');

IE:
var rdo =document.createElement("");
解决办法：
这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了
万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。

0：共同的一些技巧
在动态建立INPUT型输入元素时，一般是先加入，在设置TYPE。这就有可能出错

好习惯：var btn = document.createElement('input');
btn.setAttribut('type','button');
document.getElementById('formId').appendChild(btn);

Eric.Zhou 2007-01-26 09:51 发表评论

dojo.graphics.color & dojo.uri.Uri

Eric.Zhou — Wed, 17 Jan 2007 07:34:00 GMT

模块：dojo.graphics.color

下面是dojo里定义的颜色名称
dojo.graphics.color.named.white //白色
dojo.graphics.color.named.black //黑色
dojo.graphics.color.named.red //红色
dojo.graphics.color.named.green //绿色
dojo.graphics.color.named.blue //蓝色
dojo.graphics.color.named.navy //海军蓝
dojo.graphics.color.named.gray //灰色
dojo.graphics.color.named.silver//银色

dojo.graphics.color.Color

颜色类

Usage Example:

var color = new dojo.graphics.color.Color(dojo.graphics.color.named.black); //定义一个黑色的颜色对象
var color = new dojo.graphics.color.Color(0,0,0); //定义一个黑色的颜色对象
var color = new dojo.graphics.color.Color(0,0,0,1.0); //定义一个黑色的颜色对象
var color = new dojo.graphics.color.Color([0,0,0,1.0]); //定义一个黑色的颜色对象
var color = new dojo.graphics.color.Color('rgb(0,0,0)'); //定义一个黑色的颜色对象
var color = new dojo.graphics.color.Color('#000000'); //定义一个黑色的颜色对象

dojo.graphics.color.Color.toRgb

Usage Example:

color.toRgb(); //返回一个[0,0,0]的数组
color.toRgb(true); //返回一个[0,0,0,1.0]的数组

dojo.graphics.color.Color.toRgba

Usage Example:

color.toRgba(); //返回一个[0,0,0,1.0]的数组

dojo.graphics.color.Color.toHex
dojo.graphics.color.Color.toString

Usage Example:

color.toHex(); //返回"#000000"
color.toString(); //返回"#000000"

dojo.graphics.color.Color.toCss

Usage Example:

color.toCss(); //返回"rgb(0,0,0)"

dojo.graphics.color.Color.blend

混合另一个颜色得到一个新颜色

Usage Example:

color.blend('#ffffff', 1); //返回[255,255,255]
color.blend('#ffffff', -1); //返回[0,0,0]
color.blend('#ffffff', 0); //按1比1混合黑色和白色，返回[127,127,127]
颜色参数可以为颜色的任意形式，比如数组，字符串等

dojo.graphics.color.blend([0,0,0], [255,255,255], 0); //will return [127,127,127]
dojo.graphics.color.blend("#000000", "#ffffff", 0); //will return "#7f7f7f"
若第一个参数为字符串，则返回值也会返回字符串

dojo.graphics.color.Color.blendHex

Usage Example:

dojo.graphics.color.blendHex("#000000", "#ffffff", 0); //will return "#7f7f7f"

dojo.graphics.color.extractRGB

将输入转换为RGB数组

dojo.graphics.color.hex2rgb

将输入的字符串转换为RGB数组

dojo.graphics.color.rgb2hex

将输入的RGB数组转换为字符串

dojo.graphics.color.Color.fromArray

Usage Example:

var color = dojo.graphics.color.Color.fromArray([0,0,0,1.0]);

模块：dojo.uri.Uri

dojo.uri.Uri

专门用来处理URI(统一资源标识符)的类

Usage Example:

uri = (new dojo.uri.Uri("http://myserver/dojo/", "guide.html")).toString(); //uri will be "http://myserver/dojo/guide.html"
uri = (new dojo.uri.Uri("http://myserver/dojo/", "../guide.html")).toString(); //uri will be "http://myserver/guide.html"

RFC规定的URI语法：[scheme:][//authority][path][?query][#fragment]
authority语法：[user-info@]host[:port]

比如我们定义一个uri

var uri = new dojo.uri.Uri("http://user:password@myserver:80/dojo/", "guide.html?page=1#top");

则uri的属性如下：

authority: 服务器名 "user:password@myserver:80"
fragment: 片断名 "top"
host: 主机名 "myserver"
password: 密码 "password"
path: 路径 "/dojo/guide.html"
port: 端口 80
query: 参数 "page=1"
scheme: 模式 "http"
uri: 完整的地址 "http://user:password@myserver:80/dojo/guide.html?page=1"
user: 用户名 "user:" 似乎有点问题，多了一个冒号

Eric.Zhou 2007-01-17 15:34 发表评论

dojo.event & dojo.event.topic & dojo.event.browser

Eric.Zhou — Wed, 17 Jan 2007 07:26:00 GMT

模块：dojo.event

终于进入有名的dojo事件处理系统的学习了，学习前建议读者先去补习一下AOP的相关知识

dojo.event.connect

绑定指定的方法到指定的对象的方法上

Usage Example:

简单绑定1

function doOnClick1()
{
alert("Clicked!");
}
dojo.event.connect(dojo.byId("inputTest"),"onclick","doOnClick1");

简单绑定2

obj = { doOnClick2: function(){ alert("Clicked!");}}
dojo.event.connect(dojo.byId("inputTest"),"onclick",obj,"doOnClick2");

如果存在需要进行多个事件的绑定的时候，你就会看到dojo的方便之处了

obj2 = { doOnClick2: function(){alert("Clicked!");}}
dojo.event.connect(dojo.byId("inputTest"),"onclick",obj,"doOnClick2");
dojo.event.connect(dojo.byId("inputTest"),"onclick",obj2,"doOnClick2");

connect可以对任何对象的方法进行绑定，而不是只能针对DOM对象

dojo.event.connect(obj,"doOnclick2","doOnClick1"); //在调用obj.doOnclick2()后调用doOnClick1()

dojo.event.connectBefore

dojo.event.connect默认是后绑定，connectBefore则是早绑定，绑定的方法将在指定方法前执行，用法与connect一致

dojo.event.connectAround

Usage Example:

function aroundTest(invocation){
//此处可以增加代码，比如检查参数(invocation.args)
var result = invocation.proceed();
//此处可以增加代码，比如修改结果(result)
return result;
}
dojo.event.connectAround(dojo.byId("inputTest"),"onclick","aroundTest");

dojo.event.connectOnce
说起这个函数，还真的是让我想了半天，直觉上我就把它想象成executeOnce，结果测试的结果让我差点想不通
connectOnce就是指保证只绑定一次，来避免重复绑定会导致的重复执行的问题

dojo.event.disconnect

解除绑定，调用参数与connect一致，即可解除之前的绑定操作

dojo.event.log

在执行指定对象的指定方法后自动记录日志

Usage Example:

dojo.event.log(obj, "doOnClick"); //当调用obj.doOnClick时记录下日志"DEBUG: ([object Object]).doOnClick : "

你也可以这样写：

dojo.event.log({srcObj: obj, srcFunc: "doOnClick"});

dojo.event.kwConnect

kwConnect可以做到更加灵活的绑定，比如可以设置延迟执行绑定

Usage Example:

dojo.event.kwConnect({
srcObj: dojo.byId("inputTest"),
srcFunc: "onclick",
adviceObj: obj,
adviceFunc: "doOnclick2",

type: "before", //默认为"after"，可选: "before", "around"，注意：type是用来决定adviceFunc的行为的，如果为"around"，则aroundFunc将失效
aroundObj: null,
aroundFunc: null, //如果指定了aroundFunc，则其将对adviceFunc进行拦截，但是当type为"around"时，则aroundFunc将不会执行
once: false, //默认为false，允许重复绑定
delay: 3000, //延时3秒后执行adviceFunc
rate: 0, //这个从源代码没有看懂起什么作用
adviceMsg: false //这个从源代码没有看懂起什么作用
});

dojo.event.kwDisconnect

用来解除使用kwConnect指定的绑定

模块：dojo.event.topic

Topic机制与Advice机制都能够实现事件的绑定，但是显然,Topic更适合处理多重绑定。
发布主题，然后由用户订阅的机制就是一个典型的观察者模式

dojo.event.topic.registerPublisher

注册主题发布器

Usage Example:

dojo.event.topic.registerPublisher("myTopic", obj, "doOnClick2");

dojo.event.topic.subscribe

订阅主题

Usage Example:

dojo.event.topic.subscribe("myTopic", "test"); //执行obj.doOnClick2()以后会自动执行test()

dojo.event.topic.unsubscribe

取消订阅主题

Usage Example:

dojo.event.topic.unsubscribe("myTopic", "test");

dojo.event.topic.destroy

删除主题，此主题所有的订阅都将失效

Usage Example:

dojo.event.topic.destroy("myTopic");

模块：dojo.event.browser

dojo.event.browser.addListener

增加监听器

Usage Example:

function listener()
{
alert("ok");
}
dojo.event.browser.addListener(document, 'mousedown', listener); //事件名称可以加上"on"，也可以没有"on"
dojo.event.browser.addListener(document, 'onmousedown', listener, true); //capture为真表示不受上层元素的事件控制

dojo.event.browser.removeListener

清除监听器(这个方法似乎是无效的)

dojo.event.browser.callListener

调用监听器

Usage Example:

dojo.event.browser.callListener(listener, document);

dojo.event.browser.stopPropagation

阻止Event传播

Usage Example:

dojo.event.browser.stopPropagation();

dojo.event.browser.preventDefault

将当前事件的返回值设置为false

Usage Example:

dojo.event.browser.preventDefault();

dojo.event.browser.keys

键定义:
  KEY_BACKSPACE: 8,
  KEY_TAB: 9,
  KEY_ENTER: 13,
  KEY_SHIFT: 16,
  KEY_CTRL: 17,
  KEY_ALT: 18,
  KEY_PAUSE: 19,
  KEY_CAPS_LOCK: 20,
  KEY_ESCAPE: 27,
  KEY_SPACE: 32,
  KEY_PAGE_UP: 33,
  KEY_PAGE_DOWN: 34,
  KEY_END: 35,
  KEY_HOME: 36,
  KEY_LEFT_ARROW: 37,
  KEY_UP_ARROW: 38,
  KEY_RIGHT_ARROW: 39,
  KEY_DOWN_ARROW: 40,
  KEY_INSERT: 45,
  KEY_DELETE: 46,
  KEY_LEFT_WINDOW: 91,
  KEY_RIGHT_WINDOW: 92,
  KEY_SELECT: 93,
  KEY_F1: 112,
  KEY_F2: 113,
  KEY_F3: 114,
  KEY_F4: 115,
  KEY_F5: 116,
  KEY_F6: 117,
  KEY_F7: 118,
  KEY_F8: 119,
  KEY_F9: 120,
  KEY_F10: 121,
  KEY_F11: 122,
  KEY_F12: 123,
  KEY_NUM_LOCK: 144,
  KEY_SCROLL_LOCK: 145

dojo.event.browser.currentEvent

最近一次的Event，其属性包括：

altKey  //检查alt键的状态，当alt键按下时，值为 true
button  //检查按下的鼠标键，0 没按键，1 按左键，2 按右键，3 按左右键，4 按中间键，5 按左键和中间键，6 按右键和中间键，7 按所有的键
  //这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件，不管鼠标状态如何，都返回 0（比如onclick）
clientX  //返回鼠标在窗口客户区域中的X坐标
clientY  //返回鼠标在窗口客户区域中的Y坐标
ctrlKey  //检查ctrl键的状态，当ctrl键按下时，值为 true
fromElement //检测 onmouseover 和 onmouseout 事件发生时，鼠标所离开的元素
keyCode  //检测键盘事件相对应的内码，仅当type为keydown,keyup,keypress时才有效
offsetX  //检查相对于触发事件的对象，鼠标位置的水平坐标
offsetY  //检查相对于触发事件的对象，鼠标位置的垂直坐标
propertyName //设置或返回元素的变化了的属性的名称，你可以通过使用 onpropertychange 事件，得到 propertyName 的值
screenX  //检测鼠标相对于用户屏幕的水平位置
screenY  //检测鼠标相对于用户屏幕的垂直位置
shiftKey //检查shift键的状态，当shift键按下时，值为true
srcElement //返回触发事件的元素
srcFilter //返回触发 onfilterchange 事件的滤镜
toElement //检测 onmouseover 和 onmouseout 事件发生时，鼠标所进入的元素
type  //返回没有“on”作为前缀的事件名，比如click, mousedown
x  //返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素，默认以BODY元素作为参考对象
y  //返回鼠标相对于css属性中有position属性的上级元素的y轴坐标。如果没有css属性中有position属性的上级元素，默认以BODY元素作为参考对象
target  //同srcElement
currentTarget
layerX  //同offsetX
layerY  //同offsetY
pageX  //无水平滚动条的情况下与clientX同
pageY  //无水平滚动条的情况下与clientY同
relatedTarget // 仅当type为mouseover,mouseout时才有效
keys  //与dojo.event.browser.keys相同，仅当type为keydown,keyup,keypress时才有效
charCode //键值，仅当type为keypress时才有效

dojo.event.browser.isEvent

判断指定对象是否为event对象

Usage Example:

dojo.event.browser.isEvent(dojo.event.browser.currentEvent); //当dojo.event.browser.currentEvent不为null时返回true

Eric.Zhou 2007-01-17 15:26 发表评论

dojo.dom

Eric.Zhou — Wed, 17 Jan 2007 03:36:00 GMT

模块：dojo.dom

dojo.dom.isNode

测试指定对象是否为节点

Usage Example:

dojo.dom.isNode(dojo.byId('edtTitle'));

dojo.dom.getUniqueId

取得唯一id

Usage Example:

dojo.dom.getUniqueId(); //will return dj_unique_#

dojo.dom.firstElement = dojo.dom.getFirstChildElement

取得指定节点下的第一个满足指定Tag条件的子节点

Usage Example:

dojo.dom.firstElement(parentNode, 'SPAN');

dojo.dom.lastElement = dojo.dom.getLastChildElement

取得指定节点下的最后一个满足指定Tag条件的子节点

Usage Example:

dojo.dom.lastElement(parentNode, 'SPAN');

dojo.dom.nextElement = dojo.dom.getNextSiblingElement

取得指定节点的下一个满足指定Tag条件的子节点

Usage Example:

dojo.dom.nextElement(node, 'SPAN');

dojo.dom.prevElement = dojo.dom.getPreviousSiblingElement

取得指定节点的前一个满足指定Tag条件的子节点

Usage Example:

dojo.dom.prevElement(node, 'SPAN');

dojo.dom.moveChildren

把指定节点下的所有子节点移动到目标节点下，并返回移动的节点数

Usage Example:

dojo.dom.moveChildren(srcNode, destNode, true); //仅移动子节点，srcNode中的文字将被丢弃
dojo.dom.moveChildren(srcNode, destNode, false);//包括文字和子节点都将被移动到目标节点下

dojo.dom.copyChildren

把指定节点下的所有子节点复制到目标节点下，并返回复制的节点数

Usage Example:

dojo.dom.moveChildren(srcNode, destNode, true); //仅复制子节点，srcNode中的文字将被忽略
dojo.dom.moveChildren(srcNode, destNode, false);//包括文字和子节点都将被复制到目标节点下

dojo.dom.removeChildren

删除指定节点下的所有子节点，并返回删除的节点数

Usage Example:

dojo.dom.moveChildren(node);

dojo.dom.replaceChildren

用指定的新节点替换父节点下的所有子节点

Usage Example:

dojo.dom.replaceChildren(node, newChild); //目前还不支持newChild为数组形式

dojo.dom.removeNode

删除指定的节点

Usage Example:

dojo.dom.removeNode(node);

dojo.dom.getAncestors

返回指定节点的父节点集合

Usage Example:

dojo.dom.getAncestors(node, null, false); //返回所有的父节点集合（包括指定的节点node）
dojo.dom.getAncestors(node, null, true); //返回最近的一个父节点
dojo.dom.getAncestors(node, function(el){/* 此处增加过滤条件 */return true}, false); //返回所有满足条件的父节点集合

dojo.dom.getAncestorsByTag

返回所有符合指定Tag的指定节点的父节点集合

Usage Example:

dojo.dom.getAncestorsByTag(node, 'span', false); //返回所有的类型为SPAN的父节点集合
dojo.dom.getAncestorsByTag(node, 'span', true); //返回最近的一个类型为SPAN的父节点

dojo.dom.getFirstAncestorByTag

返回最近的一个符合指定Tag的指定节点的父节点

Usage Example:

dojo.dom.getFirstAncestorByTag(node, 'span'); //返回最近的一个类型为SPAN的父节点

dojo.dom.isDescendantOf

判断指定的节点是否为另一个节点的子孙

Usage Example:

dojo.dom.isDescendantOf(node, ancestor, true); //判断node是否为ancestor的子孙
dojo.dom.isDescendantOf(node, node, false); //will return true
dojo.dom.isDescendantOf(node, node, true); //will return false

dojo.dom.innerXML

返回指定节点的XML

Usage Example:

dojo.dom.innerXML(node);

dojo.dom.createDocument

创建一个空的文档对象

Usage Example:

dojo.dom.createDocument();

dojo.dom.createDocumentFromText

根据文字创建一个文档对象

Usage Example:

dojo.dom.createDocumentFromText('1','text/xml');

dojo.dom.prependChild

将指定的节点插入到父节点的最前面

Usage Example:

dojo.dom.prependChild(node, parent);

dojo.dom.insertBefore

将指定的节点插入到参考节点的前面

Usage Example:

dojo.dom.insertBefore(node, ref, false); //如果满足要求的话就直接退出
dojo.dom.insertBefore(node, ref, true);

dojo.dom.insertAfter

将指定的节点插入到参考节点的后面

Usage Example:

dojo.dom.insertAfter(node, ref, false); //如果满足要求的话就直接退出
dojo.dom.insertAfter(node, ref, true);

dojo.dom.insertAtPosition

将指定的节点插入到参考节点的指定位置

Usage Example:

dojo.dom.insertAtPosition(node, ref, "before");//参考节点之前
dojo.dom.insertAtPosition(node, ref, "after"); //参考节点之后
dojo.dom.insertAtPosition(node, ref, "first"); //参考节点的第一个子节点
dojo.dom.insertAtPosition(node, ref, "last"); //参考节点的最后一个子节点
dojo.dom.insertAtPosition(node, ref); //默认位置为"last"

dojo.dom.insertAtIndex

将指定的节点插入到参考节点的子节点中的指定索引的位置

Usage Example:

dojo.dom.insertAtIndex(node, containingNode, 3); //把node插入到containingNode的子节点中，使其成为第3个子节点

dojo.dom.textContent

设置或获取指定节点的文本

Usage Example:

dojo.dom.textContent(node, 'text'); //设置node的文本为'text'
dojo.dom.textContent(node); //返回node的文本

dojo.dom.hasParent

判断指定节点是否有父节点

Usage Example:

dojo.dom.hasParent(node);

dojo.dom.isTag

判断节点是否具有指定的tag

Usage Example:

var el = document.createElement("SPAN");
dojo.dom.isTag(el, "SPAN"); //will return "SPAN"
dojo.dom.isTag(el, "span"); //will return ""
dojo.dom.isTag(el, "INPUT", "SPAN", "IMG"); //will return "SPAN"

Eric.Zhou 2007-01-17 11:36 发表评论

dojo.io.IO & dojo.io.BrowserIO

Eric.Zhou — Wed, 17 Jan 2007 03:28:00 GMT

模块：dojo.io.IO

dojo.io.bind

处理请求取回需要的数据并处理

这个函数是AJAX中最为重要和有用的函数，dojo.io.bind这个类是用来处理客户端与服务器间通讯的，需要通讯的参数由对象dojo.io.Request所定义，具体通讯的方法则由另外一个对象Transport所提供。

因此，我们如果需要与服务器通讯，则应该定义一个Request对象，其中包括服务器地址及回调函数，例子中Requset都是以匿名对象方式定义的

虽然我们可以定义一个自己的Transport，但是显然不如直接利用现成的Transport方便。

Dojo里提供了一个同时兼容IE和Firefox的dojo.io.XMLHTTPTransport，但是这个对象位于dojo.io.BrowserIO，因此，一般require dojo.io.IO时，还应该require dojo.io.BrowserIO

Usage Example:

dojo.io.bind({
    url: "http://localhost/test.html", //要请求的页面地址
    mimetype: "text/html", //请求的页面的类型，应该设置为与你请求页面类型对应的mimetype，默认为 "text/plain"
    method："GET", //默认为"GET"
    sync: false, //默认为异步执行
    useCache: false, //默认为不使用页面缓存，注意这里的缓存并不是浏览器的缓存，而是Dojo自身所维护的页面缓存
    preventCache: false, //默认为启用浏览器缓存，否则将通过自动增加不同的参数来确保浏览器缓存失效
    timeoutSeconds: 3000, //3秒后超时，如果为0则永不超时

    load: function(type, data, evt) { alert(data); }, //type should be "load", data is that we wanted
    error: function(type, error) { alert(error.message); }, //error is dojo.io.Error
    timeout: function(type) { alert("请求超时！"); }
});

你也可以用一个handle来处理所有的事件

dojo.io.bind({
    url: "http://localhost/test.html", //要请求的页面地址
    mimetype: "text/html", //请求的页面的类型，应该设置为与你请求页面类型对应的mimetype
    timeoutSeconds: 3000, //3秒后超时，如果为0则永不超时
    handle: function(type, data, evt){
      if(type == "load") { alert(data); } //data is that we wanted
      else if (type == "error") { alert(data.message); } //data is the error object
      else { ; } //other events maybe need handled
    }
});

如果没有在Request中指定所用的transport，则Dojo会自动的在已注册的transports中寻找能够处理这个Request的transport，如果不能找到，则返回指定的Request。下面是一个指定了transport的例子:

你还可以利用bind来得到一个JavaScript所定义的对象（注意mimetype必须要定义为"text/javascript"）

testObj = dojo.io.bind({
    url: "http://localhost/test.js", //test.js里定义了一个对象
    mimetype: "text/javascript", //请求的页面的类型，应该设置为与你请求页面类型对应的mimetype
    timeoutSeconds: 3000, //3秒后超时，如果为0则永不超时
    handle: function(type, data, evt){
      if(type == "load") { alert(data); } //data is a object or value
      else if (type == "error") { alert(data.message); } //data is the error object
      else { ; } //other events maybe need handled
    }
});

下面是一个Post的例子:

dojo.io.bind({
    url: "http://localhost/test.aspx", //要提交的页面地址
    mimetype: "text/html", //请求的页面的类型，应该设置为与你请求页面类型对应的mimetype
    timeoutSeconds: 3000, //3秒后超时，如果为0则永不超时
    method: "POST",
    formNode: dojo.byId("myForm"), //指定提交的Form名称

另一个Post的例子(without Form to post):

dojo.io.bind({
    url: "http://localhost/test.aspx", //要提交的页面地址
    mimetype: "text/html", //请求的页面的类型，应该设置为与你请求页面类型对应的mimetype
    timeoutSeconds: 3000, //3秒后超时，如果为0则永不超时
    method: "POST",
    content: {a: 1, b: 2}, //要提交的数据

dojo.io.queueBind

有时，我们需要一次发出多个网页请求，则应该使用dojo.io.queueBind，因为浏览器可能只允许同时发出有限个数的请求，如果是使用dojo.io.bind的话，则有可能会申请不到新的XMLHttp对象而导致出错。

用法与dojo.io.bind是一样的。

dojo.io.argsFromMap

用来把对象转换为URL的参数形式

Usage Example:

dojo.io.argsFromMap({a:1,b:2,c:3}); //will return "c=3&b=2&a=1"
dojo.io.argsFromMap({name:"名称",value:"值"},"utf"); //will return "value=%E5%80%BC&name=%E5%90%8D%E7%A7%B0", 有中文的话应该指定utf格式，否则dojo.string.encodeAscii返回的编码是很怪异的
dojo.io.argsFromMap({a:1,b:2,c:3}, "utf", "c"); //will return "b=2&a=1&c=3"，最后一个参数可以控制指定名称的值出现在最后

dojo.io.setIFrameSrc

设置IFrame的Src

Usage Example:

dojo.io.setIFrameSrc(dojo.byId("myFrame"), "http://localhost/test.htm"); //myFrame打开指定的网页
dojo.io.setIFrameSrc(dojo.byId("myFrame"), "http://localhost/test.htm", true); //myFrame打开指定的网页，并覆盖浏览器的历史记录

TODO: 补充一个kwArgs的例子，我之前在网上看见过，可是现在无论如何也找不到相关的页面了，只好以后在举例了

模块：dojo.io.BrowserIO

基本上就提供了dojo.io.XMLHTTPTransport这个对象

XMLHTTPTransport一般能够满足我们的需求，但是其有几个限制：它不能传输文件，不能够成功执行跨域名的远程请求，并且不支持 file:// 这样的协议

因此，根据应用要求，我们可能会需要选用其它的transport: dojo.io.IframeTransport, dojo.io.repubsubTranport, dojo.io.ScriptSrcTransport, ShortBusTransport

dojo.io.IframeTransport，用法与xmlhttp是一样的，其优点就是可以跨域，不存在任何的安全问题
如果Request指定的mimetype是text或javascript，返回的内容应该是放在第一个textarea里的内容，如果指定的mimetype是html，则IFrame里的html则是需要的内容。因为浏览器兼容的原因，IframeTransport不能正确处理返回类型为XML的请求。

关于Rpc，这个类似于Remoting的东西，也将在以后对其进行介绍。

Eric.Zhou 2007-01-17 11:28 发表评论

dojo.lang.array & dojo.lang.func & dojo.string.extras

Eric.Zhou — Wed, 17 Jan 2007 03:18:00 GMT

模块：dojo.lang.array

dojo.lang.has
判断对象是否具有指定属性，不过这个方法有用吗，不如直接使用 if(name in obj)
Usage Example:
  dojo.lang.has(dojo.lang, "has"); //will return true

dojo.lang.isEmpty
判断对象或数组是否为空
Usage Example:
  dojo.lang.isEmpty({a: 1}); //will return false
  dojo.lang.isEmpty([]); //will return true

dojo.lang.map
调用指定的方法处理指定的数组或字符串
Usage Example:
  dojo.lang.map([1,2,3,4,5], function(x) { return x * x;}); //will return [1,4,9,16,25]

dojo.lang.forEach
遍历指定的数组或字符串，并对其中的元素调用指定的方法
Usage Example:
  dojo.lang.forEach("abc", function(x) { alert(x); });

dojo.lang.every
检查指定的数组是否全部满足指定方法的条件
Usage Example:
  dojo.lang.every([1,-2,3], function(x) { return x > 0; }); //指定的数组不是全大于0的，因此返回false

dojo.lang.some
检查指定的数组是否部分满足指定方法的条件
Usage Example:
  dojo.lang.some([1,-2,3], function(x) { return x > 0; }); //指定的数组有大于0的元素，因此返回true

dojo.lang.filter
根据指定的方法来过滤指定的数组
Usage Example:
  dojo.lang.filter([1,-2,3], function(x) { return x > 0; }); //will return [1, 3]

dojo.lang.unnest
把指定的参数或数组转换为一维数组
Usage Example:
  dojo.lang.unnest(1, 2, 3);  //will return [1, 2, 3]
  dojo.lang.unnest(1, [2, [3], [{4}]]); //will return [1, 2, 3, 4]

dojo.lang.toArray
将输入转换为数组
Usage Example:
  function test()
  {
return dojo.lang.toArray(arguments, 1);
  }
  test(1,2,3,4,5); //will return [2,3,4,5]

模块：dojo.lang.func
dojo.lang.hitch
将指定的方法挂在指定的对象下并返回该方法
Usage Example:
  func = {test: function(s) {alert(s)}};
  dojo.lang.mixin(func, {demo: dojo.lang.hitch(func, "test")});
  func.demo("demo and test are same method");

dojo.lang.forward
返回自身对象的指定名称的方法引用
Usage Example:
  func = {test: function(s) {alert(s)}, demo: dojo.lang.forward("test")};
  func.demo("demo and test are same method");

dojo.lang.curry
What is curry? 请参阅这篇文章：http://www.svendtofte.com/code/curried_javascript/
Usage Example:
  function add(a, b)
  {
return a + b;
  }
  dojo.lang.curry(null, add, 2, 3); //will return 5
  dojo.lang.curry(null, add, 2)(3); //will return 5
  dojo.lang.curry(null, add)(2)(3); //will return 5
  dojo.lang.curry(null, add)()(2)(3); //will return 5

dojo.lang.curryArguments
与dojo.lang.curry类似，但是可以选择忽略掉前n个参数
Usage Example:
  function add(a, b)
  {
return a + b;
  }
  dojo.lang.curryArguments(null, add, [1,2,3,4,5], 2); //will return 5 (= 2 + 3)

dojo.lang.tryThese
测试参数指定所有函数，并返回第一个返回值不为0的函数值
from seno:
dojo.lang.tryThese方法和prototype中的Try.these()方法是一样的，
xmlNode.text在一些浏览器中好用，但是xmlNode.textContent在另一些浏览器中正常工作。使用Try.these()方法我们可以得到正常工作的那个方法的返回值。

BlogJava-

︻┳═一Java

ajax jsp 无刷新上传文件

Ajax.Updater

Syntax new Ajax.Updater(container, url, options); // make a HTTP request to the specified URL and update the 'container' element.

Options

在Struts 2中使用JSON Ajax支持

JS常见的location及URL变量

JavaFX发现之旅：JavaFX Script With Eclipse 入门（第一部分）

如何在dwr的回调函数中传递多个参数

【教程】 jquery第一次亲密接触(转载)

Ajax-------IE和FIREFOX 脚本的一些区别

dojo.graphics.color & dojo.uri.Uri

dojo.event & dojo.event.topic & dojo.event.browser

dojo.dom

dojo.io.IO & dojo.io.BrowserIO

dojo.lang.array & dojo.lang.func & dojo.string.extras

Syntax `new Ajax.Updater(container, url, options); // make a HTTP request to the specified URL and update the 'container' element.`