• 搜狐网站诚聘Java、PHP和C++工程师
• 加入阿里巴巴，发展潜力无限
• Windows7在微软WinHEC 2008上揭开神秘面纱

• 对象创建方式之JSON

（JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。）

 （参考文献http://www.json.org/json-zh.html）

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

var person = {};//一个空对象
var person = {name:"clei",age:22};//开始有属性了
var person = {name:"clei",age:22,say:function(){alert("I can say ,I am " + this.name)}};//我可以说话了

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

var person = {name:["one","two","three"],age:22};//俺现在有三个名字了

 个人认为这是Javascript里非常经典的对象定义方式，Javascript中多么复杂的对象用它来描述都是如此的简洁。

• 对象创建之函数加new

 这是一个只有属性的函数

function person(name,age){
	this.name = name;
	this.age = age;
}

 我们可以给它加上行为

function person(name,age){
	this.name = name;
	this.age = age;
	this.say = function(){
		alert("I can say, I am " + this.name);
	}
}

开始new 对象吧

var clei = new person("clei",22);//已经new了一个对象

 事实上以上函数我们习惯称之为构造函数，事实上它也的确起到构造函数的作用。通过它构造的每个person对象都将

具有各自的属性跟方法。

打印：

var clei = new person("clei",22);
var huanhuan = new person("huanhuan",21);
alert(clei.say== huanhuan.say);//输出false

开始更新构造函数：

function say(){
	alert("I can say, I am " + this.name);
}
function person(name,age){
	this.name = name;
	this.age = age;
	this.say = say;
}
var clei = new person("clei",22);
var huanhuan = new person("huanhuan",21);
alert(clei.say== huanhuan.say);//输出：true

这个时候他们开始共用一个say方法。

更优雅的构造方式

function person(name,age){
	this.name = name;
	this.age = age;
}
person.prototype.say = function(){
	alert("I can say, I am " + this.name);
}
var clei = new person("clei",22);
var huanhuan = new person("huanhuan",21);
alert(clei.say== huanhuan.say);//输出：true

整个Javascript对象的创建暂告段落。睡吧。

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师
• 加入阿里巴巴，发展潜力无限

prototype v1.5
>>> $Harbour.importJS("/javascripts/org/prototype/v1_5/prototype.js")
>>> $Harbour.check()
" 相对上一个版本window［bodyload］，新增加的成员有26个包括:
ObjectRange,Position,$F,Field,Form,$$,Selector,Insertion,Toggle,_nativeExtensions,$,
Ajax,$R,$H,Hash,$w,$A,Enumerable,$continue,$break,Template,PeriodicalExecuter,Try,
Abstract,Class,Prototype
相对上一个版本window［bodyload］，被修改的成员有0个包括:

相对上一个版本String［bodyload］，新增加的成员有19个包括: gsub,scan,truncate,strip,stripTags,stripScripts,extractScripts,evalScripts,escapeHTML,
unescapeHTML,toQueryParams,toArray,succ,camelize,capitalize,underscore,dasherize,
inspect,parseQuery

相对上一个版本Array［bodyload］，新增加的成员有36个包括: each,eachSlice,all,any,collect,detect,findAll,grep,include,inGroupsOf,inject,invoke,
max,min,partition,pluck,reject,sortBy,toArray,zip,size,inspect,find,select,member,
entries,_reverse,_each,clear,first,last,compact,flatten,without,uniq,clone

相对上一个版本Number［bodyload］，新增加的成员有3个包括: toColorPart,succ,times
相对上一个版本Function［bodyload］，新增加的成员有2个包括: bind,bindAsEventListener
相对上一个版本document［bodyload］，被修改的成员有2个包括: implementation,getElementsByClassName"

相对上一个版本Element［bodyload］，新增加的成员有 50个包括: extend,Methods,_attributeTranslations,visible,toggle,hide,show,remove,update,replace,inspect,recursivelyCollect,

ancestors,descendants,immediateDescendants,previousSiblings,nextSiblings,siblings,match,up,down,previous,next,

getElementsBySelector,getElementsByClassName,readAttribute,getHeight,getWidth,classNames,hasClassName,

addClassName,removeClassName,toggleClassName,observe,stopObserving,cleanWhitespace,empty,descendantOf,

scrollTo,getStyle,setStyle,getDimensions,makePositioned,undoPositioned,makeClipping,undoClipping,childOf,

Simulated,addMethods,ClassNames

相对上一个版本Event［bodyload］，新增加的成员有24个包括: KEY_BACKSPACE,KEY_TAB,KEY_RETURN,KEY_ESC,KEY_LEFT,KEY_UP,KEY_RIGHT,KEY_DOWN,KEY_DELETE,

KEY_HOME,KEY_END,KEY_PAGEUP,KEY_PAGEDOWN,element,isLeftClick,pointerX,pointerY,stop,findElement,

observers,_observeAndCache,unloadCache,observe,stopObserving "

jquery v1.1.2
>>> $Harbour.importJS("/javascripts/org/jquery/v1_1_2/jquery.js")
>>> $Harbour.check()
"相对上一个版本window［bodyload］，新增加的成员有4个包括:
$events,undefined,$,jQuery
相对上一个版本window［bodyload］，被修改的成员有1个包括: onload

