Java豆技术站点 » Web开发

jQuery autocomplete 导致页面光标自动定位到了文本框

阿超 — Tue, 06 Jul 2010 22:30:44 +0000

在用jquery.autocomplete 进行自动匹配查询时,发现页面加载完成后,光标就自动停留在文本框,但是我并不想要这个功能,检查发现是由于多用了一个方法: 如下:

$(“#name”).focus().autocomplete(
“/rule/ervicePkg.htm?method=queryByLikeName”, {
scroll : false,
width : 150
});

改成如下即可:

$(“#name”).focus().autocomplete(
“/rule/ervicePkg.htm?method=queryByLikeName”, {
scroll : false,
width : 150
});

【锋利的JQuery】学习笔记,锋利的JQuery电子书pdf学习笔记

阿超 — Mon, 07 Jun 2010 10:47:48 +0000

锋利的JQuery是一本不错的JQuery书，看完后感觉总体也不错，介绍的挺全面的，列举了大量的例子，比较易懂。
加上之前学过一点CSS方面的知识，所以在看选择器这部分也比较容易理解（很多都是CSS的写法）。
总体感觉，JQuery大置分成了几大块：选择器、DOM操作、事件、动画、AJAX。
本书都一一的介绍了，特别是选择器，几乎每种选择器都列举了一个例子，很容易看懂。
此文为读本书的过程中，记录的一些笔记，例子不是书里面的，只是觉得自己比较容易理解，就随便写了个。
如果有出错的地方，麻烦指正。

// 锋利的JQuery 学习笔记
// dier
// 2009-10-17 至 2009-11-22

//————————- 第一章认识JQuery ————————-

·页面加载事件（可以写多个ready()）
$(document).ready(function(){
alert(“hello world”);
})

·链式操作：JQuery允许你在一句代码中操做任何与其相关联的元素，包括其子元素、父元素等
//选择名称为myDiv的元素，为其自身添加css1的样式，然后再选择其所有子元素a，为其移除css2样式
$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″);