mootools v1.2
"相对上一个版本window［bodyload］，新增加的成员有66个包括: getLeft,getTop,getScrollWidth,getScrollHeight,getScrollLeft,getScrollTop,getWidth,
getHeight,getCoordinates,getPosition,getScrollSize,getScroll,getSize,cloneEvents,
fireEvent,removeEvents,addEvents,removeEvent,addEvent,eliminate,store,retrieve,
removeListener,addListener,getWindow,getDocument,$$,$,$family,uid,Request,Fx,Swiff,Cookie,JSON,Selectors,Elements,IFrame,Options,Events,
Chain,Class,$uid,$exec,Browser,$each,$A,$H,Hash,$type,$try,$time,$splat,$random,
$pick,$merge,$unlink,$extend,$lambda,$arguments,$empty,$defined,$clear,$chk,Native,
MooTools,
相对上一个版本String［bodyload］，新增加的成员有16个包括: $family,test,contains,trim,clean,camelCase,hyphenate,capitalize,escapeRegExp,toInt,
toFloat,hexToRgb,rgbToHex,stripScripts,substitute,toJSON
相对上一个版本Array［bodyload］，新增加的成员有17个包括: $family,each,clean,associate,link,contains,extend,getLast,getRandom,include,combine,
erase,empty,flatten,hexToRgb,rgbToHex,toJSON 相对上一个版本Date［bodyload］，
相对上一个版本Number［bodyload］，新增加的成员有24个包括: $family,limit,round,times,toFloat,toInt,each,abs,acos,asin,atan,atan2,ceil,cos,exp,
floor,log,max,min,pow,sin,sqrt,tan,toJSON
相对上一个版本Function［bodyload］，新增加的成员有10个包括:
$family,extend,create,pass,attempt,bind,bindWithEvent,delay,periodical,run
相对上一个版本Element［bodyload］，新增加的成员有95个包括: $family,getElement,getElements,injectBefore,grabBefore,injectAfter,grabAfter,injectBottom,
grabBottom,injectTop,grabTop,injectInside,grabInside,getDocument,getWindow,getElementById,
set,get,erase,match,inject,wraps,grab,appendText,adopt,dispose,clone,replaces,hasClass,
addClass,removeClass,toggleClass,getComputedStyle,empty,destroy,getSelected,toQueryString,
getProperty,getProperties,setProperty,setProperties,removeProperty,removeProperties,
getPrevious,getAllPrevious,getNext,getAllNext,getFirst,getLast,getParent,getParents,
getChildren,hasChild,addListener,removeListener,retrieve,store,eliminate,addEvent,
removeEvent,addEvents,removeEvents,fireEvent,cloneEvents,setOpacity,getOpacity,setStyle,
getStyle,setStyles,getStyles,scrollTo,getSize,getScrollSize,getScroll,getScrolls,
getOffsetParent,getOffsets,getPosition,getCoordinates,computePosition,position,getHeight,
getWidth,getScrollTop,getScrollLeft,getScrollHeight,getScrollWidth,getTop,getLeft,tween,
fade,highlight,morph,send,load
相对上一个版本document［bodyload］，新增加的成员有36个包括:
uid,head,html,window,$family,newElement,newTextNode,getDocument,getWindow,purge,getElement,getElements,
addListener,removeListener,retrieve,store,eliminate,addEvent,removeEvent,addEvents,removeEvents,
fireEvent,cloneEvents,getSize,getScroll,getScrollSize,getPosition,getCoordinates,getHeight,getWidth,
getScrollTop,getScrollLeft,getScrollHeight,getScrollWidth,getTop,getLeft "

• 搜狐网站诚聘Java、PHP和C++工程师
• 加入阿里巴巴，发展潜力无限
• Windows7在微软WinHEC 2008上揭开神秘面纱

找了几个javascript的框架，都没有找到我想要的：
提供函数，把某个表单的所有域封装成json数据格式的对象，唯有自己实现一个。

包括对象中有集合属性、对象中引用其他对象属性： 

/**
**json对象数据设置到表单域中
*/
function jsonObjectToForm(form, jsonObject){
	for(i = 0, max = form.elements.length; i < max; i++) {
		e = form.elements[i];
		eName = e.name;
		if(eName.indexOf('.') > 0){
			dotIndex = eName.indexOf('.');
			parentName = eName.substring(0, dotIndex);
			childName = eName.substring(dotIndex+1);
			//迭代判断eName，组装成json数据结构
			eValue = iterValueFromJsonObject(jsonObject, parentName, childName);
		}else{
			eValue = jsonObject[eName];
		}
		if(eValue && eValue != "undefined" && eValue != "null"){
			switch(e.type){
				case 'checkbox': 
				case 'radio': 
					if(e.value == eValue){
						e.checked = true;
					}
					break;
				case 'hidden': 
				case 'password': 
				case 'textarea':
				case 'text': 
					e.value = eValue;
					break;
				case 'select-one':
				case 'select-multiple':
					for(j = 0; j < e.options.length; j++){
						op = e.options[j];
						//alert("eName : " + eName + "; op value : " + op.value + "; eValue : " + eValue);
						if(op.value == eValue){
							op.selected = true;
						}
					}
					break;
				case 'button': 
				case 'file': 
				case 'image': 
				case 'reset': 
				case 'submit': 
				default:  
			}
		}
	}
}

/**
* json数组读写有两种方式
* 1: a.bs[0].id
* 2: a["bs"][0]["id"]
* 把表单转换成json数据格式
*/
function formToJsonObject(form){
	var jsonObject = {};
	for(i = 0, max = form.elements.length; i < max; i++) {
		e = form.elements[i];
		em = new Array();
		if(e.type == 'select-multiple'){
			for(j = 0; j < e.options.length; j++){
				op = e.options[j];
				if(op.selected){
					em[em.length] = op.value;
				}
			}
		}
		switch(e.type){
			case 'checkbox': 
			case 'radio': 
				if (!e.checked) { break; } 
			case 'hidden': 
			case 'password': 
			case 'select-one':
			case 'select-multiple':
			case 'textarea':
			case 'text': 
				eName = e.name;
				if(e.type == 'select-multiple'){
					eValue = em;
				}else{
					eValue = e.value.replace(new RegExp('(["\\\\])', 'g'), '\\$1');
				}
				//判断是否是对象类型数据
				if(eName.indexOf('.') > 0){
					dotIndex = eName.indexOf('.');
					parentName = eName.substring(0, dotIndex);
					childName = eName.substring(dotIndex+1);
					//迭代判断eName，组装成json数据结构
					iterJsonObject(jsonObject, parentName, childName, eValue);
				}else{
					jsonObject[eName] = eValue;
				}
				break; 
			case 'button': 
			case 'file': 
			case 'image': 
			case 'reset': 
			case 'submit': 
			default:  
		}
	}
	return jsonObject;
}

/**
* 把表单元素迭代转换成json数据
*/
function iterJsonObject(jsonObject, parentName, childName, eValue){
	//pArrayIndex用于判断元素是否是数组标示
	pArrayIndex = parentName.indexOf('[');
	//判断是否集合数据，不是则只是对象属性
	if(pArrayIndex < 0){
		var child = jsonObject[parentName];
		if(!child){
			jsonObject[parentName] = {};
		}
		dotIndex = childName.indexOf('.');
		if(dotIndex > 0){
			iterJsonObject(jsonObject[parentName], childName.substring(0, dotIndex), childName.substring(dotIndex+1), eValue);
		}else{
			jsonObject[parentName][childName] = eValue;
		}
	}else{
		pArray = jsonObject[parentName.substring(0, pArrayIndex)];
		//若不存在js数组，则初始化一个数组类型
		if(!pArray){
			jsonObject[parentName.substring(0, pArrayIndex)] = new Array();
		}
		//取得集合下标，并判断对应下标是否存在js对象
		arrayIndex = parentName.substring(pArrayIndex+1, parentName.length-1);
		var c = jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex];
		if(!c){
			jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex] = {};
		}
		dotIndex = childName.indexOf('.');
		if(dotIndex > 0){
			iterJsonObject(jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex], childName.substring(0, dotIndex), childName.substring(dotIndex+1), eValue);
		}else{
			jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex][childName] = eValue;
		}
	}
}

/**
* 迭代json数据对象设置到表单域中
*/
function iterValueFromJsonObject(jsonObject, parentName, childName){
	//pArrayIndex用于判断元素是否是数组标示
	pArrayIndex = parentName.indexOf('[');
	//判断是否集合数据，不是则只是对象属性
	if(pArrayIndex < 0){
		dotIndex = childName.indexOf('.');
		if(dotIndex > 0){
			return iterValueFromJsonObject(jsonObject[parentName], childName.substring(0, dotIndex), childName.substring(dotIndex+1));
		}else{
			return jsonObject[parentName][childName]
		}
	}else{
		pArray = jsonObject[parentName.substring(0, pArrayIndex)];
		//取得集合下标，并判断对应下标是否存在js对象
		arrayIndex = parentName.substring(pArrayIndex+1, parentName.length-1);
		var c = jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex];
		dotIndex = childName.indexOf('.');
		if(dotIndex > 0){
			return iterValueFromJsonObject(jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex], childName.substring(0, dotIndex), childName.substring(dotIndex+1));
		}else{
			return jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex][childName]
		}
	}
}

欢迎大家讨论，最近在研究jsp页面纯净，只与js有关，但这将导致rich client

so bad  不知道有什么好的建议没 

• 加入阿里巴巴，发展潜力无限
• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师

1:

请先参阅--DWR中文文档 v0.9 -- For Dwr 2.0--这是最新版的DWR中文教程，在百度一下载吧

DWR相关.jar包和.js文件下载地址: http://directwebremoting.org/dwr/download 找到

Download	Version 2.0.5	Size
JAR File:	dwr.jar(下载)	(490Kb)
WAR File:	dwr.war	(2.14Mb)
Sources:	dwr-2.0.5-src.zip (下载)	(20.77Mb)

2:

将dwr.jar放到: 你的工程/WEB-INF/lib/下

用解压缩软件打开-src.zip文件，进入目录:\/java\org\directwebremoting，找到engine.js和util.js并将其解压出来，在 你的工程/WebRoot/ 下新建文件夹 dwr\interface，将engine.js和util.js放在dwr\下

以下两步为必要的准备工作，如果你要在html中测试dwr的话

3:

打开WEB-INF\web.xml，修改为如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
 xmlns="http://java.sun.com/xml/ns/j2ee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
 http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
  <init-param>
   <param-name>debug</param-name>
   <param-value>true</param-value>
  </init-param>
</servlet>
<servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>

其中黑体加粗部分为DWR2.x版的DwrServlet位置，如果用DWR1.x,应改为:<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>，开发者应该参考dwr.jar文件中的实际位置写

4:

写一个简单的类文件：

package collon;

public class Service {
 public String sayHello(String yourName){
  return "Welcome :" + yourName;
 }
}

5:

在WEB-INF\下新建dwr.xml，内容为下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
 <allow>
  <create creator="new" javascript="service">
   <param name="class" value="collon.Service"/>
   <include method="sayHello"/>
  </create>
 </allow>
</dwr>

注意黑体加粗字，是dwr2.0的标准DTD文档声明，其中，javascript="service"为要生成的，可远程调用的，javascript方法名

6：

启动tomcat服务器吧

7：

打开网页，输入http://localhost:8080/你的工程/dwr   按回车，测试吧，会有如下输出:

Classes known to DWR:

• service (collon.Service)

点service，会进入如下页面：

Methods For: service (collon.Service)

To use this class in your javascript you will need the following script includes:

  <script type='text/javascript' src='/firstDwr/dwr/interface/service.js'></script>
  <script type='text/javascript' src='/firstDwr/dwr/engine.js'></script>

In addition there is an optional utility script:

  <script type='text/javascript' src='/firstDwr/dwr/util.js'></script>

Replies from DWR are shown with a yellow background if they are simple or in an alert box otherwise.
The inputs are evaluated as Javascript so strings must be quoted before execution.

There are 10 declared methods:

• sayHello( ); (在双引号中输入字符串，可以测试了)...............

8：

点击 '/firstDwr/dwr/interface/service.js' 将其保荐到 \WebRoot\dwr\interface 下

9：

新建html页面，代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My Dwr Testing</title>
    <script type='text/javascript' src='/你的工程/dwr/interface/service.js'></script>
    <script type='text/javascript' src='/你的工程/dwr/engine.js'></script>
    <script type='text/javascript' src='/你的工程/dwr/util.js'></script>
    <script type='text/javascript' src='/你的工程/js/first.js'></script>
  </head>
 
  <body>
    <input type="text" width="100" id="yourName" /><input type="button" value="Click Me" onclick="demo();" /><br />
    <div id="result"></div>
  </body>
</html>

注：请注意各.js文件的位置要准确无误

10:

建立/你的工程/js/first.js 文件，内容如下:

function demo(){
     service.sayHello($('yourName').value,callback);//注意，service.sayHello是js文件代码，不是Java类Service.sayHello
    }
function callback(msg){
 DWRUtil.setValue("result",msg);
}

11:

输入页面测试吧

12:

请我们看一看DwrServlet生成的.js代码:

// Provide a default path to dwr.engine
if (dwr == null) var dwr = {};
if (dwr.engine == null) dwr.engine = {};
if (DWREngine == null) var DWREngine = dwr.engine;

if (service == null) var service = {};
service._path = '/firstDwr/dwr';
service.sayHello = function(p0, callback) {
  dwr.engine._execute(service._path, 'service', 'sayHello', p0, callback);
}

不知道大家看出点什么没有

好了，就写到就里了，有时间再研究一下 DWR 的 源代码

本实例源码下载：http://www.box.net/shared/ql013z0j7k

Fighting!!

• 加入阿里巴巴，发展潜力无限
• 搜狐网站诚聘Java、PHP和C++工程师
• Windows7在微软WinHEC 2008上揭开神秘面纱

//屏蔽掉浏览器状态栏显示真是链接地址。使用此脚本时候，在页面最后面加载
var URLS;
var url_regex=new RegExp("http://*");
var href_header="http://goto.link";
var href_footer=".html";

function forbidSeeRealLinks(){
var olinks=document.links;
URLS=new Array(olinks.length);
for(var i=0;i<olinks.length;i++){
  var link=olinks[i];
  if(validateURL(link.href)&&(link.onclick==null)&&(link.target.length<1)){
    URLS[i]=link.href;
   link.href=href_header+i+href_footer;
     link.onclick=function(){return gotolink(this);};
   }
  }
}

function validateURL(link){
  return url_regex.test(link);
}

function gotolink(A){
   var link=A.href;
   var i=link.replace(href_header,"").replace(href_footer,"").replace("/","");
   window.location.replace(URLS[i]);
   return false;
}

forbidSeeRealLinks();

• 搜狐网站诚聘Java、PHP和C++工程师
• Windows7在微软WinHEC 2008上揭开神秘面纱
• 加入阿里巴巴，发展潜力无限

• 搜狐网站诚聘Java、PHP和C++工程师
• 加入阿里巴巴，发展潜力无限
• Windows7在微软WinHEC 2008上揭开神秘面纱

ajax.httpRequest.onreadystatechange = function(){
            
            	alert( 'status = ' + ajax.httpRequest.readyState );
                if ( 4 == ajax.httpRequest.readyState) { // 判断对象状态
                        if (  200 == ajax.httpRequest.status ){
                        
                            if( 'text' == responseType.toLowerCase()  ){
                            
                                callback( ajax.httpRequest.responseText );
                            }
                            else{
                            
                                callback( ajax.httpRequest.responseXML );
                            }                               
                        }
                    }
            }

new window.ActiveXObject("Microsoft.XMLHTTP");

new XMLHttpRequest()

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 加入阿里巴巴，发展潜力无限
• 搜狐网站诚聘Java、PHP和C++工程师