·JQuery中获得一个对象的所有子元素内容
$(“#myDiv”).html()

·JQuery中的变量与 DOM中的变量
var $myVar = “”;
var myVar = “”;

·DOM对象转换成 JQuery对象
var obj = documnet.getElementById(“myDiv”);
var $obj = $(obj);

·JQuery对象转换成 DOM对象
var $obj = $(“#myDiv”);
var obj = $obj.get(0); //或者var obj = $obj[0];

·释放JQuery对$符号的控制权
JQuery.noConflict();

//—————————- 第二章 JQuery选择器 ——————————-

·JQuery完善的处理机制
document.getElementById(“test”).style.color = “red”; //如果test不存在，则页面出现异常
$(“#test”).css(“color”,”red”); //哪怕页面没有名称为test的元素，也不会报错。它是一个JQuery对象

·判断页面是否选择的对象
if( $(“.class”).length > 0 ){
// todo something
}

·基本选择器
$(“#myDiv”) //根据给定的ID选择匹配的元素，返回：单个元素
$(“.myClass”) //根据给定的样式名称选择匹配的元素，返回：集合元素
$(“div”) //根据给定的元素名称选择匹配的元素，返回：集合元素
$(“#myDiv,div.myClass,span”) //根据给定的规则选择匹配的元素，返回：集合元素
$(“*”) //选择页面所有元素，返回：集合元素

·层次选择器
$(“div span”) //选择所有DIV元素下的所有SPAN元素（所有后代元素），返回：集合元素
$(“div>span”) //选择所有DIV元素下的SPAN子元素（仅子元素），返回：集合元素
$(“.myClass+div”) //选择样式名称为myClass的下一个DIV元素，返回：集合元素
$(“.myClass+div”) //等价于 $(“.myClass”).next(“div”);
$(“.myClass~div”) //选择样式名称为myClass之后的所有DIV元素，返回：集合元素
$(“.myClass~div”) //等价于 $(“.myClass”).nextAll();
$(“.myClass”).siblings(“div”) //选择样式名称为myClass的元素的所有同辈DIV元素（无论前后），返回集合元素

·过滤选择器（index从0开始）
$(“div:first”) //选择所有DIV元素下的第一个DIV元素，返回：单个元素
$(“div:last”) //选择所有DIV元素下的最后一个DIV元素，返回：单个元素
$(“div:not(.myClass)”) //选择所有样式不包括myClass的DIV元素，返回：集合元素
$(“div:even”) //选择所有索引是偶数的DIV元素，返回：集合元素
$(“div:odd”) //选择所有索引是奇数的DIV元素，返回：集合元素
$(“div:eq(index)”) //选择所有索引等于index的DIV元素，返回：集合元素
$(“div:gt(index)”) //选择所有索引大于index的DIV元素，返回：集合元素
$(“div:lt(index)”) //选择所有索引小于index的DIV元素，返回：集合元素
$(“:header”) //选择所有标题元素（h1,h2,h3），返回：集合元素
$(“div:animated”) //选择所有正在执行去画的DIV元素，返回：集合元素

·子元素过滤选择器（index从1开始）
$(“:nth-child(index/even/odd)”) //选择每个父元素下的第index/偶数/奇数个子元素，返回：集合元素
$(“:first-child”) //选择每个父元素下的第一个子元素，返回：集合元素
$(“:last-child”) //选择每个父元素下的最后一个子元素，返回：集合元素
$(“ul li:only-child”) //在UL元素中选择只有一个LI元素的子元素，返回：集合元素

·内容过滤选择器
$(“:contains(text)”) //选择所有内容包含text的元素，返回：集合元素
$(“div:empty”) //选择所有内容为空的DIV元素，返回：集合元素
$(“div:has(span)”) //选择所有含有SPAN子元素的DIV元素，返回：集合元素
$(“div:parent”) //选择所有含有子元素的DIV元素，返回：集合元素

·可见性选择器
$(“:hidden”) //选择所有不可见的元素（type=”hidden” style=”display:none” style=”visibility:none”），返回：集合元素
$(“:visible”) //选择所有可见的元素，返回：集合元素

·属性过滤选择器
$(“[id]“) //选择所有含有id属性的元素，返回：集合元素
$(“[class=myClass]“) //选择所有class属性值是myClass的元素，返回：集合元素
$(“[class!=myClass]“) //选择所有class属性值不是myClass的元素，返回：集合元素
$(“[alt^=begin]“) //选择所有alt属性值以begin开始的元素，返回：集合元素
$(“[alt^=end]“) //选择所有alt属性值以end结束的元素，返回：集合元素
$(“[alt*=some]“) //选择所有alt属性值含有some的元素，返回：集合元素
$(“div[id][class=myClass]“) //选择所有含有id属性的并且class属性值是myClass的元素，返回：集合元素

·表单对象属性选择器
$(“#myForm:enabled”) //选择ID属性为myForm的表单的所有可用元素，返回：集合元素
$(“#myForm:disabled”) //选择ID属性为myForm的表单的所有不可用元素，返回：集合元素
$(“#myForm:checked”) //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素
$(“#myForm:selected”) //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素

·表单选择器
$(“:input”) //选择所有<input> <select> <button> <textarea>元素，返回：集合元素
$(“:text”) //选择所有单行文本框元素，返回：集合元素
$(“:password”) //选择所有密码框元素，返回：集合元素
$(“:radio”) //选择所有单选框元素，返回：集合元素
$(“:checkbox”) //选择所有复选框元素，返回：集合元素
$(“:submit”) //选择所有提交按钮元素，返回：集合元素
$(“:image”) //选择所有图片按钮元素，返回：集合元素
$(“:reset”) //选择所有重置按钮元素，返回：集合元素
$(“:button”) //选择所有按钮元素，返回：集合元素
$(“:file”) //选择所有上传域元素，返回：集合元素
$(“:hidden”) //选择所有不可见域元素，返回：集合元素
$(“:text”) //选择所有单选文本框元素，返回：集合元素

//—————————- 第三章 JQuery中的DOM操作 ——————————-

·查找元素节点
var str = $(“#myDiv”).text(); //<div id=”myDiv” title=”hello”>123</div>
alert(str); //结果：123

·查找属性节点
var str = $(“#myDiv”).attr(“title”); //<div id=”myDiv” title=”hello”>123</div>
alert(str); //结果：hello

·创建元素节点
var $li1 = $(“<span></span>”); //传入元素标记，自动包装并创建第一个li元素对象
var $li2 = $(“<span></span>”); //第二个,创建时需要遵循XHTML规则（闭合、小写）
$(“#myDiv”).append($li1); //往id为myDiv的元素中添加一个元素
$(“#myDiv”).append($li2); //结果：<div id=”myDiv”><span></span><span></span></div>

$(“#myDIv”).append($li1).append($li2); //客串：传说中的链式写法，省一行代码 ^_^

·创建文本节点
var $li1 = $(“<span>first</span>”);
var $li2 = $(“<span>second</span>”);
$(“#myDIv”).append($li1).append($li2);
//结果：<div id=”myDiv”><span>first</span><span>second</span></div>

·创建属性节点
var $li1 = $(“<span title=”111″>first</span>”);
var $li2 = $(“<span title=”222″>second</span>”);
$(“#myDIv”).append($li1).append($li2);
//结果：<div id=”myDiv”><span title=”111″>first</span><span title=”222″>second</span></div>

·插入节点
$(“#myDiv”).append(“<span></span>”); //往id为myDiv的元素插入span元素
$(“<span></span>”).appendTo(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素

$(“#myDiv”).prepend(“<span></span>”); //往id为myDiv的元素内最前面插入span元素
$(“<span></span>”).prependTo(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素内的最前面

$(“#myDiv”).after(“<span></span>”); //往id为myDiv的元素后面插入span元素（同级，不是子元素）
$(“<span></span>”).insertAfter(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素后面（同级，不是子元素）

$(“#myDiv”).before(“<span></span>”); //往id为myDiv的元素前面插入span元素（同级，不是子元素）
$(“<span></span>”).insertBefore(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素前面（同级，不是子元素）

·删除节点
$(“#myDiv”).remove(); //将id为myDiv的元素移除

·清空节点
$(“#myDiv”).remove(“span”); //将id为myDiv的元素内的所有span元素移除

·复制节点
$(“#myDiv span”).click( function(){ //点击id为myDiv的元素内的span元素，触发click事件
$(this).clone().appendTo(“#myDiv”); //将span元素克隆，然后再添加到id为myDiv的元素内
$(this).clone(true).appendTo(“#myDiv”); //如果clone传入true参数，表示同时复制事件
})

·替换节点
$(“p”).replaceWith(“<strong>您好</strong>”); //将所有p元素替换成后者 <p>您好</p> –> <strong>您好</strong>
$(“<strong>您好</strong>”).replaceAll(“p”); //倒过来写，同上

·包裹节点
$(“strong”).wrap(“<b></b>”); //用b元素把所有strong元素单独包裹起来 <b><strong>您好</strong></b><b><strong>您好</strong></b>
$(“strong”).wrapAll(“<b></b>”); //用b元素把所有strong元素全部包裹起来 <b><strong>您好</strong><strong>您好</strong></b>
$(“strong”).wrapInner(“<b></b>”); //把b元素包裹在strong元素内 <strong><b>您好</b></strong>

·属性操作
var txt = $(“#myDiv”).arrt(“title”); //获取id为myDiv的元素的title属性
$(“#myDiv”).attr(“title”,”我是标题内容”); //设置id为myDiv的元素的title属性的值
$(“#myDiv”).attr({“title”:”我是标题内容”, “alt”:”我还是标题”); //一次性设置多个属性的值
$(“#myDiv”).removeArrt(“alt”); //移除id为myDiv的元素的title属性

·样式操作
var txt = $(“#myDiv”).arrt(“class”); //获取id为myDiv的元素的样式
$(“#myDiv”).attr(“class”,”myClass”); //设置id为myDiv的元素的样式
$(“#myDiv”).addClass(“other”); //在id为myDiv的元素中追加样式
$(“#myDiv”).removeClass(“other”); //在id为myDiv的元素中移除other样式
$(“#myDiv”).removeClass(“myClass other”); //在id为myDiv的元素中移除myClass和other多个样式
$(“#myDiv”).removeClass(); //在id为myDiv的元素中移除所有样式
$(“#myDiv”).toggleClass(“other”); //切换样式，在有other样式和没other样式之间切换
$(“#myDiv”).hasClass(“other”); //判断是否有other样式

·设置和获取HTML、文本和值
alert( $(“#myDiv”).html() ); //获取id为myDiv的元素的HTML代码（相当于innerHTML）
$(“#myDiv”).html(“<span>hello</span>”); //设置id为myDiv的元素的HTML代码

alert( $(“#myDiv”).text() ); //获取id为myDiv的元素的HTML代码（相当于innerText）
$(“#myDiv”).text(“hello”); //设置id为myDiv的元素的HTML代码

alert( $(“#myInput”).val() ); //获取id为myDiv的元素的value值（支持文本框、下拉框、单选框、复选框等）
$(“#myInput”).val(“hello”); //设置id为myDiv的元素的value值（下拉框、单选框、复选框带有选中效果）

·遍历节点
var $cList = $(“#myDiv”).children(); //获取id为myDiv的元素的子元素（只考虑子元素，不考虑后代元素）
var $sNext = $(“#myDiv”).next(); //获取id为myDiv的元素的下一个同辈元素
var $sPrev = $(“#myDiv”).prev(); //获取id为myDiv的元素的上一个同辈元素
var $sSibl = $(“#myDiv”).siblings(); //获取id为myDiv的元素的所有同辈元素
var $pClos = $(“#myDiv”).closest(“span”); //获取id为myDiv的元素本身开始，最接近的span元素（向上查找）

·CSS-DOM操作
$(“#myDiv”).css(“color”); //获取id为myDiv的元素的color样式的值
$(“#myDiv”).css(“color”, “blue”); //设置id为myDiv的元素的color样式的值
$(“#myDiv”).css({“color”:”blue”, “fontSize”:”12px”}); //设置id为myDiv的元素的color样式的值（多个）

$(“#myDiv”).css(“opacity”, “0.5″); //设置id为myDiv的元素的透明度（兼容浏览器）

$(“#myDiv”).css(“height”); //获取id为myDiv的元素的高度（单位：px，兼容浏览器）
$(“#myDiv”).height(); //同上（实际高度）

$(“#myDiv”).css(“width”); //获取id为myDiv的元素的宽度（单位：px，兼容浏览器）
$(“#myDiv”).width(); //同上（实际宽度）

var offset = $(“#myDiv”).offset(); //获取id为myDiv的元素在当前窗口的相对偏移量
alert( offset.top + “|” + offset.left );

var offset = $(“#myDiv”).position(); //获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量
alert( offset.top + “|” + offset.left );

$(“#txtArea”).scrollTop(); //获取id为txtArea的元素滚动条距离顶端的距离
$(“#txtArea”).scrollLeft(); //获取id为txtArea的元素滚动条距离左侧的距离
$(“#txtArea”).scrollTop(100); //设置id为txtArea的元素滚动条距离顶端的距离
$(“#txtArea”).scrollLeft(100); //设置id为txtArea的元素滚动条距离左侧的距离

//—————————- 第四章 JQuery中的事件和动画 ——————————-

·加载DOM
$(window).load() 等价于 window.onload 事件

$(document).ready() 相当于window.onload事件，但有些区别：
(1)执行时机：
window.onload 是在网页中所有元素（包括元素的所有关联文件）完全加载后才执行
$(document).ready() 是在DOM完全就绪时就可以被调用，此时，并不意味着这些元素关系的文件都已经下载完毕

(2)多次使用：可以在同一个页面注册多个$(document).ready()事件
(3)简写方式：可以缩写成 $(function(){ }) 或 $().ready()

·事件绑定
当文档装载完成后，可以通过bind()方法，为特定的元素进行事件的绑定，可重复多次使用
bind( type, [data, ] fn );
type：指事件的类型:
blur（失去焦点）、focus（获得焦点）
load（加载完成）、unload（销毁完成）
resize（调整元素大小）、scroll（滚动元素）
click（单击元素事件）、dbclick（双击元素事件）
mousedown（按下鼠标）、mouseup（松开鼠标）
mousemove（鼠标移过）、mouseover（鼠标移入）、mouseout（鼠标移出）
mouseenter（鼠标进入）、mouseleave（鼠标离开）
change（值改变）、select（下拉框索引改变）、submit（提交按钮）
keydown（键盘按下）、keyup（键盘松开）、keypress（键盘单击）
error（异常）
data：指事件传递的属性值，event.data 额外传递给对象事件的值
fn：指绑定的处理函数，在此函数体内，$(this)指携带相应行为的DOM元素

·合并事件
hover(enter,leave)：鼠标移入执行enter、移出事件执行leave
$(“#myDiv”).hover( function(){
$(this).css(“border”, “1px solid black”);0
}, function(){
$(this).css(“border”, “none”);
});

toggle(fn1,fn2,…fnN)：鼠标每点击一次，执行一个函数，直到最后一个后重复
$(“#myDiv”).toggle( function(){
$(this).css(“border”, “1px solid black”);0
}, function(){
$(this).css(“border”, “none”);
});

·事件冒泡
下面的例子，BODY元素下有DIV元素，DIV元素下有SPAN元素，分别将三种元素都注册click事件。
那么，click事件会按照DOM的层次结构，像水泡一样不断向上直到顶端，所以称之为事件冒泡。
<body><div><span>我是SPAN我怕谁</span></div></body>
$(“span”).bind(“click”, function(){ alert(‘span click’); });
$(“div”).bind(“click”, function(){ alert(‘div click’); });
$(“body”).bind(“click”, function(){ alert(‘body click’); });

·阻止冒泡
解决这个问题的办法是：在SPAN执行完click事件后，停止事件冒泡。
$(“span”).bind(“click”, function(event){
alert(‘span click’);
event.stopPropagation(); //停止冒泡
});

·阻止默认行为
提交按钮在提交前做相应的逻辑判断，当不满足时
$(“#btnSubmit”).bind(“click”, function(event){
event.preventDefault(); //阻止默认行为相当于return false;
});

·事件对象的属性
$(“#myDiv”).bind(“click”, function(event){ });
event.type() //返回：click
event.target() //获取当前元素
event.relatedTarget() //引发事件的元素
event.pageX()/event.pageY() //获取鼠标相对于页面的X和Y坐标
event.which() //在单击事件中获取到对应的按键鼠标左中右分别是123
event.metaKey() //获取操作中的相关功能键（ctrl/alt/shift）

·移除事件
$(“#myDiv”).bind(“click”, fn1 = function(){
alert(“function1″);
}).bind(“click”, fn2 = function(){
alert(“function2″);
}).bind(“click”, fn3 = function(){
alert(“function3″);
});
$(“#myDiv”).unbind(); //移除id为myDiv的元素的所有事件
$(“#myDiv”).unbind(“click”); //移除id为myDiv的元素的所有click事件
$(“#myDiv”).unbind(“click”,fn1); //移除id为myDiv的元素的名称为fn1的click事件

·一次性事件：绑定的事件执行一次后自动移除
$(“#myDiv”).one(“click”, [data], function(){
alert(“function1″);
});

·触发事件
$(“#btn”).trigger(“click”, [data]); //代码方式触发click事件
$(“#btn”).click(); //另一种简写方式

·事件命名空间
$(“#myDiv”).bind(“click.hello”, function(){
alert(“function1″);
});
$(“#myDiv”).bind(“click”, function(){
alert(“function1″);
})
$(“div”).unbind(“click”); //两个事件都被移除
$(“div”).unbind(“.hello”); //只移除第一个
$(“div”).unbind(“click!”); //只移除第二个（注意感叹号，指没有名字空间的）

·JQuery中的动画
$(“div”).hide(); //隐藏所有DIV元素，相当于sytle=”display:none”
$(“div”).show(); //显示所有DIV元素

$(“div”).hide(1000); //一秒内隐藏所有DIV元素，其它参数还有：slow(600) normal(400) fast(200)
$(“div”).show(1000); //一秒内显示所有DIV元素

$(“div”).fadeOut(); //降低元素的不透明度，直至消失（支持速度参数，不会改变宽高）
$(“div”).fadeIn(); //升高元素的不透明度，直至显示

$(“div”).slideUp(); //由下至上收缩元素，直至消失（支持速度参数）
$(“div”).slideDown(); //由上至下展开元素，直至显示

·自定义动画animate
$(elem).animate(params, speed, callback);
params：样式属性及值的映射 {protected:”value”, protected:”value”}
speed: 速度参数
callback: 动画完成后执行函数，可选

$(“#myDiv”).animate({left:”500px”}, 2000); //两秒内ID为myDiv的元素移至左边距500px的位置
$(“#myDiv”).animate({left:”+=500px”}, 2000); //同上，支持累加、累减
$(“#myDiv”).animate({top:”200px”, left:”+=500px”}, 2000); //同上，多重动画，同时执行

$(“#myDiv”).animate({opacity:”0.5″}, 1000) //先变成50%透明
.animate({top:”500px”}, 500) //移至离顶端500px
.animate({left:”500px”}, 500) //移至离左边500px
.fadeOut(1000); //显示出来（四个动作为队列，一步步执行）

$(“#myDiv”).stop([cleanQuene] [,gotuEnd]); //停止动画，参数为boolean

$(“#myDiv”).is(“:animate”) //判断元素是否在执行动画

·其它动画
$(“#myDiv”).toggle(); //显示与隐藏元素
$(“#myDiv”).slideToggle(); //展开与收缩元素
$(“#myDiv”).fadeTo(1000, 0.2); //一秒内将元素透明度调整到20%

//——————– 第五章 JQuery对表单、表格的操作及更多应用 ————————

·单选文本框应用（获得焦点时，加了个特殊的样式，失去焦点时还原，兼容所有浏览器）
$(“:input”).focus(function(){ this.addClass(“inputFocus”); })
.blur(function(){ this.removeClass(“inputFocus”); });

·多行文本框的应用（放大、缩小多行文本框的高度，限制最大500px，兼容所有浏览器）
var $txt = $(“#textArea”);
$(“.bigger”).click(function(){
if( $txt.height() < 500) $txt.height( $txt.height() + 50 );
//if( $txt.height() < 500) $txt.animate({height:”+=50″}, 500 );
});
$(“.smaller”).click(function(){
if( $txt.height() > 100) $txt.height( $txt.height() – 50 );
//if( $txt.height() < 500) $txt.animate({height:”-=50″}, 500 );
});

·复选框的应用（实现全选、全不选、反选）
$(“#btnCheckedAll”).click(function(){ //全选
$(“[name=items]:checkbox”).attr(“checked”, true);
});
$(“#btnCheckedNone”).click(function(){ //全不选
$(“[name=items]:checkbox”).attr(“checked”, false);
});
$(“#btnCheckedRev”).click(function(){ //反选
$(“[name=items]:checkbox”).each(function(){
$(this).attr(“checked”, !$(this).attr(“checked”));
//this.checked = !this.checked;
}
});

·下拉框的应用（将一个下拉列表的选中项搬至另一个下拉列表）
$(“#btnAdd”).click(function(){ //将选中选项搬过去
$(“#mySelect1 option:selected”).appendTo(“#mySelect2″);
});
$(“#btnAddAll”).click(function(){ //将全部选项搬过去
$(“#mySelect1 option”).appendTo(“#mySelect2″);
});
$(“#mySelect1″).dblclick(function()[ //双击项搬过去
$("#mySelect1 option:selected").appendTo("#mySelect2");
}

·表单验证
<form>
<div>
<label>用户名：</label>
<input type="text" id="txtUid" value="" />
</div>
</form>
$("form :input.required").each(function(){ //往每个class有required样式的input元素后面添加*号
$(this).parent().append( $("<span class='star'>*</span>") );
});
$("form :input.required").blur(function(){ //失去焦点时验证域
if( this.value == "" ){
$(this).parent().append( $("<span class='error'>必填字段</span>") );
}
else{
$(this).parent().append( $("<span class='success'>验证正确</span>") );
$(this).parent().find(".error").remove();
}
}).keyup(function(){ //用户每点一个键触发
$(this).triggerHandler("blur");
}).focus(function(){ //控制有焦点时触发
$(this).triggerHandler("blur");
});
$("#btnSubmit").click(function(){
$("form :input.required").trigger("blur"); //让所有需要验证的域失去焦点
var errNum = $("form .error").length;
if( errNum ){
alert("有验证字段失败，请重新填写");
return false;
}
});

·表格应用
$("tr:odd").addClass("oddTr"); //给奇数行添加oddTr样式
$("tr:even").addClass("evenTr"); //给偶数行添加evenTr样式

$("tr:contains('王五')").addClass("highlightTr"); //查找包含“王五”的行，添加highlightTr样式

$("tr").click(function(){
$(this).addClass("selectedTr") //给当前行添加选中样式
.siblings().removeClass("selectedTr") //反选移除选中样式
.end() //结束，返回$(this)，否则则是反选的行
.find(':radio").attr("checked",true); //在当前行查找单选框，选中它
});

//-------------------- 第六章 JQuery与Ajax的应用 ------------------------

·load( url [,data] [,callback] )方法
url：要请求的页面的地址
data：要发送的相关参数
callback：回调函数

$(“#myDiv”).load(“hello.html”); //向myDiv元素加载hello.html的内容
$(“#myDiv”).load(“hello.html .myClass”); //筛选，只加载hello.html中myClass样式的内容

$(“#myDiv”).load(“hello.html”, function(){} ); //没参数的，使用GET方式
$(“#myDiv”).load(“hello.html”, {id:’123′, name:’dier’}, function(){} ); //有参数的，使用POST方式

$(“#myDiv”).load(“hello.html”, function(responseText, textStatus, XMLHttpRequest){ //回调函数
//responseText : 请求返回的内容
//textStatus : 请求状态 success error notmodified timeout
//XMLHttpRequest : Ajax对象
});

·$.get( url [,data] [,callback] [,type])和$.post( url [,data] [,callback] [,type])方法
url：要请求的页面的地址
data：要发送的相关参数
callback：回调函数
type：指定服务器返回内容的格式 xml html script json text _default

$.get( “test.aspx”, {id:”123″, name:”dier”}, function(data,textStatus){ //回调函数只有当状态是success才触发
//data : 请求返回的内容
//textStatus : 请求状态 success error notmodified timeout

//当data是HTML时，直接加载
$(“#myDiv”).html(data);

//当data是XML时，可筛选 <user id=”123″ name=”dier” age=”27″ />
var age = $(data).find(“user”).attr(“age”);

//当data是JSON时，可直接点出属性来 {id:”123″, name:”dier”, age:”27″}
var age = data.age;
});

·getScript(url [,callback])方法
$(function(){ //动态加载JS脚本
$.getScript(“test.js”);

$.getScript(“test.js”, function(){ //回调函数
//do something..
});
});

·getJSON(url [,callback])方法
$(function(){ //动态加载JS脚本
$.getJSON(“test.js”);

$.getJSON(“test.js”, function(data){ //回调函数
//do something..
//data : 返回的数据
$.each( data, function(index, item){ //遍历，相当于foreach
//index : 索引
//item : 当前项内容
//return false; 退出循环
});
});
});

·ajax(options)方法
url : 请求的地址
type : 请求的方式 GET POST 默认为GET
timeout : 请求超时时间(单位：毫秒）
data : 请求时发送的参数（String,Object）
dataType : 预期返回的数据类型 xml html script json jsonp text
bdforeSend : 发送请求前触发事件，如果return false则取消发送 function(XmlHttpRequest){}
complete : 请求完成后触发事件，不管成功与否 function(XmlHttpRequest, textStatus){}
success : 请求完成并且成功时触发事件 function(data, textStatus){}
error : 请求完成并且失败时触发事件 function(XmlHttpRequest, textStatus, errorThrown){}
global : 是否为全局请求，默认为true，可使用AjaxStart、AjaxStop控制各种事件

$.ajax({
url : “test.aspx”,
type : “POST”,
timeout : “3000″,
data : {id:”123″, name:”dier”},
dataType : “HTML”,
success : function(data,textStatus){
$(“#myDiv”).html( data );
}
error : function(XmlHttpRequest, textStatus, errThrown){
$(“#myDiv”).html( “请求失败：” + errThrown );
}
});

·序列化字符串 serialize()
$.get( “test.aspx”, $(“#form1″).serialize(), function(data,textStatus){
//将form1整个表单中的所有域序列化成提交的参数，支持自动编码
});

·序列化数组 serializeArray()
var arr = $(“:checkbox, :radio”).serializeArray();

·对象序列化 param()
var obj = {id:”123″, name:”dier”, age:”27″};
var kv = $.param(obj); //id=123&name=dier&age=27

·JQuery中的全局Ajax事件
ajaxStart(callback) //请求开始时触发
ajaxStop(callback) //请求结束时触发
ajaxComplete(callback) //请求完成时触发
ajaxSuccess(callback) //请求成功时触发
ajaxError(callback) //请求失败时触发
ajaxSend(callback) //请求发送前触发

$(“#loading”).ajaxStart(function(){ //当有AJAX请求时显示，完成时隐藏
$(this).show();
}.ajaxStop(function(){
$(this).hide();
}
);

//第七章是插件的使用及编写第八章则是一个实例此处忽略

让firefox支持javascript中的innerText

阿超 — Sun, 06 Jun 2010 09:47:47 +0000

运行该段HTML文件：

Hello world!

在IE下，正常弹出“Hello world!”；而在firefox中，弹出的是“undefined”的未定义错误；

现在用javascript编写这样的一段代码：
try{
HTMLElement.prototype.__defineGetter__
(
“innerText”,
function ()
{
var anyString = “”;
var childS = this.childNodes;
for(var i=0; i
{
if(childS[i].nodeType==1)
anyString += childS[i].tagName==”BR” ? ‘”n’ : childS[i].innerText;
else if(childS[i].nodeType==3)
anyString += childS[i].nodeValue;
}
return anyString;
}
);
}
catch(e){}

在运行该段HTML文件，即可正常弹出“Hello world！”了。

Ajax ext 的event学习-自定义事件与浏览器事件

阿超 — Sat, 01 May 2010 21:13:07 +0000

事件无疑是AJAX应用中最重要的部分，EXT将事件分为了两种：自定义事件与浏览器事件。

自定义事件
按字面意思就是用户自己定义的事件，这个事件通常与组件相关。并且需要用户根据组件的状态自己触发。相关的类Ext.util.Observable 、Ext.util.Event（Observable.js）。Ext.util.Observable是所有组件（component）的父类，它使得所有的组件都可以任意的添加自定义事件，它的events属性对事件进行维护，这些事件实际都是Ext.util.Event对象， Ext.util.Event对象里的listeners属性对与该事件相关的处理器进行维护。Observable给所有的子类提供了一个统一的接口来发布事件以及管理事件，这一特性对于组件来说是至关重要的。

浏览器事件
即传统意义上的鼠标单击、移动等等事件，这些事件是由浏览器根据用户的动作自己触发的，与页面元素紧密关联。相关的类Ext.Element 、Ext.EventManager、Ext.EventObject、Ext.lib.Event 。Element包含了常见的DOM方法和属性，提供一个快捷的、统一的、跨浏览器的接口，内置了常用的DOM节点的动作，并且是跨浏览器的定位的位置、大小、动画、拖放等等。对事件的处理，Element实际将这一处理委托给了EventManager，由EventManager对页面所有的浏览器事件进行管理，例如增加事件处理器、移除事件处理器等等，另外EventManager还定义了几个很重要的方法：onDocumentReady、 onWindowResize、onTextResize。其中onDocumentReady尤为重要，通常在页面需要通过它来启动我们的AJAX程序，它会在页面document渲染完毕而图片等还未下载时调用我们的启动函数。至于EventObject，它则是对原始的浏览器事件进行了封装，提供给事件处理器一个统一一致的事件接口。Ext.lib.Event呢？EventManager的很多功能其实是调用它完成的，它的listeners、 unloadListeners维护着所有的事件处理器。

ajax性能优化把ajax性能提高10倍

阿超 — Fri, 30 Apr 2010 22:11:38 +0000

EasyJWeb中已经有了一个Ajax远程脚本调用引擎，这是很早的事情了。但由于一直存在一些性能问题，所以一直没有给大家推荐，直到最近m3发布，通过对Ajax远程脚本调用引擎进行完善，把处理复杂对象的返回进行的简化，通过在以前的几个应用中进行了测试，发现性能一下子提升了至少10倍以上，并且运行比较稳定，因此在这里给大家推荐推荐。

EasyJWeb是一个提供了对Ajax远程脚本调用功能支持的框架，他帮助你完成Ajax远程脚本调用中的大多数细节工作，你基本上不用写额外的代码就能非常轻松的使用javascript来调用服务器的业务组件的相关方法，这些业务组件可以是任何java对象，比如EJB、EasyJWeb 容器中的Bean、Spring容器中的Bean等等。使用EasyJWeb的Ajax远程脚本调用，需要下面的几个步骤：
1、在EasyJWeb容器或子容器中配置供客户端脚本调用的业务组件。比如，在easyjweb的配置文件中像下面的方式配置Bean：

PersonServiceImpl的代码如下：

package easyjweb.demo.service.impl;
import java.util.Date;
import java.util.List;
import java.util.Map;
public class PersonServiceImpl {
/**
* 得到服务器当前时间
* @return
*/
public Date getTime() {
return new Date();
}
}

2、在EasyJWeb的配置文件，配置要把容器中的哪些业务组件及具体方法暴露给客户端进行远程脚本调用。内容大致如下：

上面的ajax配置信息表示暴PersonService的所有public方法供客户端使用javascript调用。
只需要上面的两步，就完成了服务器端的相关工作。服务器端不再需要写任何Action，EasyJWeb会自动处理客户端发送来的Ajax远程脚本调用，下面我们进一步看看客户端的程序。
3、为了能够在客户端页面中直接使用javascript进行对PersonService业务组件的Ajax远程脚本调用，我们需要在页面中引入下面三个js。

其中第一个ejf/easyajax/prototype.js引入的是prototype.js，这是一个javascript的基础库，提供很多对基础javascript类的扩展，并提供了ajax相关的实用组件，EasyJWeb的远程脚本调用引擎是基于prototype.js构建的。
第二个ejf/easyajax/engine.js是EasyJWeb的远程脚本调用支持引擎，他负责处理Ajax远程脚本调用的相关的细节，如参数处理、回调处理等，同时提供了一些实用工具如EasyAjaxUtil等供客户端使用。
第三个ejf/easyajax/PersonService.js是PersonService对象，PersonService.js的内容是根据服务器端的容器中名为PersonService的Bean及EasyJWeb的ajax配置信息生成的。只要引入了 PersonService.js，我们就可以直接在页面中调用PersonService的相关方法了。
上面的三个js文件都是服务器端动态生成的，需要我们在web.xml文件把所有/ejf/*的URL都交由EasyJWeb来处理。因此，需要在Web.xml的url中增加如下的映射内容：

easyjf
/ejf/*

4、在页面中使用javascript调用服务器的相关方法

怎么样，一切都是如此简单，不需要写任何PersonService的代码，不需要写任何Action，只需要进行非常简单的配置，就能让我们服务器上的业务组件支持Ajax远程脚本调用。

ajax入门 ajax使用方式3-java学习

阿超 — Thu, 29 Apr 2010 13:08:24 +0000

4、使用DWR进行ajax开发

DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).它的最新版本 DWR0.6添加许多特性如:支持Dom Trees的自动配置,支持Spring(JavaScript远程调用spring bean),更好浏览器支持,还支持一个可选的commons-logging日记操作官方，本文版本是DWR2.0 ,具体详情请访问DWR官方网站。

4.1、业务需求

通过一个简单的二级菜单来说明DWR的使用

4.2、业务实现

前台页面：

1一级菜单:
2
3
6
9
10        二级菜单:
11
12
13

js脚本：

1
2
3function findSub2(){
4ExamDictionaryManager.findSubNameList(dwr.util.getValue(“tct”),function(obj){
5dwr.util.removeAllOptions(“subCode”);
6dwr.util.addOptions(“subCode”,obj,’subCode’,'subName’);
7});
8}
9

上面引用的${ctx}/dwr/interface/ExamDictionaryManager.js是后台操作的业务类，在这需要声明
findSub2()方法是触发一级菜单的值传到后台业务方法进行处理并返回
dwr.util.removeAllOptions(“subCode”);是把二级菜单subCode值先清空
dwr.util.addOptions(“subCode”,obj,’subCode’,'subName’);是把二级菜单名称是subCode的以subCode为value，subName为text

提示：DWR2.0与DWR1.1的区别,是传入参数和回调函数顺序不同

DWR2.0:

红色字体是表明是参数在前，回调函数在后
1ExamDictionaryManager.findSubNameList(dwr.util.getValue(“tct”),function(obj){
2dwr.util.removeAllOptions(“subCode”);
3dwr.util.addOptions(“subCode”,obj,’subCode’,'subName’);
4});
5

DWR1.1:

红色字体表明是回调函数在前，参数在后

1ExamDictionaryManager.findSubNameList(function(obj){
2dwr.util.removeAllOptions(“subCode”);
3dwr.util.addOptions(“subCode”,obj,’subCode’,'subName’);
4},dwr.util.getValue(“tct”));
5}

dwr.xml文件

1
2 3    ”-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN”
4    ”http://www.getahead.ltd.uk/dwr/dwr20.dtd“>
5
6
7
8
9
10
11

spring配置文件

class=”com.gresoft.sanitation.service.examapply.ExamDictionaryManager” />

web.xml配置

1
2
3        dwr-invoker
4        uk.ltd.getahead.dwr.DWRServlet
5
6            debug
7            true
8
9        1
10
11
12
13        dwr-invoker
14        /dwr/*
15

业务方法：

1public List findSubNameList(String typeCode) {
2
3        String hql = ”select distinct new map(d.subCode as subCode,d.subName as subName) from ExamDictionary as d ”
4                + ”where d.typeCode =:typeCode”;
5        return createQuery(hql).setString(“typeCode”, typeCode).list();
6    }
7

通过前台js脚本传入的参数返回查询的数据集合

页面显示效果：

至此，二级级联菜单功能已经完成，通过上述例子，可以发现DWR框架为我们处理我们之前用XML或JSON进行数据转换
的功能，大大提高了开发者开发效率。

ajax入门 ajax使用方式2-ajax基础

jquery ajax入门 ajax使用方式1-ajax基础

阿超 — Wed, 28 Apr 2010 00:07:17 +0000

一、基本文本内容(Text方式）

二、xml方式

三、json方式

四、DWR等开源框架

1、Text方式是ajax开发中最为简单的一种方式。它返回就是一段普通的文本内容，主要是在操作过程中一些信息提示使用

比较常见的是在用户注册中新增用户判断用户名是否存在。

2.xml方式是ajax方式使用最多的一种方式，它的数据表达更丰富，本文以一个自动提示的例子为原型介绍，

大家都知道大名鼎鼎的google,它里面强大的自动提示功能使很多人为之倾倒。
表结构：

后台表结结构如下：

1列                             类型      类型
2名称                           模式      名称               长度     小数位  NU
3L
4—————————— ——— —————— ——– —– —-
5-
6ID                             SYSIBM    INTEGER                   4     0 否
7
8LOGINID                        SYSIBM    VARCHAR                  20     0 是
9
10NAME                           SYSIBM    VARCHAR                  80     0 否
11
12PASSWD                         SYSIBM    VARCHAR                 255     0 否
13
14EMAIL                          SYSIBM    VARCHAR                 255     0 是
15
16STATUS                         SYSIBM    VARCHAR                   2     0 否
17
18DESCN                          SYSIBM    VARCHAR                 255     0 是
在这里测试主要是获取LOGINID和NAME两列值，如上述页面显示第一位置是LOGINID(test1),第二个位置是NAME(test)

前台页面：

1
2
3  input your name
4
5
6
7    new AutoSuggest(document.getElementById(‘in_section_office_content’),
8  new ACClient(“${ctx}/autosuggest.do?method=query_xml&username=”, ”160px”,
9  document.main.in_section_office,”USERNAME” ));
10
11
12

ACClient脚本：

1this.objInput.value = node.getAttribute(disvalue);
2 document.main.in_section_office_content.value = node.getAttribute(“USERNAME”);

上面的代码主要是在前台页面中两个输入框需要显示具体表字段信息，objInput是第二个文本域要显示的内容（业务是需要USERNAME节点），in_section_office_content是第一个文本框显示的内容(在这里是test)

生成的xml格式如下：

1
2-
3
4
5

控制层方法如下：
1public void query_xml(ActionMapping mapping, ActionForm form,
2            HttpServletRequest request, HttpServletResponse response) {
3        renderDOM(response,autoSuggestService.getAutoSuggestStr(“autosuggesttest”,request.getParameter( ”username” ).trim(), 7));
4    }

1 /** *//**
2     *使用JDom方式
3     * @param response
4     * @param text
5     */
6    protected void renderDOM(HttpServletResponse response, Document doc) {
7        render(response, doc, ”text/xml;charset=UTF-8″);
8    }

业务方法如下：
1public Document getAutoSuggestStr(String queryCode,String queryValue,int pageSize) {
2        Element root = new Element(“earnet”);
3        Document doc = new Document(root);
4        int nMaxCount = pageSize;
5
6        int nCount = 0;
7        List namelist = jdbcTemplate.queryForList(xmlService.get(
8                queryCode, queryValue));
9
10        for (Iterator it = namelist.iterator(); it.hasNext();) {
11            ListOrderedMap listOrderdMap = (ListOrderedMap) it.next();
12
13            Element ele = new Element(“object”);
14            StringBuffer sb = new StringBuffer();
15            if (listOrderdMap != null && !listOrderdMap.isEmpty()) {
16                Set set = listOrderdMap.keySet();
17                for (Object key : set) {
18                    String value = (String) listOrderdMap.get(key);
19                    if (StringUtils.isNotBlank(value)) {
20                        ele.setAttribute((String)key, value);
21                        sb.append(“[").append(value).append("]“);
22                    }
23                }
24            }
25            ele.setAttribute(“fullcontent”, sb.toString());
26            root.addContent(ele);
27
28            nCount++;
29            if (nCount >= nMaxCount)
30                break;
31        }
32        return doc;
33    }
主要是从后台数据库进行数据查询并组装成xml格式

这样就达到了使用xml方式完成自动提示功能，今天先总结到这里，以后陆续更新

ajax入门 ajax使用方式2-ajax基础

ajax开发的聊天室源代码

阿超 — Mon, 26 Apr 2010 23:05:41 +0000

个基于Ajax的网上聊天室示例应用，该系统涉及到多线程、支持多聊天室、支持聊天室管理、用户管理、聊天日志记录等多个功能。由于这个系统是很早以前做的，很多地方存在不足，这周末心情好，把这个应用翻了出来，把系统进行了重新调整，使用EJS(EasyJWeb+JPA+Spring)构架，使用EasyJWeb的自动代码生成及ajax支持等功能开发。在此推荐给对于JPA、Spring2、EasyJWeb及Ajax技术感兴趣的朋友们，欢迎一起交流。

该系统的演示地址：http://easyjweb.demo.easyjf.com/chatroom/
系统源码下载地址：ftp://ftp1.easyjf.com/easyjweb/demo/chatroom.rar
系统的SVN地址：http://svn.easyjf.com/repos/easyjwebdemo/trunk/chatroom 由于还存在不少问题，因此我们会根据大家的反馈进行不断调整，所以SVN中的代码一般是最新的。

系统演示：
聊天室主界面

房间管理

日志列表

显示会议记录

OPENAJAX HUB

阿超 — Mon, 26 Apr 2010 00:03:54 +0000

OpenAjax Hub（“Hub”）主要用来处理Web应用开发者需要在同一个应用中同时使用多个AJAX运行库的情况。它提供标准的JavaScript，当被包含在AJAX驱动的Web应用里时，它使得多个AJAX工具包能够在同一个页面里一起协同工作。

AJAX应用开发者在开发中的需求往往存在着巨大的差异，这导致了如今市场上存在超过200个各种各样的AJAX产品，同时这些产品的架构和特性也存在巨大的差异。对一些开发者来说，他们认为开发中最重要的因素是找到一个能提供与后端服务器强大集成能力的AJAX工具包。

而对其他一些开发者来说，最重要的因素则是能否应用特殊的客户端组件（例如，富数据网格组件或交互式的图表组件）。结果，AJAX生态系统发展到现在，开发者在大部分时间里都能找到满足他们每个特殊需求的AJAX工具包，但是也存在问题，他们往往必须在同一个Web应用里混合和匹配使用多个AJAX工具包才能满足所有的需求。

Hub应用的一个重要场合是门户和内容糅合，这里，应用开发者创建一个页面，页面里松散组装预先包装好的应用组件。Hub实际上是保证这些AJAX驱动的应用组件能够使用多个不同的AJAX工具包创建。

主要特性：Hub 的发布/订阅管理器

Hub的主要特性是它的发布/订阅管理器（“pub/sub管理器”）。 pub/sub管理器允许内容糅合的一个部分能够传播其他应用组件所订阅的事件。例如，假设存在一个日历组件，该组件允许用户能够选取一个特定的日期。内容糅合里可能存在多个UI组件，这些组件都需要根据新选择的日历日期而更新它们的视觉外观。在这种情况下，日历组件将发布一个“新日历日期”的事件，而其他可视化组件将订阅这个事件。因此，pub/sub管理器的通用消息的优点是给由不同AJAX工具包所构建的组件之间提供了一个关键的集成机制。

Hub的pub/sub管理器提供各种各样的先进特性，例如对事件名称通配符的强大支持，在下面的例子里并没有展示这个特性。

范例

让我们假设现在有这样一个商务智能应用，该应用使用下面的AJAX运行库：

■ UTILS.js, 对浏览器的JavaScript环境提供非常有用的扩展，例如XMLHttpRequest的APIs。

■ CALENDAR.js,提供一个日历组件

■ CHARTS.js, 提供一个图表组件

■ DATAGRID.js,提供一个交互式的数据网格组件

该应用有一个唯一的日历组件，用户可以以图表组件的形式（例如，每日情形、每周情形、每月情形和每年情形的柱状图）和数据网格组件的形式（例如，地方数据与全国数据，两种数据都以用户选择的感兴趣的列展示）选择其中的一些数据视图当一个新的日期在日历组件里被选择时，各个用户指定的可视化组件（例如，图表和/或数据网格组件）都需要被更新。

实现该应用的一个方法是在加载其他AJAX库之前加载OpenAjax Hub的JavaScript。例如：

一些AJAX运行库包含OpenAjax Hub，将Hub作为它们标准发布的一部分，在这种情况下，只要特定的AJAX运行期的JavaScript（译注：这里特定的JavaScript指的就是包含OpenAjax Hub的AJAX运行库的代码）在其他兼容OpenAjax的运行库之前被加载，那么则没有必要为OpenAjax.js使用一个单独的

接着开发者需要开发这样一些代码：所有的图表组件和数据网格组件都要订阅这个新日期事件，并要提供一个回调函数。各个回调函数将相应地更新特定的可视化组件：

function NewDateCallback(eventname, publisherData,

subscriberData) {

更新特定的可视化组件

}

OpenAjax.hub.subscribe(“myapp.newdate”, NewDateCallback);

未来支持OpenAjax Hub的工具包

OpenAjax联盟正与工业界一起合作，达到对OpenAjax Hub的广泛支持。一个特殊的AJAX工具包可以像下面这样支持OpenAjax Hub：

■ AJAX工具包可以包含Hub（最好的方式）。Hub可以被小于3K的JavaScript实现，所以一些AJAX工具包简单地捆绑Hub，将它作为它们工具包的一个标准组件。

■ 如果Hub在运行环境里可用则使用它。其他一些AJAX工具包可能决定在它们的发布中并不包含Hub，它们会检查Hub是否早先已经被加载了，如果已经加载，它们则直接使用Hub的服务。

■第三方的开发者可以开发适配器。对大多数工具包来说，它们可能允许第三方的开发者编写少量的JavaScript使得自己能够支持Hub。

当AJAX工具包包含内置对Hub的支持时，应用开发者的工作将更加容易，但是通过查找或编写适配器的方式，Hub依然可以被那些并未实现支持Hub的工具包所使用。

jQuery插件开发

阿超 — Sat, 24 Apr 2010 23:02:14 +0000

jQuery官方文档上推荐开发插件时要按下面格式来写，我第一次看源代码时看到这样的写法，被郁闷了好半天。

(function($) {
// Code goes here
})(jQuery);

下面将记录为什么这样写，这样写具体有哪些好处。

其实上面这种方式等价于下面这种定义方式, 不过上面的方式更安全.与JAVA里面的隐藏类有点类似，这样定义之后，很大程序上毕免了第三方的误操作，从而破坏封装性。

上面的代码等价于下面的代码，我想这样写大家都能看明白了吧。
var jQueryFucntion=function($) {
// Code goes here
//本文首发于 http://b.xfuse.cn
}
jQueryFucntion(jQuery);

(function($) {
// Code goes here
})
上面定义了一个jQuery函数,形参是$

(function($) {
// Code goes here
})(jQuery);
这个就是调用之前定义的函数,然后把jQuery这个实参传递进去.

这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.

如果不通过上面这种方式定义,而end-use又使用了prototype, 那么就会形成无法调和的矛盾了.

什么是ocx控件Javascript调用OCX控件

阿超 — Sat, 24 Apr 2010 01:00:58 +0000

什么是ocx控件？

对象链接和嵌入用户控件（OCX）是一种可以由在微软的Windows系统中运行的应用软件创建使用的特殊用途的程序。

想知道究竟的可以看看这个帖子。

http://www.tososo.com/html/software-learning/20070829/3710.html

偶用的VC6，顺手开发了一个简单的ocx控件，具体怎么写的就不显了。

做好了以后，才是我今天要记下的东西——通过Javascript调用ocx控件。

这里的调用基本上可以分这几步：

1.找出相关信息

首先我们的给这个ocx起个名字，起什么名字通过最后生成的ocx控件的文件名决定。
第二，我们的找到这个ocx的编号值,将ocx提取出来，我采用Microsoft Control Pad来编辑，得到ocx控件的classid, 然后我们做下面的工作。

2.注册ocx控件

注册ocx控件使用RegSvr32.exe。
使用RegSvr32.exe(在System目录下)注册，语法为：
RegSvr32 ocxname.ocx
如果注册成功将显示一个成功的消息框。

如果不希望看到这个对话框，也可以使用/s选项，如
RegSvr32 /s your.ocx
如果取消注册，可以使用/u选项，如
RegSvr32 /u your.ocx

3.加载ocx控件

注册成功后，我们就得写一个html页面，通过来加载这个控件了。具体如下：

data=”data:application/xoleobject;base64,mRHW/Ifh3UqI5ZryOEhtERAHAAD/KgAAYSQAAA==”

classid=”CLSID:通过MCP找到的classid” VIEWASTEXT>

4.调用

先要定义调用事件

short IOStart()

接下来写调用方法

function IOStart()

{

TestOcx.IOStart();

}

说明：TestOcx对应于中的id属性。IOStart()是在ocx中定义的方法。

好了，这里通过Javascript调用ocx就完成了。

其实还有一部分内容就是通过javascript捕获ocx事件，这个问题以后在来说明。

JavaSript的RIA客户端数据处理下

阿超 — Thu, 22 Apr 2010 01:47:25 +0000

一、引子
上一篇讨论了关于客户端数据处理的一些问题，以简单的用例场景的方式描述了出来。很明显，要想实现一个功能完整的Rich客户端的话，必须能够满足上述用例场景的需求。能否根据这些需求做出合理的设计，是一个挑战。尤其对于设计而言，不同的人有着不同的风格，而且由于背景不同，也会有不同的见解。本文中，我只是陈述出自己的一些想法和设想，更多的是希望能够抛砖引玉，通过在这个方面的讨论也能增进我的理解。呵呵。

很显然，blog的形式更适合作为思路的介绍以及探讨的平台，而不是详细设计的文档。而且很明显这一篇文章是承载不了所有的详细设计的。我争取把我在各个细化的方面的想法在后续的文章里面发出来。如果时间允许的话，整理出初始的文档和代码，建立一个小的开源项目未尝不可（因为如此，所有的JS都是采用英文来注释──其实还有一个原因是练习英文 :)）。这都是后话了。

二、缩略语

RIA：Rich Internet Application的缩写。RIA是拥有传统本地应用的功能和效果的Web应用。RIA一般把UI相关的处理交给了Web客户端，但是大量的数据（包括应用的状态、数据等）还是交给服务端处理
2.

Ajax：又写为AJAX，是”Asynchronous JavaScript and XML”的缩写。是一种使用浏览器技术进行RIA开发的技术
3. Prototype：开源的优雅的Ajax以及JavaScript基础扩展框架。由于被Rails采用而闻名，使用相当广泛
4. jQuery：功能类似Prototype + script.aculo.us的开源Ajax框架。据我所知，Google用得比较多
5. Ext：对YUI的一个扩展的UI构件库。经过改进后，可以使用jQuery或者Prototype作为基础。目前好像正在完善自身的基础Ext base。以优秀的构件闻名。虽然目前仍然属于商业构件库，但是License相对宽松，一般的商业应用可以免费使用
6.

dojo：由dojo foundation管理的一个开源JavaScript框架。提供了很好的JavaScript扩展，目前被IBM和Sun等大公司支持和使用
7.

Json： JavaScript Object Notation的缩写。它是一种纯文本的数据对象传输协议，在Ajax的应用中被广泛采用
8.

CRUD：Create（创建）、Retrieve（获取）、Update（更新）和Delete（删除）这四种简单的数据操作的缩写
9.

Form：本文中的Form指的是经过Ajax扩展的简单的HTML电子表单。表单内部可以拥有很多如ComboBox、TextBox等构件。一般来说，一个表单对应着一个业务的数据对象
10.

Tree：树形显示结构化数据的构件，由于数据是高度结构化的，往往可以采用懒加载等技术来提高性能
11.

Grid：以表格形式显示和编辑数据的UI构件。一般分为表头（标题栏）、表身（数据列表）和表尾（合计、状态显示等）三个部分。其中，表头可以是复合的表头，而表身可以是复合的格式（Tree、Grid、ComboBox、CheckBox等）。一个Grid可以有一个复杂的Grid定义
12.

Enhanced Grid：下面简称为EGrid，是Grid的扩展。在Grid的功能基础之上提供了数据获取和数据持久化的能力，可以大大的减少开发应用的时间（Ext中的Grid可以认为是一个简化了的EGrid）
13.

CodeList：代码表，一般用在下拉列表数据处，在系统的实现中，由于性能以及标准的要求，下拉列表一般都是采用代码保存数据，但是用户在填写表单的时候需要看到正常的文字而不是代码，这就需要系统通过CodeList进行文字和代码的转换
14.

LRU：Least Recent Used的缩写，是一种简单的缓存策略，如果缓存已满，那么就释放最近最少使用的那个缓存数据
15.

REST：是REpresentational State Transfer的缩写，是一种基于轻量级WebService协议
16. JDBC：是Java DataBase Connectivity对缩写，是基于Java的数据库连接规范。

三、基础
既然决定采用Ajax，就最好采用一个基础，在这个有很多优秀的Ajax框架可供选择的时代，谁要是还要赤手空拳的来写Ajax应用，就未免有点儿过于勇敢，而近于鲁莽了。这篇文章不是Ajax框架对比文章，我不打算在这里一一列举各个流行的Ajax框架的优缺点，我只拿下面几个进行讨论，dojo、 Prototype、jQuery、Ext。

先提需求，框架应该：

1. 以一种形式支持面向对象（毕竟开发人员多数都是Java程序员，更有可能的是，他/她只对Java熟悉）
2. 以一种方式来支持命名空间和分包机制（开发企业应用与开发网站不同，复杂的不是技术而是业务。没有命名空间和分包支持，对于大型应用，基本不可控制。──设想一下如果Java没有package关键字会怎样）
3. 有完善的模块封装与管理规范或者最佳实践，能够自动处理模块间的依赖则更好（模块的定义不在这里解释了，一个例子说明吧，一个Jar就是一个模块。模块化和构件化是实现、维护和管理大型应用的重要手段）
4. 提供丰富的调优选项，使得对复杂的应用调优是可能的（这一点对于UI层尤为重要，因为它直接面对使用者）
5. 便于调试（这一点对于开发者致关重要）

综合上面几点，我选择dojo作为基础。Sorry Prototype。

四、整体构架

整体构架如下图所示（为了便于理解UI构件与其对关系，我把需要数据处理的UI构件也加了上去，图中蓝背景色的部分就是）：

一目了然，整个客户端数据处理由3个部分构成，DataSource、DataSet和DataStore。下面分别进行简单的介绍。

五、DataSet
DataSet的概念很简单，就是数据对象的集合。它的构架如下图所示（注意：DataSet只是一套标准的API，可以有不同的实现——比如XML形式的）：

如图所示，DataSet由四个部分构成，Record Set（数据集合）、Change Tracker（数据变更追踪）、Meta Data（数据对象源信息）和Cursors（游标API）。

分别介绍如下：

1. Record Set：Record Set就是Record的集合，一个Record就是一个数据对象，它由一系列的属性（Property）构成，属性是一个简单的字符串，其对应的值可以是任意类型。Record提供属性读写的方法，可以直接在Record上对属性进行读写，并且，Record会为写操作提供一个事件。Record Set内部的元素必须是Record，Record Set支持对内部Record的CRUD操作。并且会有相应的事件触发
2. Change Tracker：ChangeTracker为DataSet提供所有写操作的追踪，可以通过配置选择Change Tracker是否记录修改，如果记录修改，采用的是针对每一个Record记录增加、删除以及针对每一个属性记录First和Last修改的策略
3. Meta Data：提供DataSet中Record的元数据（属性名、属性对应类型、其他自定义数据——校验、Form Label信息、表头信息等）以及DataSet的元数据（在全部数据中的位置等）。
4. Cursors： Cursor其实就是Record的迭代器，可以通过对dataset查询（一般都是非常简单的filter或者range）得到，推荐通过Cursor 进行Record访问，而不是通过Index，因为通过迭代器访问Record，DataSet拥有更多的能力。虽然通过Cursor完全可以访问所有的 Record及其中的数据，但是由于DataSet拥有MetaData，所以还是采用DataSet作为数据绑定的主体

DataSet是整个客户端数据处理构架的核心，所有的数据访问都应该通过DataSet的API。这样客户端的数据处理才是统一的一个整体。

解决的用例问题：

* 数据绑定：Form绑定、Grid绑定
* 数据变更追踪：Grid变更提示、数据集合变更追踪、Form修改的追踪
* 数据访问：数据对象元数据信息访问、数据写操作的统一事件定义、统一的数据读取方式

六、DataSource
DataSource的功能是提供对数据进行查询以及数据的持久化（持久化到客户端或者服务器端）。与DataSet一样，不同的格式数据就会有不同的 DataSource，一种DataSource代表了一种客户端与服务端的数据传输协议。但是由于DataSource的逻辑与结构过于复杂（事实上， DataSet的实现也完全依赖DataSource的实现，可以类比JDBC），不应该对每一种格式都重新实现一个DataSource，由此， DataSource不应该是一套标准的API，而是使用了Adapter模式，来满足不同的数据来源，其构架如下图所示：

看上去很简单？实际上这是最复杂的部分，关于这个部分，至少可以再写3篇文章来详细探讨，在本文中，就不过度讨论了。:)

如图所示，DataSource由Cache、Query、Persist以及Providers构成，分别介绍如下：

1. Cache：Cache的概念在前面已经阐述了，不在这里多说了。在这里简单的介绍一下客户端Cache的策略以及技术，由于基于浏览器的数据缓存技术非常重要，拟在后续的文档《客户端的缓存策略与相关技术》中对其进行详细讨论
* 缓存策略（这一方面客户端数据的缓存与服务端的数据缓存考虑的问题应该是类似的，唯一的区别是，客户端的数据缓存不必考虑集群支持。:)）
o LRU：基础的Cache算法，如果缓存已满时，根据最近很少使用算法来确定哪些对象需要被清除
o Priority：按照优先级高低来清理缓存空间的策略，当缓存已满时，按照优先级高低来确定哪些对象需要被清除，可以与LRU算法共存
o Refreshable：有时效性的数据，或者在运行时有可能会被修改需要同步或者刷新的数据。可以设置数据过期时间，到时间则数据处于stale状态，再度访问该数据时，如果不能重新获得该数据，则报错
o Expireable：临时性数据，可以设置失效时间，到时间则数据失效，在缓存需要清理时，缓存会清理掉这些失效的对象
* 缓存持久化（属于高级的缓存策略，依赖客户端基于JavaScript的数据存储技术）
o Save（持久化）：把缓存当中的数据持久化到本地或者服务端，其用处如下
+ 通过把数据持久化可以增加Cache的容量
+ 数据本地缓存提供了离线表单填写的能力
o Retrieve、Delete：对缓存中数据的基本操作
o Sync：离线缓存的本地数据，可以与远程服务端进行同步，从而实现离线表单提交以及实现离线CodeList等功能
* 缓存技术
o Client
+ 内存引用
+ Cookie
+ Google Gear
o Server（服务端协助客户端做一些缓存，这在传统的B/S下是匪夷所思的设计，在RIA的情况下却未尝不是一种手段）
+ WebService或者REST
+ Post + Get
2. Query：其实Query只是一个方法，由于有可能会向服务端发XmlHttpRequest，所以这个方法需要回调方法。其参数应该是一个Query对象，一个配置对象，有一些事件的关键字（onBegin、onError、onSuccess等）。Query对象以及配置对象的格式在本文中就不详细说明了，留给以后慢慢说（因为这个部分是我最喜欢的部分）。很明显，如果查询成功，查询的结果应该是DataSet，一般来说，DataSource是DataSet 来源。不同的DataSource，查询的语言未必相同。不一定所有的查询对象都支持SQL语法（比如可以支持HQL或者XQuery啊），而且我最推荐采用的是服务端提供一个服务抽象层，接受Json格式的查询请求，并返回Json格式的数据
3. Persist：数据持久化。只是Save和Update两个方法。接受DataSet和配置对象作为参数（这两个方法也应该是异步的）。如果DataSet里面没有足够的元数据信息，需要在配置对象里面提供这些信息。这个部分不比Query部分复杂
4. Providers：数据的来源，提供了Query和Persist API的实现，是DataSource的底层实现，它使DataSource的实现可以跨不同协议而使用。给DataSource提供不同的 Provider，DataSource就可以支持不同的数据传输协议。

DataSource是数据查询和持久化的核心，所有的客户端的数据查询和持久化基本都应该采用DataSource，从而获得DataSource提供的强大而灵活的特性。

解决的用例问题：

* 数据缓存：离线运行的CodeList、离线表单填写、性能考虑
* 数据查询：样本查询、模糊查询、Range查询、逻辑查询、自定义查询
* 数据处理：数据处理事件、过滤、排序

七、DataStore
DataStore基于DataSource和DataSet的实现，实现了dojo的data api。这样既实现了对需要dojo api的dojo构件的支持，又满足了类似Tree、EGrid这种既需要绑定又需要数据来源的高级构件的要求。总体来说，DataStore只是薄薄的一层接口，实际的实现完全依赖于DataSource。

解决的用例问题：

* 数据绑定、查询、处理：Tree绑定、ComboBox数据源、EGrid绑定

八、待讨论的问题
客户端的数据处理事实上要比我想象得还要复杂，我还有一些设计决策没有确定，列举下来以供讨论吧。
8.1 客户端的事务处理？
由于很多数据处理都放在了客户端。客户端的数据处理操作相应增多而且复杂，是否应该在DataSource中添加写事务的处理？以便对数据操作进行更细粒度的管理，而不是仅仅停留在Query、Save和Track阶段？
8.2 权限数据的来源
如果可以连接到服务端，用户在向服务端登录后，服务端会返回用户的权限信息列表。客户端接收后，可以相应的提供权限控制。但是，如果客户端离线运行，用户无法向服务的登录，权限信息列表无从获得，怎么提供权限控制？

探讨方案1：离线客户端无须登录，由于没有权限控制列表，默认拥有系统最低权限（固定的配置在客户端），由系统开发人员决定用户在离线时可以进行何种操作。用户在线提交数据的时候，服务端也要根据相应的权限进行验证以防止越权的数据操作

探讨方案2：离线客户端仍须登录，权限控制列表使用用户在线登录时缓存的数据。其余与在线方式相同。如果用户没有在线登录过，那么离线应用无法使用。
8.3 跨域数据的来源
由于浏览器的安全性策略，JavaScript无法向除本身域之外的其他服务器发送请求。也就是说，对于JavaScript而言，所有的数据必须来源于同一个域的服务器。对客户端进行集成非常不利。

探讨方案1：服务端提供一个服务接入层，接受如Spring Bean、EJB、JMS、WebService等形式的服务，并且把所有的服务都转化成为一种固定格式的协议与客户端交互。所有的服务集成与协议转化都交给服务端，对客户端完全透明。

探讨方案2：服务端提供一个简单的Proxy，通过一定的协议把请求和回复转发给客户端，处理交给客户端来做
九、小结
虽然到了这里，但是对于基于JavaScript的RIA客户端数据处理的讨论却才刚刚开始，还需要很多后续的展开讨论。但是，上午已经过去了，需要去吃午饭了。

JavaSript的RIA客户端数据处理

jquery水平动画导航条jquery插件

阿超 — Wed, 21 Apr 2010 02:21:53 +0000

jQuery Multi Level Menu Style 11 (Black)	jQuery Multi Level Menu Style 11 (Steel Blue)	jQuery Multi Level Menu Style 11 (Saddle Brown)	jQuery Multi Level Menu Style 11 (Yellow Green)
jQuery Multi Level Menu Style 11 (Peru)	jQuery Multi Level Menu Style 11 (Dark Olive Green)	jQuery Navigation Menu Style 10 (Deep Sky Blue)	jQuery Navigation Menu Style 10 (Olive Drab)
jQuery Navigation Menu Style 10 (Lawn Green)	jQuery Navigation Menu Style 10 (Gainsboro)	jQuery Navigation Menu Style 10 (Orange)	jQuery Navigation Menu Style 10 (Black)
jQuery Menu Slide Style 09 (Medium Slate Blue)	jQuery Menu Slide Style 09 (Slate Gray)	jQuery Menu Slide Style 09 (Green Yellow)	jQuery Menu Slide Style 09 (Black)
jQuery Menu Slide Style 09 (Deep Sky Blue)	jQuery Menu Slide Style 09 (Dark Goldenrod)	Animated jQuery Menu Style 08 (Black)	Animated jQuery Menu Style 08 (Dim Gray)
Animated jQuery Menu Style 08 (Orange Red)	Animated jQuery Menu Style 08 (White Smoke)	Animated jQuery Menu Style 08 (Deep Sky Blue)
Animated jQuery Menu Style 08 (Yellow Green)	jQuery Menu Plugin Style 07 (Royal Blue)	jQuery Menu Plugin Style 07 (Orange)
jQuery Menu Plugin Style 07 (Lime)	jQuery Menu Plugin Style 07 (Gray)	jQuery Menu Plugin Style 07 (Fire Brick)	jQuery Menu Plugin Style 07 (White)
jQuery CSS Menu Style 06 (Gainsboro)	jQuery CSS Menu Style 06 (Midnight Blue)	jQuery CSS Menu Style 06 (Black)	jQuery CSS Menu Style 06 (Maroon)
jQuery CSS Menu Style 06 (Light Sea Green)	jQuery CSS Menu Style 06 (Forest Green)	jQuery Horizontal Menu Style 05 (Dark Green)	jQuery Horizontal Menu Style 05 (Gray)
jQuery Horizontal Menu Style 05 (Steel Blue)	jQuery Horizontal Menu Style 05 (Black)	jQuery Horizontal Menu Style 05 (Red)	jQuery Horizontal Menu Style 05 (White)
jQuery Menu Drop Down Style 04 (Steel Blue)	jQuery Menu Drop Down Style 04 (Forest Green)	jQuery Menu Drop Down Style 04 (Gray)	jQuery Menu Drop Down Style 04 (Red)
jQuery Menu Drop Down Style 04 (Dim Gray)	jQuery Menu Drop Down Style 04 (Blue Violet)	jQuery Dropdown Menu Style 3 (Olive Drab)	jQuery Dropdown Menu Style 3 (Dark Gray)
jQuery Dropdown Menu Style 3 (Deep Sky Blue)	jQuery Dropdown Menu Style 3 (Orange Red)	jQuery Dropdown Menu Style 3 (Black)	jQuery Dropdown Menu Style 3 (White)
jQuery Drop Down Menu Style 2 (Dim Gray)	jQuery Drop Down Menu Style 2 (Brown)	jQuery Drop Down Menu Style 2 (Dark Olive Green)	jQuery Drop Down Menu Style 2 (White Smoke)
jQuery Drop Down Menu Style 2 (Steel Blue)	jQuery Drop Down Menu Style 2 (Black)	jQuery Menu Style 01 (Yellow Green)	jQuery Menu Style 01 (Deep Sky Blue)
jQuery Menu Style 01 (Black)	jQuery Menu Style 01 (White Smoke)	jQuery Menu Style 01 (Orange Red)	jQuery Menu Style 01 (Dim Gray)

使用js搜索网页表格内容

阿超 — Wed, 21 Apr 2010 00:46:18 +0000

表格在网页中应用十分广泛，一个表格的使用涉及到多种操作技术，各种灵活的操作可以形成一个功能强大的表格，而这些操作大都是基于javascript来完成的，下面就是使用javascript来实现对一个表格的所在列进行搜索，分别完成模糊搜索和绝对搜索功能。
以下为模糊搜索并将搜索到的内容所在的行跳到当前面前中.
1

以下为对一个表格中第一列中的数据进行绝对搜索，同样把所对应的内容所在行跳至当前页面。
1

json介绍 json使用 ajax入门 ajax使用方式

阿超 — Mon, 19 Apr 2010 00:43:22 +0000

3、JSON方式

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写，比xml有更好的易用性json中文网站

JSON具有以下这些形式：

对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。

字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。
字符串（string）与C或者Java的字符串非常相似。

数值（number）也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节。

以下是以自己在项目中实际使用到JSON为原型进行举例

1、业务描述：

根据前台搜索信息进行搜索，并把后台查询出来的数据集合封装成JSON的方式展现在前台

前台页面搜索：

1
2
3

4 预约挂号反馈资源管理
5

7
8                    开始日期
9
10
11
12                    结束日期
13
14
15
16                    病人姓名
17
18
19
20                    科室
21
22
23
24

25
26
27
28

js脚本，在这里用到Prototype开源组件，意在规避ajax底层操作prototype官方网站

1function aa(){
2
3        var url = ’${ctx}/registerresult.do?method=listFor1′;
4        var name22=$F(“name2″);
5        var myAjax = new Ajax.Request(
6        url,
7        {
8            method: ’post’,
9            parameters:Form.serialize(‘form1′),
10
11            evalScripts: true,
12
13            onComplete:reportError
14        });
15}
16 function reportError(originalRequest){
17      var myobj = originalRequest.responseText.evalJSON(true);
18      var tdate = new Date;
19      var tmonth =tdate.getMonth()+1;
20      var tday=tdate.getDate();
21      if(tmonth<10)
22         tmonth=”0″+tmonth;
23       if(tday<10)
24            tday=”0″+tday;
25      var ymdate = tdate.getYear()+”"+tmonth+”"+tday;
26      var str=”

”;
27      str=str+”< tr>”;
28      myobj.each(function(myobj1){
29
30      if(ymdate==myobj1[4]){
31      str=str+””;
32      str = str+””;
33      str = str+””+myobj1[1]+””;
34      str = str+””+myobj1[2]+””;
35      str = str+””+myobj1[3]+””;
36      str = str+””+myobj1[4]+””;
37      str = str+””+myobj1[5]+””;
38      str = str+””+myobj1[6]+””;
39      str = str+””+myobj1[7]+””;
40      str=str+””;
41
42    }else{
43      str=str+””;
44      str = str+””;
45      str = str+””;
46      str = str+””;
47      str = str+””;
48      str = str+””;
49      str = str+””;
50      str = str+””;
51      str = str+””;
52      str=str+””;
53      }
54      });
55    str=str+”

确认号	反馈结果< /td>	申请单号	申请日期	病人编号	病人姓名	科室名

”+myobj1[1]+”	”+myobj1[2]+”	”+myobj1[3]+”	”+myobj1[4]+”	”+myobj1[5]+”	”+myobj1[6]+”	”+myobj1[7]+”

”;
56 $(“pp”).innerHTML=str;
57
58 }
此脚本中aa()是获得前台form1表单中查询数据并调用后台方法；reportError()方法是获得封装后的JSONArray进行遍历并进在
前台进行展示

控制层代码如下：

1/** *//**
2     * 此为ajax测试,把查询结果list使用JSON方式返回
3     *
4     * @param
5     *
6     */
7    public void listFor1(ActionMapping mapping, ActionForm form,
8            HttpServletRequest request, HttpServletResponse response)
9            throws Exception {
10        String operate_date1 = request.getParameter(“operate_date1″);
11
12        String operate_date2 = request.getParameter(“operate_date2″);
13        String name1 = request.getParameter(“name1″);
14        String name2 = request.getParameter(“name2″);
15        log.info(“开放日期:” + operate_date1);
16        List list = registerresultManager.queryApply(registerresultManager
17                .registerResult(operate_date1, operate_date2, name1, name2),
18                getListPage(request, Constant.COUNT));
19
20
21        JSONArray resultArray = new JSONArray();
22        JSONObject jsonObject = new JSONObject();
23        for (int i = 0; i < list.size(); i++) {
24            Object[] d = (Object[]) list.get(i);
25            jsonObject = registerresultManager.getJSON(d);
26            resultArray.put(jsonObject);
27        }
28
29        // 调用基类方法，转化成json方式
30        renderJson(response, resultArray.toString());
31            }
32
此代码是根据查询条件查询出符合条件数据集合，并把集合转化成JSONObject,并把此对象放入JSONArray

转化成JSONObject方法如下：

1/** *//**
2     * 转换成JSON格式
3     * @param domain
4     *                 是要进行转化的实体对象
5     * @return JSONObject
6     */
7    public JSONObject getJSON(Object[] domain) {
8        JSONObject jsonObject = new JSONObject();
9        for (int i = 0; i < domain.length; i++) {
10            if(domain[i]==null)
11                domain[i]=”";
12            jsonObject.put(String.valueOf(i), domain[i]);
13        }
14
15        return jsonObject;
16    }
这样整个功能完成

页面效果如下：

总结：
JSON比XML在ajax方面一些优势：
1、易于解读，易于编写，与java中Map集合类似，更易于被开发人员接受
2、节省解析过程，不用象xml需要用JDom等方式解析xml

ajax入门 ajax使用方式1-ajax基础
 ajax入门 ajax使用方式3-ajax基础

javascript中常见的location和URL变量

阿超 — Sun, 18 Apr 2010 02:42:05 +0000

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

240多个jQuey插件-jquery插件-javascript学习

阿超 — Sat, 17 Apr 2010 00:40:55 +0000

“jQuery 是继 prototype 之后又一个优秀的 Javascrīpt 框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ，这是其它的 js 库所不及的，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆js来调用命令了，只需定义 id 即可。 ”

提供了 240 多个jQuey的插件，实在是太多了！如下：

表单验证(Form Validation)

jQuery Validation.
Auto Help.
Simple jQuery form validation.
jQuery XAV – form validations.
jQuery AlphaNumeric.
Masked Input.
TypeWatch Plugin.
Text limiter for form fields.
Ajax Username Check with jQuery.

JavaSript的RIA客户端数据处理

阿超 — Thu, 15 Apr 2010 18:40:05 +0000

一、引子
这个blog已经荒废将近一年了，久也不写，自然有很多的理由，但更多的怕是懒吧。不说闲话了，转入正题。

关于基于JavaScript的RIA客户端数据处理这个话题，我打算分成两篇文章来写，一篇陈述我所总结出的基于B/S结构的RIA客户端数据处理的问题，另一篇则陈述针对这些问题我所提出的技术解决方案构架。

二、RIA？RIA！

关于RIA尤其是基于Ajax的RIA怕是屡见不鲜了吧？尤其是在Google推手之后，文字处理、表格处理、幻灯片放映这种看起来非常客户端的应用，都可以采用Ajax的技术来实现了。作为一个关注企业级应用开发的技术人员，一个很自然的想法就会产生，是否可以采用这种技术来改进我们基于Java EE技术开发的B/S结构的企业应用呢？

先说有没有必要，答案是肯定的。B/S被广为诟病的一个问题就是降低了最终用户的操作效率，以我的经验来说，用户虽然普遍的感到基于浏览器的界面要漂亮得多，用鼠标操作也很直观，但是却实在比以前的界面复杂而且操作困难。而且每次页面提交后的等待也实在是对工作效率的一个降低。当然，我这里也没有必要意义列举B/S在客户端的缺点，实际上这个问题是被广泛认同的。

再说可行性，可行性分为两种：技术上的可行性以及工程开发上的可行性。

技术上的可行性就无须验证了，Google Reader、Gmail、Google Docs的稳定运行都是非常好的证明。

但是它是否一定适合时间要求相对比较严格的工程开发呢？

这就需要一个非常稳定的平台来进行支持，而且由于工程开发的特殊性，最好还要有可视化的开发和调试环境才更有说服力。目前看来是没有非常完善的，但是很多的Ajax框架，如Ext、GWT、Tibco GI以及服务端框架Struts2、JSF等，都在以自己的方式实现着。关于这个方面的探讨我打算放到下一个系列《基于MDA的企业应用RIA解决方案》里面讨论，不在这里多费口舌了。

技术上是可行的，而如果又一个非常稳定和成熟的平台支持的话，在工程开发上也是可行的，那么这个平台怎样才算是稳定和成熟的呢？本系列讨论的就是其中的一部分，客户端的数据处理。

三、定义、缩略语
下面是本文中使用的技术名词的定义以及缩略语简介。

Ajax：又写为AJAX，是”Asynchronous JavaScript and XML”的缩写。是一种使用浏览器技术进行RIA开发的技术
3.

ECMA Script：由European Computer Manufacturers Association（欧洲计算机制造商协会）维护的一个脚本语言标准。当前最通行的版本是ECMA-262 Edition 3，通常也被称为JavaScript 1.5
4.

dojo：由dojo foundation管理的一个开源JavaScript框架。提供了很好的JavaScript扩展，目前被IBM和Sun等大公司支持和使用
5.

Json： JavaScript Object Notation的缩写。它是一种纯文本的数据对象传输协议，在Ajax的应用中被广泛采用
6.

CRUD：Create（创建）、Retrieve（获取）、Update（更新）和Delete（删除）这四种简单的数据操作的缩写
7.

Form：本文中的Form指的是经过Ajax扩展的简单的HTML电子表单。表单内部可以拥有很多如ComboBox、TextBox等构件。一般来说，一个表单对应着一个业务的数据对象
8.

Tree：树形显示结构化数据的构件，由于数据是高度结构化的，往往可以采用懒加载等技术来提高性能
9.

Grid：以表格形式显示和编辑数据的UI构件。一般分为表头（标题栏）、表身（数据列表）和表尾（合计、状态显示等）三个部分。其中，表头可以是复合的表头，而表身可以是复合的格式（Tree、Grid、ComboBox、CheckBox等）。一个Grid可以有一个复杂的Grid定义
10.

Enhanced Grid：下面简称为EGrid，是Grid的扩展。在Grid的功能基础之上提供了数据获取和数据持久化的能力，可以大大的减少开发应用的时间（Ext中的Grid可以认为是一个简化了的EGrid）
11.

CodeList：代码表，一般用在下拉列表数据处，在系统的实现中，由于性能以及标准的要求，下拉列表一般都是采用代码保存数据，但是用户在填写表单的时候需要看到正常的文字而不是代码，这就需要系统通过CodeList进行文字和代码的转换
12.

LRU：Least Recent Used的缩写，是一种简单的缓存策略，如果缓存已满，那么就释放最近最少使用的那个缓存数据
13.

REST：是REpresentational State Transfer的缩写，是一种基于轻量级WebService协议

四、客户端数据处理的技术场景
在本部分里将会针对下面六个分类对客户端数据处理的技术场景进行概述

数据绑定（Data Binding）
*

数据变更追踪（Data Change Tracking）
*

数据访问（Data Access）
*

数据缓存（Data Caching）
*

数据查询（Data Query）
*

数据处理（Data Processing）

4.1 数据绑定（Data Binding）

概念：

以非常简单的声明方式实现Form、Grid这种数据填写、修改构件与数据之间的对应关系。

场景：

Form绑定：把一个Form与一个数据对象通过声明的方式绑定，使得Form的修改直接可以体现在数据对象中，而数据对象的修改也可以马上由Form体现出来
*

Grid绑定：把一个Grid和一个数据对象集合通过声明或者设置数据源的方式绑定，使得在Grid上的写操作都可以体现在数据对象集合中，而数据对象集合的操作也可以马上由Grid构件体现出来
*

Tree绑定：由于Tree的特殊性，与其说Tree与一个数据对象集合绑定，不如说Tree使用了一个可以根据查询提供数据的数据来源更合适。当然，由于Tree有可能被可视化的修改（如组织机构管理），所以这个数据来源必须支持对数据的写操作
*

其它：如菜单的绑定等，相对于上述三个都属于非常用的绑定，而且如果上述绑定能够实现，那么其他的绑定也可以采用同样的技术实现

4.2 数据变更追踪（Data Change Tracking）

概念：

对数据的整个生命周期进行追踪。主要的目的就是可以通过记录看出数据做了哪些改变，然后根据这些改变做出相应的处理，其使用场景有Grid的变更提示、Form修改的追踪等。

场景：

Grid变更提示：在Grid中以明显的方式提示用户做了哪些修改
*

数据集合变更追踪：根据变更的效果，可以有选择的发送合适的数据给服务端进行处理
*

Form修改的追踪：为用户在提交Form时提示用户哪些重要的字段进行了修改提供支持

4.3 数据访问（Data Access）

概念：

服务端与客户端数据传输的格式未必相同，而且数据对象属性的类型等信息也需要一些Meta Data API来进行支持。所以，抽象出一个抽象的拥有Meta Data的数据访问层是有意义的。

场景：

数据对象元数据信息访问：可以通过这些元数据信息了解数据对象的各个属性以及对应的数据类型（这一点对于Json格式的数据传输尤其重要，因为Json规范里面没有DateTime类型）
*

数据写操作的统一事件定义：通过Data Access API来访问数据，所有的写操作都会有统一的事件定义，在JavaScript 1.5中，普通的JavaScript对象是做不到的
*

统一的数据读取方式：不管数据是XML格式的还是Json格式的，访问数据的方式都是统一的

4.4 数据缓存（Data Caching）

概念：

数据缓存是指把获得的数据以一定的策略缓存起来，以备使用的技术。Cache是客户端数据处理中涉及到功能和性能的重要部分，原因请见下面的场景

场景：

离线运行的CodeList：系统如果需要离线运行，那么CodeList肯定需要客户端缓存
*

离线表单填写：如果允许用户离线填写表单，那么需要采用客户端缓存策略保存用户的数据
*

性能考虑：向服务端发请求，服务端查询并返回属于非常耗费资源和时间的操作，所以对于服务端的数据，客户端应该有一定的缓存以及同步策略

4.5 数据查询（Data Query）

概念：

数据查询的概念非常简单，根据用户的查询条件向服务端发送查询请求，得到服务端返回的数据对象集合。

但由于数据查询是系统中最常用的功能，所以，数据查询需要非常强大的功能。简单列举如下。

场景：

样本查询：给出一个样本，比如{age : 20, gender : ’male’}，返回所有符合样本的结果
*

模糊查询：用户可以提供非明确的查询参数（如李？？，查询所有姓李的，名字为三个字的人），返回结果供用户进一步的筛选
*

Range查询：根据Start Index和Count返回整个大数据集中的一部分，一般用在分页查询处理方面，当然也可以用在其他的需要整个数据集的一部分的地方
*

逻辑查询：采用逻辑操作对数据进行过滤查询，比如（employee中所有满足age < 40 && age >30 && gender = ‘male’ && married条件的员工——年龄大于30且小于40的已婚男员工），实际上上面所说的查询都可以以某种方式归为逻辑查询的一种，之所以明确的提出来，是因为查询的语法有可能有所不同，并且有些构件或者服务会对某些查询有特别的需求或者加强的支持以简化开发的难度，提高开发的效率
*

自定义查询：根据用户的需要可以对上面的查询进行有机地结合

4.6 数据处理（Data Processing）

概念：

在数据查询、显示、修改和持久化的过程中，用户有可能还需要做一些监控，以及一些自定义的操作，如过滤、排序等。这就需要一套数据处理的事件以及数据处理的方法。这些统一归到数据处理用例中。列举如下。

场景：

数据处理事件：数据的查询以及持久化过程中的事件
*

数据过滤：通过数据过滤（查询前、查询后）可以满足权限控制等功能的要求
*

排序：可以对数据进行自定义的排序（查询、查询结果

五、小结
客户端的数据处理能力是客户端最主要的基础能力，它直接影响到了应用服务器的负荷以及用户UI响应的速度和效率。所以，客户端的数据处理支持是一个RIA 平台非常重要的考核点。可以上面的六类场景去考核各种RIA平台，同时，它们也为我提出我的RIA客户端数据处理解决方案提供了基础的用例。

JavaSript的RIA客户端数据处理下

VisualStudio在IE下调试javascript

阿超 — Thu, 15 Apr 2010 01:39:17 +0000

之前一直用Firefox的plug-in firebug来debug javascript。
可现在公司的老项目不支持firefox下运行。只能跑在老IE下。

前天接到任务要调式一个js文件。熟悉调试工具后突然没工具的日子难过。。
只能一句一句地alert(‘hi); alert(变量名)

今天同事推荐用VS 2003，装了后在
Microsoft Development Enviroment的工具->调试进程->选择你要调试的IE窗口。
可以debug javascript!

爽了一回，回到可以调试的状态了。javascript i am back, 呵呵。

EasyJWeb+Ext编写的Ajax源代码

阿超 — Tue, 13 Apr 2010 01:36:17 +0000

EasyJWeb的Ajax综合示例应用于1月10号上线，这是团队2008年第一次源代码发布。该示例包括ExtJS集成、远程脚本调、Ajax表单提交等多种实例，基于EJS构架开发，持久层使用JPA及泛型DAO、业务逻辑层使用Spring2 进行Bean的管理，表示层使用EasyJWeb的MVC及ExtJS等实现，示例演示了一般应用开发中的几种Ajax应用方式，欢迎大家下载交流。

Ajax综合示例在线演示：http://easyjweb.demo.easyjf.com/ajax2/
Ajax综合示例War包及源码：ftp://ftp1.easyjf.com/easyjweb/demo/ajax2.war (13M)
Ajax综合示例的源码：ftp://ftp1.easyjf.com/easyjweb/demo/ajax2-src.zip (665K)

代码摘要：

Ext.BLANK_IMAGE_URL = ’plugins/extjs/ext-2.0/resources/images/default/s.gif’;
Ext.onReady(function()…{
var tree = new Ext.tree.TreePanel(…{
el:”tree-div”,
autoScroll:true,
animate:true,
width:’100px’,
height:’300px’,
enableDD:true,
containerScroll: true,
loader: new Ext.tree.TreeLoader(…{
dataUrl:’region.ejf?cmd=getRegion’
})
});
tree.on(“click”,function(node,event)…{alert(node.id);});
tree.on(‘beforeload’,function(node)…{
tree.loader.dataUrl = ’region.ejf?cmd=getRegion&id=’+(node.id!=’root’?node.id:”");
});
var root = new Ext.tree.AsyncTreeNode(…{
text: ’地区信息’,
draggable:false,
id:’root’
});
tree.setRootNode(root);
tree.render();
root.expand();
});
示例截图：

(基于ExtJS的客户档案管理)

(一个异步加载的树)

(传统Ajax的客户档案管理)

(产品编辑)

IE中测试JavaScript

阿超 — Mon, 12 Apr 2010 22:37:08 +0000

做过Web开发的朋友对JavaScript脚本既爱又恨．恨的是没有比较好的IDE支持，同时调试JavaScript更是一个头痛的事情，alert（）句子满天飞，效率极为低下．但随着自由微软Visual Studio 2008的发布，调试及编译JavaScript有了一个质的飞越。

如果利用微软的ScriptEditor来进行调试，那JavaScript就变得很简单了。各种参数及其值一目了然。Microsoft Script Debugger可以通过安装Visual Studio 2008获得，但那东西很大，除非是进行.NET的开发，哈哈。比较可行的办法是下载其一个简体版本。下载地址

http://www.microsoft.com/downloads/details.aspx?familyid=2F465BE0-94FD-4569-B3C4-DFFDF19CCD99&displaylang=en

当然在IE6本身中也可以进行调试，但不是特别方便。

Extjs Tree + JSON + Struts2完整演绎

阿超 — Sun, 11 Apr 2010 02:32:51 +0000

最近尝试用extjs来展示树状菜单。着实花了一番功夫。树状菜单的菜单项需要动态加载，而目前版本的extjs中只支持JSON格式的数据。查了一些资料，决定使用struts2的json-plugin。首先按照例子做了一个，但是结果就是不成功，界面上只出来了一个js中生成的root节点，不能加载从后台生成的数据。研究后发现是数据格式有问题。使用json-plugin生成的数据格式如下：
{“cls”:”folder”,”id”:10,”leaf”:false,”children”:[{"cls":"file","id":11,"leaf":true,"children":null,"text":"S600"},{"cls":"file","id":12,"leaf":true,"children":null,"text":"SLK200"}],”text”:”Benz”}
而extjs需要的数据格式如下：
[{"cls":"folder","id":10,"leaf":false,"children":[{"cls":"file","id":11,"leaf":true,"children":null,"text":"S600"},{"cls":"file","id":12,"leaf":true,"children":null,"text":"SLK200"}],”text”:”Benz”}]
区别很小，就只相差最外面的两个方括号。但是少了这两个方括号，在json中，含义迥然不同，前者表示一个对象，而后者表示一个数组。而extjs中 tree的dataloader需要的数据必须是一个数组。而这样的数据格式是json-plugin自动生成的，无法改变。所以，我最后放弃了json -plugin，转而使用json-lib来解决这个问题。
1. 下载json-lib, http://json-lib.sourceforge.net/
2. lib目录下的jar文件清单：
commons-beanutils-1.7.0.jar
commons-collections-3.2.jar
commons-digester-1.6.jar
commons-lang-2.3.jar
commons-logging-1.1.jar
dom4j-1.6.1.jar
ezmorph-1.0.4.jar
freemarker-2.3.8.jar
json-lib-2.2.1-jdk15.jar
log4j-1.2.13.jar
ognl-2.6.11.jar
struts2-core-2.0.11.jar
xml-apis-1.0.b2.jar
xwork-2.0.4.jar

首先配置web.xml

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

index.jsp

struts2
org.apache.struts2.dispatcher.FilterDispatcher

struts2
/*

然后是struts.xml

“-//Apache Software Foundation//DTD Struts Configuration 2.0//EN”
“http://struts.apache.org/dtds/struts-2.0.dtd“>

/menu.jsp

3. 树的节点模型（省略了getter，setter)
public class Menu {
private int id;
private String text;
private boolean leaf;
private String cls;
private List

children;
}

4. action
package com.lab;

import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONArray;

public class MenuAction {
private String menuString;

private List

menus;

public String execute() {

menus = new ArrayList

();

Menu benz = new Menu();
benz.setText(“Benz”);
benz.setCls(“folder”);
benz.setLeaf(false);
benz.setId(10);
menus.add(benz);

List

benzList = new ArrayList();
benz.setChildren(benzList);

Menu menu;
menu = new Menu();
menu.setText(“S600″);
menu.setCls(“file”);
menu.setLeaf(true);
menu.setId(11);
benzList.add(menu);
menu = new Menu();
menu.setText(“SLK200″);
menu.setCls(“file”);
menu.setLeaf(true);
menu.setId(12);
benzList.add(menu);

Menu bmw = new Menu();
bmw.setText(“BMW”);
bmw.setCls(“folder”);
bmw.setLeaf(false);
bmw.setId(20);
menus.add(bmw);

List

bmwList = new ArrayList();
bmw.setChildren(bmwList);

menu = new Menu();
menu.setText(“325i”);
menu.setCls(“file”);
menu.setLeaf(true);
menu.setId(21);
bmwList.add(menu);

menu = new Menu();
menu.setText(“X5″);
menu.setCls(“file”);
menu.setLeaf(true);
menu.setId(22);
bmwList.add(menu);

JSONArray jsonObject = JSONArray.fromObject(menus);
try {
menuString = jsonObject.toString();
} catch (Exception e) {
menuString = ”ss”;
}

return ”success”;
}

public String getMenuString() {
return menuString;
}

public void setMenuString(String menuString) {
this.menuString = menuString;
}
}

5. menu.jsp
<%@ taglib prefix=”s” uri=”/struts-tags” %>

6. html页面和js
我使用的就是extjs的example中的reorder.html和reorder.js，更改了reorder.js中treeloader的dataurl： menus.action

Reorder TreePanel

Drag and Drop ordering in a TreePanel

This example shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and
anything can be dropped anywhere except appending to nodes marked "leaf" (the files).

Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop.

In order to demonstrate drag and drop insertion points, sorting was not enabled.

The data for this tree is asynchronously loaded with a JSON TreeLoader.

The js is not minified so it is readable. See reorder.js.

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

Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;

var tree = new Tree.TreePanel({
el:’tree-div’,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:’http://localhost:8080/lab/menus.action‘
})
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: ’Ext JS’,
draggable:false,
id:’source’
});
tree.setRootNode(root);

// render the tree
tree.render();
root.expand();
});

JSF组件-具有Ajax功能的JSF组件开发下

阿超 — Sat, 10 Apr 2010 02:30:59 +0000

五、登记定制标记

现在要做的全部工作就是创建一个 TLD（标记库描述符）文件，以登记定制标记

WebRoot/WEB-INF/tutorial.tld

http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd“>

http://java.sun.com/JSP/TagLibraryDescriptor“>
1.3
1.2
tut
http://www.tutorial.org/jsf
JSF Tutorial - Ajax

ajaxComponent
com.sterning.jsf.ajax.component.AjaxComponentTag
JSP

The AjaxComponent example.

id
false
false
java.lang.String

The developer-assigned ID of this component. The ID must
be unique within the scope of the tag’s enclosing naming
container (e.g. h:form or f:subview). This value must be
a static value.

binding
false
false
java.lang.String

Identifies a backing bean property (of type UIComponent
or appropriate subclass) to bind to this component
instance. This value must be an EL expression.

rendered
false
false
java.lang.String

A boolean value that indicates whether this component
should be rendered. Default value: true.

一旦定义了 TLD 文件，就可以开始在 JSP 中使用标记了。

WebRoot/webpages/index.jsp

<%@ page language=”java” pageEncoding=”GB2312″%>
<%@ taglib uri=”http://java.sun.com/jsf/html“ prefix=”h” %>
<%@ taglib uri=”http://java.sun.com/jsf/core“ prefix=”f” %>

<%@ taglib uri=”http://www.tutorial.org/jsf“ prefix=”tut” %>

<%–
<%@ taglib uri=”http://myfaces.apache.org/tomahawk“ prefix=”t” %>
–%>

’>
/javascript/utils.js’>
/javascript/dojo.js’>

顺便，WebRoot/index.html的内容如下：

另外，还有两个js文件，分别是Utils.js和dojo.js。分别位于WebRoot/javascript目录下，请查看源代码。

六、配置文件

WebRoot/WEB-INF/Web.xml文件的配置如下：

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

* Created: Oct, 2007

* Title: JSF Ajax Component

–>

Faces Servlet
javax.faces.webapp.FacesServlet
1

Faces Servlet
*.jsf

WebRoot/WEB-INF/faces-config.xml的代码如下：

http://java.sun.com/dtd/web-facesconfig_1_1.dtd“>

com.sterning.jsf.ajax.component.AjaxComponent
com.sterning.jsf.ajax.component.AjaxComponent

com.sterning.jsf.ajax.component.AjaxComponent
com.sterning.jsf.ajax.component.AjaxComponentRenderer
com.sterning.jsf.ajax.component.AjaxComponentRenderer

com.sterning.jsf.ajax.AjaxListener

其运行效果如下图所示：

java自定义开发具有Ajax功能的JSF组件

自动完成Ajax4Jsf的oncomplete事件-ajax学习

阿超 — Fri, 09 Apr 2010 01:29:14 +0000

笔者在最近的项目中采用的是Jsf(myfaces+richfaces+Ajax4Jsf)+Spring+Hibernate技术，由于数据量大，系统反应时间为1.5~2秒，此时需要有提示的标记比如”正在理…”等。Ajax4Jsf中的”onsubmit”为提交表单时发生的动作， ”oncomplete”为提交到服务器端处理完返回到客户端时执行的动作，这两者的时间差就是我们等待的时间。我们也就是要在这个时间段内显示标记。对于或等可以用”onclick”"ondblclick”等与”oncomplete”组合灵活应用。以下是简例片段：

1
2
3    function beforeChange(){
4        var obj = document.getElementById(‘myForm:waitingGif’);
5        obj.style.display=’block’;
6    }
7    function afterChange(){
8        var obj = document.getElementById(‘myForm:waitingGif’);
9        obj.style.display=’none’;
10    }
11
12
13
14
15         16            actionListener=”#{myBean.selectItemChange}”
17            reRender=”listGrid” onsubmit=”beforeChange()”
18            oncomplete=”afterChange()” />
19
20
21
22
23
24
25

运行时的显示效果：

其实Ajax4Jsf也有对此效果的支持：
1
页面上运用后所有提交到后台的动作都可以被跟踪标记，但要保证在此动作的刷新区域。

jQuery学习jQuery插件开发

阿超 — Wed, 07 Apr 2010 00:26:32 +0000

jQuery官方文档上推荐开发插件时要按下面格式来写，我第一次看源代码时看到这样的写法，被郁闷了好半天。

(function($) {
// Code goes here
})(jQuery);

下面将记录为什么这样写，这样写具体有哪些好处。

(function($) {
// Code goes here
})
上面定义了一个jQuery函数,形参是$

(function($) {
// Code goes here
})(jQuery);
这个就是调用之前定义的函数,然后把jQuery这个实参传递进去.

这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.

如果不通过上面这种方式定义,而end-use又使用了prototype, 那么就会形成无法调和的矛盾了.

完美的JavaScript拖拽效果代码

阿超 — Wed, 31 Mar 2010 06:18:56 +0000

不得不承认wordpress中用到的dbx的拖拽效果很好
同时不得不承认看dbx的源码真的很头疼

大概介绍如下:
1.dbx具有动态拖拽效果,并且可以按照网格对齐,可以隐藏显示指定列表,对特殊定义的class自动实现拖拽效果方便快捷,对层设置class=dbx-box,dbx-handle就可以了
2.此js文件支持 Opera 7.5 以后版本, Firefox和其他Mozilla浏览器,Safari1.2以上的版本, Konqueror 3.2以上的版本,和开启js的Internet Explorer 6,支持的还是比较多的.经过我的测试,在IE7下也同样支持.
3.每个box的状态和位置是由cookie来记录的,只要状态或者位置发生变化,cookie就会去记录改变,当页面再次请求被访问的时候,通过cookie可以实现上次访问的状态,所以这个js东东可以成功的运用在各种具有私人性质的需要此拖拽功能的网络wen应用程序上,说白了,也就是可以通过javascript的cookie去记录用户拖拽的信息,在用户下次登陆的时候通过读取cookie,来复现上次访问的状态
4.除了以上的说明外,本js脚本还可以成功的更容易的运用到其他的大型复杂的系统中,例如利用dragable元素作为数据输入界面.与远程脚本互动(比如利用xmlhttprequest) ,你也可以将此js脚本作为控制界面拖拽元素的工具来实现几乎任何客户端或服务器端的应用:网站导航,游戏,CMS,论坛管理,服务管理等,可能性是无止境的.这一段大概就自夸本脚本可以实现很多其他扩展

官方网站的地址:

http://www.brothercake.com/site/resources/scripts/dbx

个人感觉不错,推荐下

javascript中split函数使用说明

阿超 — Tue, 30 Mar 2010 06:18:18 +0000

使用javascript中的split函数分割字符串示例：

alert(“c:\www\ccvita.jpg”);
var path=”c:\\www\\ccvita.jpg”;
var arr=path.split(“\\”);
alert(arr);

下面是函数的具体介绍：

split 方法

将一个字符串分割为子字符串，然后将结果作为字符串数组返回。

stringObj.split([separator[, limit]])

参数

stringObj

必选项。要被分解的 String 对象或文字。该对象不会被 split 方法修改。

separator

可选项。字符串或正则表达式 …

VitaEditor比FCKeditor和TinyMce精简的编辑器

阿超 — Mon, 29 Mar 2010 06:17:23 +0000

哈哈
发现我这个标题写的很风骚
继上个基于jquery的UBB编辑器之后
我决定写个可视化的编辑器出来

在没有写可视化编辑器之前，感觉可视化是个很神秘的东西，离我很远的样子
但是当真正开始去写，去读别人的可视化编辑器的时候，比如Discuz的，Sina的，163的，发现可视化编辑器也就这么回事，没有去读FCKeditor和TinyMce的编辑器，越来越觉着老外的想法是可爱的：）

给个最简单的可视化编辑器

window.frames["x"].document.designMode=”On”

上面保存个html文件打开再复制点可视化内容进去，发现了吧
这就是可视化编辑器

写完了发出来做个记录吧，有时候真的是很想说声，你娘

打造最精简的编辑器，冲哇

记录完毕

让FCKeditor和TinyMce去见鬼吧

风骚完毕

PS:document.execCommand是个好东西，可视化里面的很多东西都是用这个去format的

另外有一点关于加快可视化编辑器运行的想法：
就是不要去用javascript去控制页面的输出
在用户没有点击相应的按钮的时候，不要去用javascript去控制编辑器
实际上FCKeditor和TinyMce就是由于javascript干涉的事情太多，导致浏览器不仅仅需要去下载相应的文件，还要去渲染文本框，时间啊，效率啊就这样浪费了

我的做法就是在用户没有点击的时候，没有javascript触发，需要的仅仅是显示一个table，我期待着我的编辑器出来

再PS:有时候想找个参考真的很费劲
现在是常住MSDN了，比如找这个moveStart方法，还是MSDN的最可靠啊

http://msdn2.microsoft.com/en-us/library/ms536623.aspx

jQuery对象与dom对象的转换

阿超 — Sun, 28 Mar 2010 06:16:19 +0000

jQuery对象与dom对象的转换一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的，开始的时候不理解，现在此案知道，原来jQuery获得的对象并不和我们平时使用getElementById获得的对象是一样的对象。所以一些新手就很迷惑，为什么${“#Element”}不能直接innerHTML，这就是原因所在，解决方式请看下文。

jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。

如：$(document.getElementById(“msg”))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：

$(“#msg”)[0]，$(“div”).eq(1)[0]，$(“div”).get()[1]，$(“td”)[5]

这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：

$(“#msg”).html();
$(“#msg”)[0].innerHTML;
$(“#msg”).eq(0)[0].innerHTML;
$(“#msg”).get(0).innerHTML;

jQuery多附件上传选择框

阿超 — Sat, 27 Mar 2010 06:14:52 +0000

看Discuz!附件上传时候的选择框做的很不错
就拿jQuery练手顺手写了一个
jQuery多附件上传的演示效果就如Discuz!的上传选择框是一样的，不同的只是代码，现在拿出来给大家分享一下。：）

代码如下：
var aid = 1;
var attachexts = new Array();
var attachwh = new Array();

Java豆技术站点 » Web开发

jQuery autocomplete 导致页面光标自动定位到了文本框

【锋利的JQuery】 学习笔记,锋利的JQuery电子书pdf学习笔记

让firefox支持javascript中的innerText

Ajax ext 的event学习-自定义事件与浏览器事件

ajax性能优化 把ajax性能提高10倍

ajax入门 ajax使用方式3-java学习

jquery ajax入门 ajax使用方式1-ajax基础

ajax开发的聊天室源代码

OPENAJAX HUB

jQuery插件开发

什么是ocx控件Javascript调用OCX控件

JavaSript的RIA客户端数据处理 下

jquery水平动画导航条jquery插件

使用js搜索网页表格内容

json介绍 json使用 ajax入门 ajax使用方式

javascript中常见的location和URL变量

240多个jQuey插件-jquery插件-javascript学习

文件上载(File upload)

表单－选取框(Form – Select Box stuff)

表单基本，输入框等(Form Basics, Input Fields, Checkboxes etc.)

时间日期以及颜色选取(Time, Date and Color Picker)

投票(Rating Plugins)

搜索(Search Plugins)

文本编辑(Inline Edit & Editors)

多媒体(Audio, Video, Flash, SVG, etc)

图象类(Photos/Images/Galleries)

Google Map

游戏(Games)

表格(Tables, Grids etc.)

统计图(Charts, Presentation etc.)

边框，圆角，背景(Border, Corners, Background)

文字、链接(Text and Links)

Tooltips

菜单导航(Menus, Navigations)

对齐，幻灯以及折叠(Accordions, Slide and Toggle stuff)

拖拽(Drag and Drop)

XML XSL JSON Feeds

浏览器(Browserstuff)

对话框(Alert, Prompt, Confirm Windows)

CSS

DOM, Ajax and other jQuery plugins

JavaSript的RIA客户端数据处理

VisualStudio在IE下调试javascript

EasyJWeb+Ext编写的Ajax源代码

IE中测试JavaScript

Extjs Tree + JSON + Struts2完整演绎

Drag and Drop ordering in a TreePanel

JSF组件-具有Ajax功能的JSF组件开发 下

自动完成Ajax4Jsf的oncomplete事件-ajax学习

jQuery学习jQuery插件开发

完美的JavaScript拖拽效果代码

javascript中split函数使用说明

VitaEditor比FCKeditor和TinyMce精简的编辑器

jQuery对象与dom对象的转换

jQuery多附件上传选择框

【锋利的JQuery】学习笔记,锋利的JQuery电子书pdf学习笔记

ajax性能优化把ajax性能提高10倍

JavaSript的RIA客户端数据处理下

JSF组件-具有Ajax功能的JSF组件开发下