• 加入阿里巴巴，发展潜力无限
• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师

            docReadyProcId = setInterval(function(){
                try{
                    // throws errors until DOM is ready
                    Ext.isReady || (document.documentElement.doScroll('left'));
                }catch(e){
                    return;
                }
                fireDocReady();  // no errors, fire
            }, 5);

			document.onreadystatechange = function(){
				if(document.readyState == 'complete'){
					document.onreadystatechange = null;
					fireDocReady();
				}
            };

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师
• 加入阿里巴巴，发展潜力无限

• 加入阿里巴巴，发展潜力无限
• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师

完整代码详见 http://www.blogjava.net/mstar/archive/2007/01/03/Ajax_DWR2_LogViewer.html

由于项目中应用Ext framework，所以将前端代码修改为基于Ext Framework.

主要技术：

1.DWR 2.x (Reverse-Ajax )

Reverse-Ajax应用场景:

用过GMail的同学肯定发现这样一个场景:当Browser开着 此时我给你发一封mail 你立即/过一会儿 会发现mail已经收到 而你没有刷新页面 当然也没有提交任何request 我认为这很新奇！ 似乎是Ajax应用的另一个功能 不错 这就是Reverse-Ajax 也就是sever-end "推" 数据给 client-end  而不是传统的"拉"数据.

当前开源框架Comet framework已经成熟,有兴趣的同学可以参考

http://www.ibm.com/developerworks/cn/web/wa-lo-comet/ 

2.Ext 2.x

平台:

WindowsXP SP2

服务器:

Tomcat 5.5.x

UI:

Ext: (这里仅给出 DWR 与 Ext Store 通信 代码)

 
Java:

• 搜狐网站诚聘Java、PHP和C++工程师
• Windows7在微软WinHEC 2008上揭开神秘面纱
• 加入阿里巴巴，发展潜力无限

• 加入阿里巴巴，发展潜力无限
• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师

前段时间在项目中运用到了jQuery，的确是个好东西，不敢私藏，特拿出来分享一下。

jQuery 是一种 JavaScript 库，它是开发人员简化动态富 Internet 应用程序创建的最佳选择。至少我是这么认为。除开jQuery的易用性以外，她最为强大的地方就是她的插件功能，jQuery官网上成百上千个插件足以证明这一事实。jQuery开发插件同样也是一件非常的简单而愉快的事情。接下来要做的就是用jQuery写一个下拉框效果的插件。

本文要求对jQuery以及javascript知识有一定了解的人，如果你还不熟悉，你可以先阅读http://www.k99k.com/jQuery_getting_started.html

首先去http://jqueryjs.googlecode.com/files/jquery-1.2.6.js下载jQuery的源码。

接下来创建一个下拉框插件的js文件，将其命名为jquery.contextbox.js。

我们需要给插件加入三个功能：1.创建下拉框 2.隐藏下拉框 3.隐藏所有的下拉框

;(function($) {
/**
* 创建一个下拉框
* @name     createContextBox
* @param    options 可选参数，参数包含如下：
*    width:设置下拉框宽度(可选) 
*    offsetX:下拉框的X坐标偏移量(可选)
*    offsetY:下拉框的Y坐标偏移量(可选)
*    content:下拉框中说呈现的内容
* @author   hu wei
* @type     jQuery
* @example $("#contextbox").createContextBox({'width':'500px','offsetX':-220,content:'haha,test!'}); 
*/
$.fn.createContextBox = function(options) {
var contextBoxDivE = $('<div class="contextbox" style="display:none;position:absolute;z-index:1005;" ></div>');
this.contextBoxDivE = contextBoxDivE;
contextBoxDivE.contextBox = this;
//设置下拉框的可选数据
if (options) {
   var content = options['content'];
   this.content = $(content);
   if (content)contextBoxDivE.html(this.content);
   var width = options['width'];
   if (width)contextBoxDivE.css("width",width);
}
//存入缓存
var contextBoxs = $('body').data('contextBoxs');
if (!contextBoxs) contextBoxs = [];
contextBoxs.push(this);
$('body').data('contextBoxs',contextBoxs);
if (jQuery.browser.msie) {
   //如果是IE需要加入iframe，以防止<select>这样的控件显现在div的上面
   var ieiframeE = $('<iframe style="display:none;position:absolute;z-index:1000;border-width:0px;" ></iframe>');
   this.ieiframeE = ieiframeE;
   this.after(ieiframeE);
   this.after(contextBoxDivE);
   this.bind("click", function(e){
    var contextBoxs = $('body').data('contextBoxs');
      for (var i = 0;i<contextBoxs.length;i++) {
      contextBoxs[i].hideContextBox();
      }
      var offset = $(this).offset();
          ieiframeE.css("top",offset.top+24+(options&&options['offsetY']?options['offsetY']:0));
          ieiframeE.css("left",offset.left+(options&&options['offsetX']?options['offsetX']:0));
          ieiframeE.show();
          contextBoxDivE.css("top",offset.top+24+(options&&options['offsetY']?options['offsetY']:0));
          contextBoxDivE.css("left",offset.left+(options&&options['offsetX']?options['offsetX']:0));
       contextBoxDivE.show();
       ieiframeE.height(contextBoxDivE.height());
       ieiframeE.width(contextBoxDivE.width());
      });
      contextBoxDivE.resize(function(){
      $(this).next().height($(this).height());
      $(this).next().width($(this).width());
      });
} else {
   //将下拉框放置在你说点击的对象后面
   this.after(contextBoxDivE);
   //点击这个对象后弹出下拉框
   this.bind("click", function(e){
   var contextBoxs = $('body').data('contextBoxs');
   for (var i = 0;i<contextBoxs.length;i++) {
      contextBoxs[i].hideContextBox();
   }
   //设置下拉框的位置
   var offset = $(this).offset();
        contextBoxDivE.css("top",offset.top+24+(options&&options['offsetY']?options['offsetY']:0));
        contextBoxDivE.css("left",offset.left+(options&&options['offsetX']?options['offsetX']:0));
        //显示下拉框
     contextBoxDivE.show();
      });
}
return this;
};
/**
* 隐藏下拉框
* @name     hideContextBox
* @author   hu wei
* @type     jQuery
* @example $("#contextbox").hideContextBox(); 
*/
$.fn.hideContextBox = function() {
this.next().hide();
if (jQuery.browser.msie) this.next().next().hide();
return this;
};

$.hideAllContextBox = function(options) {
var contextBoxs = $('body').data('contextBoxs');
for (var i = 0;i<contextBoxs.length;i++) {
   contextBoxs[i].hideContextBox();
}
};

})(jQuery);

OK插件已经写完了，不到100行的代码，简单吧！

接下来写一个用于测试这个插件的html页面，将这个名称命名为contextbox.html，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>context box sample</title>
<style type="text/css">
div.contextbox {border:2px solid #ccc;background:#fff}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.contextbox.js"></script>
<script type="text/javascript">
$().ready(function() {
$("#contextbox1").createContextBox(
{"content":"<div>哈哈，我是下拉框1！<br/>我终于现身了！<br/><input type='button' id='colsecontextbox1' value='关闭' /></div>"});
$("#contextbox2").createContextBox(
{"content":"<div>哈哈，我是下拉框2！<br/>我终于现身了！<br/><input type='button' id='colsecontextbox2' value='关闭' /></div>"});
$("#colsecontextbox1").click(function(){$("#contextbox1").hideContextBox();});
$("#colsecontextbox2").click(function(){$("#contextbox2").hideContextBox();});
});
</script>
</head>
<body>
<a id="contextbox1" href="javascript:void(0);">点击弹出下拉框1</a>
<a id="contextbox2" href="javascript:void(0);">点击弹出下拉框2</a>
</body>
</html>

 
可以看到创建一个下拉框控件，你只需要两个步骤：

1.在你的html页面中加入<script type="text/javascript" src="jquery.contextbox.js"></script>

2.给你的dom元素上执行一下createContextBox方法就可以了：
$("#contextbox1").createContextBox({"content":"XXXX"});

运行这html文件，你就会看到如下样式的效果了。

• 搜狐网站诚聘Java、PHP和C++工程师
• Windows7在微软WinHEC 2008上揭开神秘面纱
• 加入阿里巴巴，发展潜力无限

问了论坛，聊天群始终还是无法搞定，甚至有人建议我自己写一个URLrequest 封装起来。

呵呵，不过终于还是解决这个问题了，thanks to peter。

Hi,

Chances are if you are doing a POST with no data, it turns into a GET.
 Try a POST with some content.  I think there's something about this
in the book...

Cheers,
Peter

关键在于HTTPService.send(params) 是不起作用的，需要先给 HTTPService.request 赋值 才行。

神奇的FLEX API

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 加入阿里巴巴，发展潜力无限
• 搜狐网站诚聘Java、PHP和C++工程师

OK，本文假设你已经看过了用jQuery动手写一个插件：实现一个下拉框效果，接着前面的文章，本文要在前文的基础上来实现一个能够查看学校信息的下拉框。具体的效果如搜狐博客个人档案中编辑学校信息的样式，如下图：

做法有两种：

第一种方式，采用$("#contextbox1").createContextBox({"content":"XXXX"});的方式写，但这样的结果是，如果以后有同样的地方需要采用学校信息下拉框，那么你就只能采用粘贴代码的方式来达到复用了，甚至于还混入了相关页面的一些固有的逻辑，这显然不是一个好方法。

第二种方式，在原有的下拉框插件的基础上再一次扩展，形成新的插件，它的好处不用我再多说了吧！用jQuery编程能写成插件就尽可能写成插件。

首先来仔细分析一下这个下拉框，她比先前的下拉框要复杂得多，需要支持如下的功能：
1.选择省份后需要支持ajax的页面提交，让学校信息能发生变化。
2.点击翻页后也需要支持ajax的页面提交，让学校信息具备翻页的功能。
3.点击学校链接，需要将学校名字回填到文本框中。

经过分析后，这个插件中需要新创建两个方法：

一个是createUnivContextBox方法，表示创建一个大学信息的下拉框；

另一个是changeProvinceOrPage方法，表示省份或者页面发生了改变，需要通过ajax刷新相应的学校信息。

接下来我们就创建一个名称为jquery.schoolcontextbox.js的文件，源码如下:

;(function($) {

$.fn.createUnivContextBox = function(options) {
	var content = '<div class="mod"><div class="head clearfix">'+
		'<h3>请选择学校所在的省市：<select class="province">'+
		'<option value="1">北京市</option><option value="2">天津市</option><option value="3">河北省</option><option value="4">山西省</option><option value="5">辽宁省</option><option value="6">吉林省</option><option value="7">上海市</option><option value="8">江苏省</option><option value="9">浙江省</option><option value="10">安徽省</option><option value="11">福建省</option><option value="12">江西省</option><option value="13">山东省</option><option value="14">河南省</option><option value="15">内蒙古自治区</option><option value="16">黑龙江省</option><option value="17">湖北省</option><option value="18">湖南省</option><option value="19">广东省</option><option value="20">广西壮族自治区</option><option value="21">海南省</option><option value="22">四川省</option><option value="23">重庆市</option><option value="24">台湾省</option><option value="25">贵州省</option><option value="26">云南省</option><option value="27">西藏自治区</option><option value="28">陕西省</option><option value="29">甘肃省</option><option value="30">青海省</option><option value="31">宁夏回族自治区</option><option value="32">新疆维吾尔族自治区</option><option value="33">香港特别行政区</option><option value="34">澳门特别行政区</option><option value="35">海外</option>'+ 
		'</select><input type="hidden" /></h3><div class="option"><a class="close" href="javascript:jQuery.hideAllContextBox();">关闭</a></div></div>'+
		'<div class="body clearfix"><div class="SchoolSelectorCtr">loading....</div><hr/><div class="pageNav"></div></div></div>';
	options['content'] = content;
	options['province_id'] = 1;
	options['school_type'] = 6;
	$(this).createContextBox(options);
	var context_box = this;
	$(this).next().find("input").val(options['school_type']);
	$(this).next().find("select").change(function(){
		$(context_box).changeProvinceOrPage($(this).val(),$(this).next().val(),1);
	});
	$(this).changeProvinceOrPage(options['province_id'],options['school_type'],1);
};

$.fn.changeProvinceOrPage = function(province_id, school_type,current_page) {
	var pageNav = $(this).next().find(".pageNav");
	var tableDiv = $(this).next().find(".SchoolSelectorCtr");
	var from = 45*(current_page-1);
	var to = 45*(current_page);
	var context_box = this;
	$.getScript("http://profile.blog.sohu.com/service/schoolJson.htm?prov="+province_id+"&cate="+school_type+"&st="+from+"&sz=45&vn=school_data",
		function(){
		  var data = school_data['data'];
		  var counter = 0;
		  var tbody = $("<tbody></tbody>");
		  var counter = 0;
		  var tr = $("<tr></tr>");
		  for( var i = 0; i < data.length; i++) {
			  if (i%3 == 0) tr = $("<tr></tr>");
			  var a = $("<a href='javascript:void(0);' name='"+data[i][0]+"'>"+data[i][1]+"</a>");
			  a.click(function(){
			  	  $("#"+context_box.attr("id").replace("school_name","school_id")).val($(this).attr("name"));
			  	  context_box.val($(this).text());
			  	  $.hideAllContextBox();
			  });
			  var td = $("<td></td>");
			  td.append(a);
			  tr.append(td);
			  if (i%3 == 2 || data.length - 1 == counter) {
			  	tbody.append(tr);
			  }
		  }
          var table = $("<table></table>").attr("cellspacing", 4).attr("cellpadding", 0).attr("border", 0).attr("width", "100%").append(tbody);
          tableDiv.html(table);
          //显示分页
		  var pg= parseInt(current_page,10);
       	  var total_pg = (school_data['count']/45)+((school_data['count']%45)>0?1:0);
       	  //每页显示7个
       	  var prev = "";
       	  var pages = [];
       	  var next = "";
       	  if (pg > 4) {
       	    prev = "<a name='"+(pg-1)+"' href='javascript:void(0);'>上一页</a>";
       	  }
       	  if (total_pg > 7 && pg+3<total_pg) {
       	    next = "<a name='"+(pg+1)+"' href='javascript:void(0);'>下一页</a>";
       	  }
       	  for (var i = (((pg-3)>0)?(pg-3):1); i <= ((total_pg>(pg+3))?(pg+3):total_pg); i++) {
       	 	if (pg == i) {
       	 		pages.push("<span>"+i+"</span>");
       	 	} else {
       	 		pages.push("<a name='"+i+"' href='javascript:void(0);'>"+i+"</a>");
       	 	}
       	 }
       	 pageNav.html(prev + pages.join('') + next);
       	 pageNav.find("a").click(function() {
       	 	$(context_box).changeProvinceOrPage(province_id,school_type,parseInt(this.name,10));
       	 });
	});
	return this;
};

})(jQuery);

ok，大学信息的下拉框的插件就完成了，可以看到createUnivContextBox中也包含了createContextBox方法，并且适当的添加了它自身特有的一些代码就构造成了一个可以选择学校的下拉框了。

写个名称为school_contextbox.html来对她测试一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>school context box sample</title>
<style type="text/css">
a {color: #104d6c;text-decoration: underline;}
em a {color:#f06;}
a:hover,
em a:hover {color: #f63;text-decoration: underline;}
a:focus {-moz-outline-style: none;}
a.close {display:block;overflow:hidden;width:16px;height:16px;background:url(http://js2.pp.sohu.com.cn/ppp/blog/styles_ppp_v_081008/images/ico_cls.gif) center no-repeat;text-indent:-9999px;}
div.contextbox {border:2px solid #ccc;background:#fff}
body {margin:0;padding:0;background:#fff;color:#666;font:normal 12px/1.6em Verdana,Arial,sans-serif,"宋体";}
.clearfix {display:block;}
.mod{margin:0 0 10px;}
	.mod .head {height:20px;padding:3px 7px;>padding:4px 7px 2px;border-bottom:1px solid #ccc;}
		.mod .head h3,
		.mod .head h4 {float:left;margin:0;font:bold 12px/20px Verdana,Arial,Helvetica,sans-serif;}
		.mod .head select {height:18px;}
		*+html .mod .head select {height:20px;}
		.mod .head .option {float:right;}
	.mod .body {padding:10px 10px 0;}
		.mod .body .noItem {margin:0 -10px;padding:15px 25px 25px 80px;border-bottom:1px solid #ccc;}
	.mod .foot {}
/* pageNav */
.pageNav {padding:0 0 5px;line-height:20px;font-family:Tahoma,Verdana,Arial,Helvetica,sans-serif;text-align:right;}
	.pageNav span,
	.pageNav a {padding:0 4px 0 3px;}
	.pageNav span {font-weight:bold;}
	.pageNav a {text-decoration:underline;}
	.pageNav a.prev {float:left;}
	.pageNav a.next {float:right;}

table.popLayer {border:1px solid #ccc;}
	table.popLayer td {overflow:hidden;padding:0;!important;}
	table.popLayer .lt,
	table.popLayer .lm,
	table.popLayer .lb,
	table.popLayer .rt,
	table.popLayer .rm,
	table.popLayer .rb {width:4px;!important;font-size:0;line-height:0;}
	table.popLayer .lt,
	table.popLayer .mt,
	table.popLayer .rt,
	table.popLayer .lb,
	table.popLayer .mb,
	table.popLayer .rb {height:4px;!important;font-size:0;line-height:0;}
	table.popLayer .rm,
	table.popLayer .mb,
	table.popLayer .rb {background:#333;!important;filter:alpha(opacity=50);-moz-opacity: 0.5;}
	table.popLayer .rt,
	table.popLayer .lb {border:2px solid #333;!important;filter:alpha(opacity=50);-moz-opacity: 0.5;}
	table.popLayer .lt,
	table.popLayer .mt,
	table.popLayer .lm,
	table.popLayer .mm {border:2px solid #ccc;!important;background:#fff;!important;}
	table.popLayer .lt {border-width:2px 0 0 2px;!important;}
	table.popLayer .rt {border-width:0;!important;*border-width:0 0 2px 0;!important;}
	table.popLayer .mt {border-width:2px 2px 0 0;!important;}
	table.popLayer .lm {border-width:0 0 2px 2px;!important;}
	table.popLayer .mm {border-width:0 2px 2px 0;!important;padding:0 3px 3px 0;!important;}
	table.popLayer .lb {border-width:0 2px 0 0;!important;}
hr {clear:both;height:1px;margin:7px 0;>margin:0;padding:0;border:0 none;border-top:1px dashed #ccc;line-height:1px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.contextbox.js"></script>
<script type="text/javascript" src="jquery.schoolcontextbox.js"></script>
<script type="text/javascript">
$().ready(function() {
 $("#univs_1_school_name").createUnivContextBox({'width':'510px'});
});
</script>
</head>
<body>
<table class="tableForm" width="100%" border="0" cellspacing="8" cellpadding="0">
<tr>
 <td class="formLable" width="60">大学：</td>
 <td class="formEle">
  <input id="univs_1_school_name" class="popup" title="请点击选择" name="univs[1][school_name]" value="" readonly="true"/>
  <input id="univs_1_school_id" name="univs[1][school_id]" type="hidden" value="7"/>
 </td>
</tr>
</table>
</body>
</html>

html代码看上去有点多，主要是css样式表较多的缘故，其实最为核心的代码也就是下面这几行：

<script type="text/javascript" src="jquery.contextbox.js"></script>
<script type="text/javascript" src="jquery.schoolcontextbox.js"></script>
<script type="text/javascript">
$().ready(function() {
 $("#univs_1_school_name").createUnivContextBox({'width':'510px'});
});
</script>

1.分别引入了jquery.contextbox.js、jquery.schoolcontextbox.js两个js。

2.给你的文本框执行一下createUnivContextBox({'width':'510px'})方法。

看到jQuery写插件的好处了吧！jQuery基于插件的开发方式让你的js代码达到最低的耦合、极高的复用。

在项目开发过程中，随着js代码的不断增多，js的维护量也越来越大，那么你还能持续的让你的js的代码处于一种高度可维护，可复用的状态吗？如果你正在为此而焦头烂额的话。那么我觉得你可以考虑考虑采用jQuery了。

• 搜狐网站诚聘Java、PHP和C++工程师
• 加入阿里巴巴，发展潜力无限
• Windows7在微软WinHEC 2008上揭开神秘面纱

在我们编写大型Web项目时，有时不可避免的会有跨域读取的操作，一般都会采用script标签的src方式，我也采用了这种方式，但一开始是利用给src赋值的方法实现跨域操作，但很奇怪的是在IE下运行一切正常，但在Firefox浏览器下却不工作，后来采用如下方式解决问题：

if(document.getElementById(this.scriptelementid)){
	var el=document.getElementById(this.scriptelementid);
	var p=el.parentNode;  
	p.removeChild(el);   
}
var head = document.getElementsByTagName("head").item(0);  
var script = document.createElement ("script");  
script.src = url;
script.id=this.scriptelementid;
head.appendChild(script);  

• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师
• 加入阿里巴巴，发展潜力无限

• 加入阿里巴巴，发展潜力无限
• Windows7在微软WinHEC 2008上揭开神秘面纱
• 搜狐网站诚聘Java、PHP和C++工程师