研究发现Q属性（变量Q可分ؓ三类Q对象属性、全局变量和局部变量）
对象属性：声明时以“this.”开_只能?#8220;cȝ实例”卛_象所调用Q不能被“cd部（对外不对内）”调用Q全局变量Q声明时直接以变量名开_可以L调用Q对内对外）Q局部变量：只能?/p>
“cd部（对内不对外）”调用?/p>
JS函数的声明与讉K原理
<script type="text/javas
//c?nbsp;
var testClass = function(){
//对象属?对外不对?c调?
this.age ="25";
//全局变量(对内对外)
name="jack";
//局部变?对内不对?
var address = "beijing";
//全局函数Q对内对外）
add = function(a,b){
//可访问：全局变量和局部变?nbsp;
multiply(a,b);
return a+b;
}
//实例函数Q由cȝ对象调用Q?nbsp;
this.minus = function(a,b){
//可以讉KQ对象属性、全局变量和局部变?nbsp;
return a-b;
}
//局部函敎ͼ内部直接调用Q?nbsp;
var multiply = function(a,b){
//只能讉KQ全局变量和局部变?nbsp;
return a*b;
}
}
//cd敎ͼq名直接调用）
testClass.talk= function(){
//只能讉KQ全局变量和全局函数
this.what = function(){
alert("What can we talk about?");
about();
}
var about = function(){
alert("about nameQ?+name);
alert("about add(1,1):"+add(1,1));
}
}
//原型函数(q的对象调?
testClass.prototype.walk = function(){
//只能讉K:全局变量和全局函数
this.where = function(){
alert("Where can we go?");
go();
}
var go = function(){
alert("go name:"+name);
alert("go add(1,1):"+add(1,1));
}
}
</script>
下面看看如何调用:
<script type="text/javas
//获取一个cbscȝ实例
var cbs= new testClass();
//调用cȝ对象属性age
alert("age:"+cbs.age);
//获取cd数talk的实?nbsp;
var talk = new testClass.talk();
//调用cd数的实例函数
talk.what();
//获取原型函数walk的实?nbsp;
var walk = new cbs.walk();
//调用原型函数的实例函?nbsp;
walk.where();
</script>
]]>
早v的国内互联网都用GBK~码Q久之，所有项目都以GBK来编码了。对于J2EE目Qؓ了减编码的q扰通常都是讄一个编码的FilterQ强制将Request/Response~码改ؓGBK。例如一个Spring的常见配|如下：
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>GBK</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
毫无疑问Q这在GBK~码的页面访问、提交数据时是没有ؕ码问题的。但是遇到Ajax׃一样了。Ajax强制中文内容进行UTF-8~码Q这样导致进入后端后使用GBKq行解码时发生ؕ码。网上的所谓的l极解决Ҏ都是扯E或者过于复杂，例如下面的文章：
q样的文章很多，昄Q?/p>
- 使用VBq行UTF-8转换成GBK提交是完全不可行Q多览器、多q_完全不可用）
- 使用复杂的js函数q行一ơ、多ơ编码，后端q行一ơ、多ơ解码也是不靠谱的，成本太高Q无法重复?/li>
如果提交数据的时候能够告诉后端传输的~码信息是否可以避免这U问题？比如Ajaxh告诉后端是UTF-8Q其它请求告诉后端是GBKQ这样后端分别根据指定的~码q行解码是不是就解决问题了?/p>
有两个问题：
- 如何通过Ajax告诉后端的编码？Headerq于复杂QCookie成本太高Q用参数最方便?/li>
- 后端何时q行解码Q每一个请求进行解码，q于J琐Q获取参数时解码Q此时已lؕ码；在Filter里面动态设|编码是最完善的方案?/li>
- 如何从参C获取~码Q如果是POST的body昄无法获取Q因此在获取之前所有参数就已经按照某种~码解码q了Q无法还原。所以通过URL传递编码最有效。支持GET/POSTQ同时成本很低?/li>
解决了上q问题，来看具体实现Ҏ?列一DJava代码Q?/p>
import java.io.IOException; import java.util.regex.Matcher; import java.util.regex.Pattern; import javax.servlet.FilterChain; import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.util.ClassUtils; import org.springframework.web.filter.OncePerRequestFilter; /** 自定义编码过滤器 * @author imxylz (imxylz#gmail.com) * @sine 2011-6-9 */ public class MutilCharacterEncodingFilter extends OncePerRequestFilter { static final Pattern inputPattern = Pattern.compile(".*_input_encode=([\\w-]+).*"); static final Pattern outputPattern = Pattern.compile(".*_output_encode=([\\w-]+).*"); // Determine whether the Servlet 2.4 HttpServletResponse.setCharacterEncoding(String) // method is available, for use in the "doFilterInternal" implementation. private final static boolean responseSetCharacterEncodingAvailable = ClassUtils.hasMethod(HttpServletResponse.class, "setCharacterEncoding", new Class[] { String.class }); private String encoding; private boolean forceEncoding = false; @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { String url = request.getQueryString(); Matcher m = null; if (url != null && (m = inputPattern.matcher(url)).matches()) {//输入~码 String inputEncoding = m.group(1); request.setCharacterEncoding(inputEncoding); m = outputPattern.matcher(url); if (m.matches()) {//输出~码 response.setCharacterEncoding(m.group(1)); } else { if (this.forceEncoding && responseSetCharacterEncodingAvailable) { response.setCharacterEncoding(this.encoding); } } } else { if (this.encoding != null && (this.forceEncoding || request.getCharacterEncoding() == null)) { request.setCharacterEncoding(this.encoding); if (this.forceEncoding && responseSetCharacterEncodingAvailable) { response.setCharacterEncoding(this.encoding); } } } filterChain.doFilter(request, response); } public void setEncoding(String encoding) { this.encoding = encoding; } public void setForceEncoding(boolean forceEncoding) { this.forceEncoding = forceEncoding; } }
解释下：
- 如果URL的QueryString中包含_input_encode׃用此~码q行讄Request~码Q以后参数按照此~码q行解析Q例如如果是Ajax׃入UTF-8Q如果是普通的GBKh则无视此参数?/li>
- 如果无视此参敎ͼ则按照web.xml中配|的~码规则q行反编码，如果是GBK按照GBK规则解析?/li>
- 对于输出~码同样使用上述规则。需要输出编码依赖输入编码，也就是说如果有一个_output_encode的输出编码，则同旉要有一个_input_encode~码来指定输入编码。当然你可以攚w成不依赖输入编码?/li>
- 完全兼容Spring的org.springframework.web.filter.CharacterEncodingFilter~码规则Q只需要替换类卛_?/li>
- 没有l承org.springframework.web.filter.CharacterEncodingFiltercȝ原因是，org.springframework.web.filter.CharacterEncodingFilter里面的encoding参数和forceEncoding参数是privateQ子cL法用。在有_input_encode而无_output_encode的时候想依然保持Spring的Response解析规则的话无法做到Q所以将里面的代码拷贝过来用。（Z展示方便Q注释都删掉了）
- 正则表达式可以改q成只需要匹配一ơ，从而可以提高一点点效率?/li>
- 所有后端请求将无视~码的存在，前端Ajax的GET/POSTh也将无视~码的存在，只是在URL地址中加上一个_input_encode=UTF-8的参数。仅此而已?/li>
- 如果惌出的~码也是UTF-8Q比如手机端h、跨站请求等Q则需要URL地址参数_input_encode=UTF-8&_output_encode=UTF-8?/li>
- 对于POSThQ编码参C能写在body里面Q否则无法解析?/li>
- 昄Q这U终极解x案，在Q何编码中都可以解冻IGBK/UTF-8/ISO8859-1{编码Q何组合都可以实现?br />
- 唯一局限性是Q此解决Ҏ限制在J2EE目中，其它q_不知是否有类似Filterq样的组件能够设|编码的概念?/li>
]]>
]]>
正则表达式用于字W串处理Q表单验证等场合Q实用高效，但用到时L不太把握Q以致往往要上|查一番。我一些常用的表达式收藏在q里Q作备忘之用。本贴随时会更新?br />
匚w中文字符的正则表辑ּQ?/p>
匚w双字节字W?包括汉字在内)Q?/p>
应用Q计字W串的长度（一个双字节字符长度?QASCII字符?Q?/p>
匚wI的正则表辑ּQ?/p>
匚wHTML标记的正则表辑ּQ?/p>
匚w首尾I格的正则表辑ּQ?/p>
应用Qj avascript中没有像v bscript那样的trim函数Q我们就可以利用q个表达式来实现Q如下：
{
return this . replace ( / (^\s*)|(\s*$) /g , "" ) ;
}
利用正则表达式分解和转换IP地址
下面是利用正则表辑ּ匚wIP地址QƈIP地址转换成对应数值的JavascriptE序Q?/p>
{
re = / (\d+)\.(\d+)\.(\d+)\.(\d+) /g //匚wIP地址的正则表辑ּ
if ( re . test ( ip ))
{
return RegExp .$ 1 * Math . pow ( 255 , 3 ) )+ RegExp .$ 2 * Math . pow ( 255 , 2 ) )+ RegExp .$ 3 * 255 + RegExp .$ 4 * 1
}
else
{
throw new Error ( " Not a valid IP address! " )
}
}
不过上面的程序如果不用正则表辑ּQ而直接用split函数来分解可能更单，E序如下Q?/p>
ip = ip . split ( " . " )
alert ( " IP值是Q?/span> " + ( ip [ 0 ] * 255 * 255 * 255 + ip [ 1 ] * 255 * 255 + ip [ 2 ] * 255 + ip [ 3 ] * 1 ))
匚wEmail地址的正则表辑ּQ?/p>
匚w|址URL的正则表辑ּQ?/p>
利用正则表达式去除字串中重复的字W的法E序Q[*注：此程序不正确]
var s1 = s . replace ( / (.).*\1 /g , " $1 " )
var re = new RegExp ( " [ " + s1 + " ] " , " g " )
var s2 = s . replace ( re , "" )
alert ( s1 + s2 ) //l果为：abcefgi
*?br />===============================
如果var s = “abacabefggeeii?br />l果׃对了Q结果ؓQabeicfgg
正则表达式的能力有限
===============================
我原来在CSDN上发贴寻求一个表辑ּ来实现去除重复字W的ҎQ最l没有找刎ͼq是我能惛_的最单的实现Ҏ。思\是用后向引用取出包括重复的字符Q再以重复的字符建立W二个表辑ּQ取C重复的字W，两者串q。这个方法对于字W顺序有要求的字W串可能不适用?/p>
得用正则表达式从URL地址中提取文件名的javascriptE序Q如下结果ؓpage1
s = s . replace ( / (.* \/ ){ 0, }([^\.]+).* /i g , " $2 " )
alert ( s )
利用正则表达式限制网表单里的文本框输入内容Q?/p>
用正则表辑ּ限制只能输入中文Q?/p>
用正则表辑ּ限制只能输入全角字符Q?/p>
用正则表辑ּ限制只能输入数字Q?/p>
用正则表辑ּ限制只能输入数字和英文：
匚w非负整数Q正整数 + 0Q?/p>
匚w正整?/p>
匚w非正整数Q负整数 + 0Q?/p>
匚w负整?/p>
匚w整数
匚w非负点敎ͼ正QҎ + 0Q?/p>
匚w正QҎ
匚w非正点敎ͼ负QҎ + 0Q?/p>
匚w负QҎ
匚w点?/p>
匚w?6个英文字母组成的字符?/p>
匚w?6个英文字母的大写l成的字W串
匚w?6个英文字母的写l成的字W串
匚w由数字和26个英文字母组成的字符?/p>
匚w由数字?6个英文字母或者下划线l成的字W串
匚wemail地址
匚wurl
匚whtml tag
Visual Basic & C# Regular Expression
1.认有效电子邮g格式
下面的示例用静?Regex.IsMatch Ҏ验证一个字W串是否为有效电子邮件格式。如果字W串包含一个有效的电子邮g地址Q则 IsValidEmail Ҏq回 trueQ否则返?falseQ但不采取其他Q何操作。您可以使用 IsValidEmailQ在应用E序地址存储在数据库中或昄?ASP.NET 中之前Q筛选出包含无效字符的电子邮件地址?/p>
[Visual Basic]
' Return true if strIn is in valid e-mail format.
Return Regex.IsMatch(strIn, ("^([\w-\.]+)@((\[[0-9]{ 1,3 }\.[0-9]{ 1,3 }\.[0-9]{ 1,3 }\.)|(([\w-]+\.)+))([a-zA-Z]{ 2,4 }|[0-9]{ 1,3 })(\]?)$")
End Function
[C#]
{
// Return true if strIn is in valid e-mail format.
return Regex.IsMatch(strIn, @"^([\w-\.]+)@((\[[0-9]{ 1,3 }\.[0-9]{ 1,3 }\.[0-9]{ 1,3 }\.)|(([\w-]+\.)+))([a-zA-Z]{ 2,4 }|[0-9]{ 1,3 })(\]?)$");
}
2.清理输入字符?br />下面的代码示例用静?Regex.Replace Ҏ从字W串中抽出无效字W。您可以使用q里定义?CleanInput ҎQ清除掉在接受用戯入的H体的文本字D中输入的可能有害的字符。CleanInput 在清除掉?@?Q连字符Q和 .Q句点）以外的所有非字母数字字符后返回一个字W串?/p>
[Visual Basic]
' Replace invalid characters with empty strings.
Return Regex.Replace(strIn, "[^\w\.@-]", "")
End Function
[C#]
{
// Replace invalid characters with empty strings.
return Regex.Replace(strIn, @"[^\w\.@-]", "");
}
3.更改日期格式
以下代码CZ使用 Regex.Replace Ҏ来用 dd-mm-yy 的日期Ş式代?mm/dd/yy 的日期Ş式?/p>
[Visual Basic]
Return Regex.Replace(input, _
"\b(?<month>\d{ 1,2 })/(?<day>\d{ 1,2 })/(?<year>\d{ 2,4 })\b", _
"${ day }-${ month }-${ year }")
End Function
[C#]
{
return Regex.Replace(input,"\\b(?<month>\\d{ 1,2 })/(?<day>\\d{ 1,2 })/(?<year>\\d{ 2,4 })\\b","${ day }-${ month }-${ year }");
}
Regex 替换模式
本示例说明如何在 Regex.Replace 的替换模式中使用命名的反向引用。其中，替换表达?${ day } 插入?(?
有几U静态函C您可以在使用正则表达式操作时无需创徏昑ּ正则表达式对象，?Regex.Replace 函数正是其中之一。如果您不想保留~译的正则表辑ּQ这给您带来方?/p>
4.提取 URL 信息
以下代码CZ使用 Match.Result 来从 URL 提取协议和端口号。例如，“http://www.penner.cn:8080……将q回“http:8080”?/p>
[Visual Basic]
Dim r As New Regex("^(?<proto>\w+)://[^/]+?(?<port>:\d+)?/", _
RegexOptions.Compiled)
Return r.Match(url).Result("${ proto }${ port }")
End Function
[C#]
{
Regex r = new Regex(@"^(?<proto>\w+)://[^/]+?(?<port>:\d+)?/",
RegexOptions.Compiled);
return r.Match(url).Result("${ proto }${ port }");
}
只有字母和数字，不小?位，且数字字母都包含的密码的正则表达?br />在C#中，可以用这个来表示Q?/p>
一个将需要将路径字符串拆分ؓ根目录和子目录两部分的算法程序，考虑路径格式有：C:\aa\bb\cc Q\\aa\bb\cc Q?ftp://aa.bb/cc 上述路径分别被拆分为：C:\和aa\bb\cc Q\\aa ?\bb\cc Q?ftp:// ?aa.bb/cc 用javascript实现如下Q?/p>
var regPathParse = / ^([^\\^ \/ ]+[\\ \/ ]+|\\\\[^\\]+)(.*)$ /
if ( regPathParse . test ( strFolder ))
{
strRoot = RegExp .$ 1
strSub = RegExp .$ 2
}
]]>
To read and update - create and manipulate - an XML document, you will need an XML parser.
Microsoft's XML Parser
Microsoft's XML parser is a COM component that comes with Internet Explorer 5 and higher. Once you have installed Internet Explorer, the parser is available to scripts.
Microsoft's XML parser supports all the necessary functions to traverse the node tree, access the nodes and their attribute values, insert and delete nodes, and convert the node tree back to XML.
The following table lists the most commonly used node types supported by Microsoft's XML parser:
| Node Type | Example |
|---|---|
| Processing instruction | <?xml version="1.0"?> |
| Element | <drink type="beer">Carlsberg</drink> |
| Attribute | type="beer" |
| Text | Carlsberg |
MSXML Parser 2.5 is the XML parser that is shipped with Windows 2000 and IE 5.5.
MSXML Parser 3.0 is the XML parser that is shipped with IE 6.0 and Windows XP.
The MSXML 3.0 parser features:
- JavaScript, VBScript, Perl, VB, Java, C++, etc. support
- Complete XML support
- Full DOM and Namespace support
- DTD and validation
- Complete XSLT and XPath support
- SAX2 support
- Server-safe HTTP
To create an instance of Microsoft's XML parser with JavaScript, use the following code:
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM") |
To create an instance of Microsoft's XML parser with VBScript, use the following code:
set xmlDoc=CreateObject("Microsoft.XMLDOM") |
To create an instance of Microsoft's XML parser in an ASP page (using VBScript), use the following code:
set xmlDoc=Server.CreateObject("Microsoft.XMLDOM") |
The following code loads an existing XML document ("note.xml") into Microsoft's XML parser:
<script type="text/javascript">
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
...
...
...
</script> |
The first line of the script above creates an instance of the Microsoft XML parser. The third line tells the parser to load an XML document called "note.xml". The second line turns off asynchronized loading, to make sure that the parser will not continue execution of the script before the document is fully loaded.
XML Parser in Mozilla Browsers
Plain XML documents are displayed in a tree-like structure in Mozilla (just like IE).
Mozilla also supports parsing of XML data using JavaScript. The parsed data can be displayed as HTML.
To create an instance of the XML parser with JavaScript in Mozilla browsers, use the following code:
var xmlDoc=document.implementation.createDocument("ns","root",null) |
The first parameter, ns, defines the namespace used for the XML document. The second parameter, root, is the XML root element in the XML file. The third parameter, null, is always null because it is not implemented yet.
The following code loads an existing XML document ("note.xml") into Mozillas' XML parser:
<script type="text/javascript">
var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.load("note.xml");
...
...
...
</script> |
The first line of the script above creates an instance of the XML parser. The second line tells the parser to load an XML document called "note.xml".
Loading an XML File - A Cross browser Example
The following example is a cross browser example that loads an existing XML document ("note.xml") into the XML parser:
<html>
<head>
<script type="text/javascript">
var xmlDoc
function loadXML()
{
//load xml file
// code for IE
if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load("note.xml");
getmessage()
}
// code for Mozilla, etc.
else if (document.implementation &&
document.implementation.createDocument)
{
xmlDoc= document.implementation.createDocument("","",null);
xmlDoc.load("note.xml");
xmlDoc.onload=getmessage
}
else
{
alert('Your browser cannot handle this script');
}
}function getmessage()
{
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].firstChild.nodeValue
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].firstChild.nodeValue
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].firstChild.nodeValue
}
</script>
</head><body onload="loadXML()" bgcolor="yellow"> <h1>W3Schools Internal Note</h1> <p><b>To:</b> <span id="to"></span><br /> <b>From:</b> <span id="from"></span> <hr /> <b>Message:</b> <span id="message"></span> </p> </body> </html> |
Try it yourself
Loading XML Text Into the Parser
Internet Explorer supports two ways of loading XML into a document object: the load() method and the loadXML() method. The load() method loads an XML file and the loadXML() method loads a text string that contains XML code.
The following code loads a text string into Microsoft's XML parser:
<script type="text/javascript"> var txt="<note>" txt=txt+"<to>Tove</to><from>Jani</from>" txt=txt+"<heading>Reminder</heading>" txt=txt+"<body>Don't forget me this weekend!</body>" txt=txt+"</note>" var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.loadXML(txt)
...
...
...</script> |
If you have Internet Explorer, you can try it yourself.
]]>
摘要:
本文ҎBJUG maillist讨论整理Q取自Buffalo|站Q在此对Michael的A献表C感谢！文中引用的评Z表示个h观点Q供大家作ؓ技术参考。先敬佩Michael一个，能做到这PMichael付出了很多。下文简单比较一下Buffalo和DWRQ两者的思\基本cMQ有很多共性的东西。ȝ看来QBuffalo能满_本的需要，但DWR已经在整体系l结构上有了更多优势...作者：cleverpig
声明Q文中引用的评论仅表CZ点，供大家作为技术参考?/span>
开言Q?/span>
本文ҎBJUG maillist讨论整理Q取?a target="_new">Buffalo|站Q在此对Michael的A献表C感谢！文中引用的评Z表示个h观点Q供大家作ؓ技术参考。先敬佩Michael一个，能做到这PMichael付出了很多。下文简单比较一下Buffalo和DWRQ两者的思\基本cMQ有很多共性的东西。ȝ看来QBuffalo能满_本的需要，但DWR已经在整体系l结构上有了更多优势。框架的生命周期是有限的Q如果不能与时俱q，迟早面临被淘汰的局面?br />
版权声明QQ何获得Matrix授权的网站，转蝲时请务必保留以下作者信息和链接
作?cleverpig;cleverpig
原文:http://www.matrix.org.cn/resource/article/2006-10-18/Buffalo+DWR_4ebd1e01-5e90-11db-a5c2-7f23a8944cb0.html
关键?buffalo,dwr,ajax,比较
一、两个Ajax框架Q?/span>
Buffalo是一个ؓjava web目而设计的轻量UAJAX框架。它是开源的QApache License 2.0Q，其功能强大且易用。主要解军_j2ee ajax开发中的常见问题。它承诺为开发者和最l用户都能受益。最重要的Buffalo的作者Michael Chen是位中国开发者，他就生活在北京?br />
DWR是一个Java开源库Q帮助你实现Ajax|站。它可以让你在浏览器中的Javascript代码调用Web服务器上的JavaQ就像在Java代码在览器中一栗DWR会根据你的Javacd态的生成Javascript代码。这些代码的力是让你感觉整个Ajax调用都是在浏览器上发生的Q但事实上是服务器执行了q些代码QDWR负责数据的传递和转换?br />
二、共性：
支持Spring集成Q?/span>均支持?br />
使用一个Servlet来接收所有的AJAXhQ?/span>
Buffalo使用ApplicationServlet<———?gt;DWR使用DWRServlet?br />
使用XMLHttpRequest + JavaScript 传输数据Q?/span>
Buffalo使用buffalo.js<———?gt;DWR使用dwr.js & util.js?br />
在Java和Javascript之间转换数据Q?/span>
Buffalo使用marshallingContext<———?gt;DWR使用Converter?br />
协议Q?/span>
Buffalo?.2.x之前采用burlap, Buffalo解析大数据量可能会比较慢Q然而可以适用于多U服务器端和客户端，q且burlap协议的完整性和支持的数据类型更加丰富?.0开始采用自定义的基于xml的协议（来自burlapQ做了更适合web的修改）Qƈ自行~写了解析器Q性能更高?br />
DWR使用自定义的单文本协议?br />
三、BuffaloҎ：
1. ZprototypeQ?/span>如果你的AJAX应用也是ZprototypeQ那么可以减重复加载prototype的带宽，q且获得相当一致的~程概念?br />
2. BindQ?/span>提供了对l果数据的处理，直接数据绑定到面对象q展C，q是一个动人的Ҏ。（DWR在Util.js中也提供了一些方法来化数据的展示Q但不如 Buffalo做的更多? ?.0中，Bind能力更加强大Q能够将值直接绑定到表单元素、表根{DIV/Span、甚x个表单上。关键是q种l定是无侵入q且与buffalo 整体l构完全整合Q对外表现只有一个简单的buffalo.bindReply或者Buffalo.Bind.bind卛_。http://buffalo.sourceforge.net/binding.html有一些描q?br />
3. 序列化：Buffalo支持L对象QQ意深度，L数据l构的java到javascript以及javascript到java的双向序列化。ƈ且支持引用。这里有完整的协议说明。由于文档和演示不充分，很多Z为buffalo不支持Q意对象了 ~
4. 生命周期对象讉KQ?/span>1.2.4之前需要承一个BuffaloService,
?.2.4开始就不需要承了Q引入了U程安全的BuffaloContext对象Q只需要通过BuffaloContext.getContext()卛_获得一个线E安全的引用Qƈ且对Request的各U属性进行操作。更方便的是Q?br />
Map BuffaloContext.getContext.getSession()
Map BuffaloContext.getContext.getApplication()
Map BuffaloContext.getContext.getCookie()
卛_获得session/application/cookie的Map,操作q些Map卛_获得对这些生命周期的各种变量q行查询和更新。这个特性参考了webwork中ActionContext的设计?br />
5. 对Collection/Array的模p处理：buffalo中提供了对Collection/Array对象的模p识别能力。例如：服务器端有一个方法需要List参数Q客L传递过M个javascript数组可以了Q不需要费心的l装对象。buffalo通过q些很细的地方来提高程序员生力?br />
6. 客户端组装对象：据报告DWR只支持简单数据类型作为参数在客户端传入。buffalo支持在客Ll装对象Q甚臛_以直接将整个表单序列化ؓ一个对象作为参Cl远E客L。DWR协议天生不Q这斚wQ我猜想它完全没有能力?br />
7. 寚w载方法的处理能力Q?/span>׃java与javascript之间cd的不匚wQDWR的代码生成无法对重蝲Ҏq行处理。例如，sum(double,double), sum(int, int) DWR很可能不知道你要调用哪一个。从2.0开始buffalo支持了对重蝲的处理?br />
四、DWRҎ：
1. 支持BatchQ?/span>可以多个Service函数调用攑֜一个XMLHttpRequesth中完成?br />
Michael Chen评论Q我一直认不是一个好的实c在客户端发起多个请求ƈ获得响应除了获得~程的复杂外Q还增加了服务器端设计service的自由度。这U方式感觉上更鼓׃ؓq程调用设计l粒度的服务、将l装逻辑攑֜客户端。这U设计风格我不太喜欢Q因此batch也一直没有考虑实现Q虽然实C太麻烦?br />
2. ConverterQ?/span>可以转换Lcd的Java对象到JavaScript,q允许直接用。例如：Customercd含一个address变量Q当AjaxCallq回Customer对象的时候，可以直接在Javascript中用customer.address来获得Address的信息?br />
3. HttpServletQ?/span>支持在被调用的ServiceҎ中获得HttpServletRequest和HttpServletResponse对象Q这样可以访问当前Session中的数据?br />
4. 允许Expose部分函数和属性?/span>(Buffalo无限Ӟ可以讉KService中的L函数?
Michael Chen评论: q个我也考虑q?..DWR的代码生成机制得它不得不通过q种方式减小些流量。Buffalo如果惛_现这个特性也不是不行Q只是我觉得Q既?Service辛辛苦苦实现了，q需要通过q种方式来让别h不能用么Q况且buffalo没有代码生成Q无Z暴露多少Ҏ量都是一L。考虑到实际情况，buffalo没有实现q个Ҏ?br />
5. DWR2.0中提ZReverse AjaxQ?/span>提供在Java代码中来处理面上元素的功能?br />
Michael Chen评论: q个东东...也还是代码生成的trick...然而我的态度是javascript与java同样重要的，因此不会让代码生成类的东西破坏javascript的整体性?br />
五、相兌源：
在过ȝ两年_baffalo的开发者拥有值得兴奋的积极反馈：buffalo非常适于在java web目的ajax开发。ؓ了帮助更多的用户更好C用buffaloQ他们期待你的帮助：发布文档、bug报告和bug修正{?br />
baffalo Maillist: buffalo-users@lists.sourceforge.net
baffalo 论坛:http://groups.google.com/group/amowa
cleverpig写的Buffalo的最佛_?/a>
]]>
q日学习了一下AJAXQ照做了几个例子Q感觉比较新奇?/p>
W一个就是自动完成的功能即Autocomplete,具体的例子可以在q里看：http://www.b2c-battery.co.uk
在Search框内输入一个品型P可以看见效果了?/p>
q里用到了一个开源的代码Q?a >AutoAssist Q有兴趣的可以看一下?/p>
以下Z码片断：
index.htm
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/autoassist.js"></script>
<link rel="stylesheet" type="text/css" href="styles/autoassist.css"/>
<div>
<input type="text" name="keyword" id="keyword"/>
<script type="text/javascript">
Event.observe(window, "load", function() {
var aa = new AutoAssist("keyword", function() {
return "forCSV.php?q=" + this.txtBox.value;
});
});
</script>
</div>
不知道ؓ什么不能用keywords做文本框的名字，我试了很久，后来q是用keyword,搞得q要修改原代码?/p>
forCSV.php
<?php
$keyword = $_GET['q'];
$count = 0;
$handle = fopen("products.csv", "r");
while (($data = fgetcsv($handle, 1000)) !== FALSE) {
if (preg_match("/$keyword/i", $data[0])) {
if ($count++ > 10) { break; }
?>
<div onSelect="this.txtBox.value='<?php echo $data[0]; ?>';">
<?php echo $data[0]; ?>
</div>
<?php
}
}
fclose($handle);
if ($count == 0) {
?>
: (, nothing found.
<?php
}
?>
原来的例子中的CSV文g是根据\t来分隔的Q我们也可以用空格或其它的来分隔Q这取决于你的数据结构?/p>
当然你也可以不读文gQ改从数据库里读资料Q就不再废话了?br />
效果囑֦下：
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=635858
]]>
本期文章介绍了一位客串的专栏作家Q同时也是我的朋友和同事 Dethe Elza。Dethe 在利?XML q行 Web 应用E序开发方面经验丰富，在此Q我要感谢他Ҏ在介l?DOM ?ECMAScript q行 XML ~程q一斚w的帮助。请密切x本专栏，以了?Dethe 的更多专栏文章?—?David Mertz
DOM 是处?XML ?HTML 的标?API 之一。由于它占用内存大、速度慢，q且冗长Q所以经常受Ch们的指责。尽如此，对于很多应用E序来说Q它仍然是最佳选择Q而且?XML 的另一个主?API —?SAX 无疑要简单得多。DOM 正逐渐出现在一些工具中Q比?Web 览器、SVG 览器、OpenOfficeQ等{?/p>
DOM 很好Q因为它是一U标准，q且被广泛地实现Q同时也内置到其他标准中。作为标准，它对数据的处理与~程语言无关Q这可能是优点，也可能是~点Q但臛_使我们处理数据的方式变得一_。DOM 现在不仅内置?Web 览器，而且也成多基?XML 的规范的一部分。既然它已经成ؓ您的工具的一部分Qƈ且或许您偶尔q会使用它，我想现在应该充分利用它给我们带来的功能了?/p>
在?DOM 一D|间后Q您会看到Ş成了一些模?—?您想要反复做的事情。快h式可以帮助您处理冗长?DOMQƈ创徏自解释的、优雅的代码。这里收集了一些我l常使用的技巧和诀H，q有一?JavaScript CZ?/p>
W一个诀H就是“没有诀H”。DOM 有两U方法将孩子节点d到容器节点（常常是一?ElementQ也可能是一?Document ?DocumentFragmentQ：appendChild(node) ?insertBefore(node, referenceNode)。看hg~少了什么。假如我惛_一个参考节点后面插入或者由前新增（prependQ一个子节点Q新节点位于列表中的第一位）Q我该怎么做呢Q很多年以来Q我的解x法是~写下列函数Q?/p>
清单 1. 插入和由前新增的错误Ҏ
|
实际上，像清?1 一PinsertBefore() 函数已经被定义ؓQ在参考节点ؓI时q回?appendChild()。因此，您可以不使用上面的方法，而?清单 2 中的ҎQ或者蟩q它们仅使用内置函数Q?/p>
清单 2. 插入和由前新增的正确Ҏ
|
如果您刚刚接?DOM ~程Q有必要指出的是Q虽然您可以使多个指针指向一个节点，但该节点只能存在?DOM 树中的一个位|。因此，如果您想它插入到树中，没必要先它从树中移除，因ؓ它会自动被移除。当重新节Ҏ序时Q这U机制很方便Q仅需节Ҏ入到C|即可?/p>
Ҏq种机制Q若想交换两个相邻节点（UCؓ node1 ?node2Q的位置Q可以用下列方案之一Q?/p>
|
?/p>
|
|
|
Web 面中大量应用了 DOM。若讉K bookmarklets 站点Q参?参考资?/font>Q，您会发现很多有创意的短脚本，它们可以重新~排面Q提取链接，隐藏囄?Flash q告Q等{?/p>
但是Q因?Internet Explorer 没有定义 Node 接口帔RQ可以用于识别节点类型）Q所以您必须保在遗漏接口常量时Q首先ؓ Web ?DOM 脚本中定义接口常量?/p>
清单 3. 保节点被定?/b>
|
清单 4 展示如何提取包含在节点中的所有文本节点：
清单 4. 内部文本
|
|
|
|
Z常常抱?DOM 太过冗长Qƈ且简单的功能也需要编写大量代码。例如，如果您想创徏一个包含文本ƈ响应点击按钮?<div> 元素Q代码可能类gQ?/p>
清单 5. 创徏 <div> 的“O长之路?/b>
|
若频J按照这U方式创点，键入所有这些代码会使您很快疲惫不堪。必L更好的解x?—?实有这L解决ҎQ下面这个实用工具可以帮助您创徏元素、设|元素属性和风格Qƈd文本子节炏V除?name 参数Q其他参数都是可选的?/p>
清单 6. 函数 elem() 快捷方式
|
使用该快h式，您能够以更加z的Ҏ创徏 清单 5 中的 <div> 元素。注意，attrs ?style 参数是?JavaScript 文本对象而给出的?/p>
清单 7. 创徏 <div> 的简便方?/b>
|
在您惌快速创建大量复杂的 DHTML 对象Ӟq种实用工具可以节省您大量的旉。模式在q里是指，如果您有一U需要频J创建的特定?DOM l构Q则使用实用工具来创建它们。这不但减少了您~写的代码量Q而且也减了重复的剪切、粘贴代码（错误的罪祸首）Qƈ且在阅读代码时思\更加清晰?/p>
|
|
|
DOM 通常很难告诉您，按照文档的顺序，下一个节Ҏ什么。下面有一些实用工P可以帮助您在节点间前后移动：
清单 8. nextNode ?prevNode
|
|
|
|
有时候，您可能想要遍?DOMQ在每个节点调用函数或从每个节点q回一个倹{实际上Q由于这些想法非常具有普遍性，所?DOM Level 2 已经包含了一个称?DOM Traversal and Range 的扩展（P?DOM 所有节点定义了对象?APIQ，它用来ؓ DOM 中的所有节点应用函数和?DOM 中选择一个范围。因些函数没有在 Internet Explorer 中定义（臛_目前是这PQ所以您可以使用 nextNode() 来做一些类似的事情?/p>
在这里，我们的想法是创徏一些简单、普通的工具Q然后以不同的方式组装它们来辑ֈ预期的效果。如果您很熟悉函数式~程Q这看v来会很亲切。Beyond JS 库（参阅 参考资?/font>Q将此理念发扬光大?/p>
清单 9. 函数?DOM 实用工具
|
清单 9 包含?4 个基本工兗?code>listNodes() ?listNodesReversed() 函数可以扩展C个可选的长度Q这?Array ?slice() Ҏ效果cMQ我把这个作为留l您的练习。另一个需要注意的是，map() ?filter() 函数是完全通用的，用于处理M 列表Q不只是节点列表Q。现在，我向您展C它们的几种l合方式?/p>
清单 10. 使用函数式实用工?/b>
|
您可以用这些实用工h提取 ID、修Ҏ式、找到某U节点ƈU除Q等{。一?DOM Traversal and Range API 被广泛实玎ͼ您无需首先构徏列表Q就可以用它们修?DOM 树。它们不但功能强大，q且工作方式也与我在上面所的方式类伹{?/p>
注意Q核?DOM API q不能您将 XML 数据解析?DOMQ或者将 DOM 序列化ؓ XML。这些功能都定义?DOM Level 3 的扩展部分“Load and Save”，但它们还没有被完全实玎ͼ因此现在不要考虑q些。每个^収ͼ览器或其他专业 DOM 应用E序Q有自己?DOM ?XML 间{换的ҎQ但跨^台{换不在本文讨围之内?/p>
DOM q不是十分安全的工具 —?特别是?DOM API 创徏不能作ؓ XML 序列化的树时。绝对不要在同一个程序中混合使用 DOM1 非名U空?API ?DOM2 名称I间感知?APIQ例如，createElement ?createElementNSQ。如果您使用名称I间Q请量在根元素位置声明所有名U空_q且不要覆盖名称I间前缀Q否则情况会非常混ؕ。一般来_只要按照惯例Q就不会触发使您陷入ȝ的界情c?/p>
如果您一直?Internet Explorer ?innerText ?innerHTML q行解析Q那么您可以试试使用 elem() 函数。通过构徏cM的一些实用工P您会得到更多便利Qƈ且承了跨^C码的优越性。将q两U方法合用是非常p糕的?/p>
某些 Unicode 字符q没有包含在 XML 中。DOM 的实C您可以添加它们，但后果是无法序列化。这些字W包括大多数的控制字W和 Unicode 代理对（surrogate pairQ中的单个字W。只有您试图在文档中包含二进制数据时才会遇到q种情况Q但q是另一U{向（gotchaQ情c?/p>
|
|
|
我已l介l了 DOM 能做的很多事情，但是 DOMQ和 JavaScriptQ可以做的事情远不止q些。仔l研I、揣摩这些例子，看看是如何用它们来解决可能需要客L脚本、模板或专用 API 的问题?/p>
DOM 有自q局限性和~点Q但同时也拥有众多优点：它内|于很多应用E序中；无论使用 Java 技术、Python ?JavaScriptQ它都以相同方式工作Q它非常便于使用 SAXQ用上q的模板Q它使用h既简z又强大。越来越多的应用E序开始支?DOMQ这包括Z Mozilla 的应用程序、OpenOffice ?Blast Radius ?XMetaL。越来越多的规范需?DOMQƈ对它加以扩展Q例如，SVGQ，因此 DOM 时时d在您的w边。用这U被q泛部v的工Pl对是您的明Z举?/p>
|
|
|
- 您可以参阅本文在 developerWorks 全球站点上的 英文原文?br />
- 下蝲 JavaScript ?/font>Q它包含了上面的脚本和一个用于测试这些脚本的?试面?br />
- 直接讉K DOM 发源?—?W3C ?DOM 资源面 Q其中包含到所有与文档对象模型相关的标准的链接?br />
- 查看 Jesse Ruderman ?bookmarklets。虽?Ruderman 没有创造术语“bookmarkets”，但他攉了很多一的、简短的、书{似?JavaScriptQ用它们开?DOM 的巨大潜力，使您的浏览器可以为您带来更多帮助?br />
- 讉K Sjoerd Visscher ?Beyond JS 库，它提供了q远过我在q里提及的用于函数式~程的工兗如果您可以事物抽象ؓ函数Q那?JavaScript 会成ؓ您得心应手的工具?br />
- DOM API 的标准参考在 W3C。这里是 DOM2 ?JavaScript QECMAScriptQ映?/font> 的网址?br />
- 了解 AJAX Z么已l引起了q么大的反响。它使用了异步调用来使服务器实时升 Web 应用E序。您可以使用上述的许多技术，q?异步通信工具?br />
- 了解一?XML ~辑器和工具?XMetaL pdQ它们都支持 DOM API。它们由作者所在的公司 Blast Radius 开发?br />
- ?developerWorks ?Developer Bookstore 了解更多 XMl 相关的书c，其中包括 David Mertz ?Text Processing in Python一书?br />
- 了解如何才能成ؓ IBM 认证?XML 及相x术的开发h?/font>?br />
]]>
function SetPrintSettings() {
// -- advanced features
factory.printing.SetMarginMeasure(2) // measure margins in inches
factory.SetPageRange(false, 1, 3) // need pages from 1 to 3
factory.printing.printer = "HP DeskJet 870C"
factory.printing.copies = 2
factory.printing.collate = true
factory.printing.paperSize = "A4"
factory.printing.paperSource = "Manual feed"
// -- basic features
factory.printing.header = "This is MeadCo"
factory.printing.footer = "Advanced Printing by scriptX"
factory.printing.portrait = false
factory.printing.leftMargin = 1.0
factory.printing.topMargin = 1.0
factory.printing.rightMargin = 1.0
factory.printing.bottomMargin = 1.0
}
</script>
Q?Q?br /><script language="javascript">
function printsetup(){
// 打印面讄
wb.execwb(8,1);
}
function printpreview(){
// 打印面预览
wb.execwb(7,1);
}
function printit()
{
if (confirm(''定打印吗？'')) {
wb.execwb(6,6)
}
}
</script>
</head>
<body>
<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"
height=0 id=wb name=wb width=0></OBJECT>
<input type=button name=button_print value="打印"
onclick="javascript:printit()">
<input type=button name=button_setup value="打印面讄"
onclick="javascript:printsetup();">
<input type=button name=button_show value="打印预览"
onclick="javascript:printpreview();">
<input type=button name=button_fh value="关闭"
onclick="javascript:window.close();">
------------------------------------------------
关于q个lgq有其他的用法，列D如下Q?br />WebBrowser.ExecWB(1,1) 打开
Web.ExecWB(2,1) 关闭现在所有的IEH口Qƈ打开一个新H口
Web.ExecWB(4,1) 保存|页
Web.ExecWB(6,1) 打印
Web.ExecWB(7,1) 打印预览
Web.ExecWB(8,1) 打印面讄
Web.ExecWB(10,1) 查看面属性?br />Web.ExecWB(15,1) 好像是撤销Q有待确认?br />Web.ExecWB(17,1) 全选?br />Web.ExecWB(22,1) h
Web.ExecWB(45,1) 关闭H体无提C?/p>
2、分|半W?br /><HTML>
<HEAD>
<STYLE>
P {page-break-after: always}
</STYLE>
</HEAD>
<BODY>
<%while not rs.eof%>
<P><%=rs(0)%></P>
<%rs.movenext%>
<%wend%>
</BODY>
</HTML>
3、ASP面打印时如何去掉页面底部的路径和顶端的늠~号
Q?Qie的文?〉页面设|?〉讲里面的页眉和脚里面的东襉KLQ打印就不出来了。?br />Q?Q?lt;HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="YC">
<script language="VBscript">
dim hkey_root,hkey_path,hkey_key
hkey_root="HKEY_CURRENT_USER"
hkey_path="\Software\Microsoft\Internet Explorer\PageSetup"
''//讄|页打印的页眉页脚ؓI?br />function pagesetup_null()
on error resume next
Set RegWsh = CreateObject("Wscript.Shell")
hkey_key="\header"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,""
hkey_key="\footer"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,""
end function
''//讄|页打印的页眉页脚ؓ默认值?br />function pagesetup_default()
on error resume next
Set RegWsh = CreateObject("Wscript.Shell")
hkey_key="\header"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&w&b늠Q?amp;p/&P"
hkey_key="\footer"
RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&u&b&d"
end function
</script>
</HEAD>
<BODY>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/><p align=center>
<input type="button" value="清空늠" onclick=pagesetup_null()> <input type="button" value="恢复吗" onclick=pagesetup_default()><br/>
</p>
</BODY>
</HTML>
4、Q动打印
<script LANGUAGE=javascript>
function button1_onclick() {
var odoc=window.iframe1.document;
var r=odoc.body.createTextRange();
var stxt=r.htmlText;
alert(stxt)
var pwin=window.open("","print");
pwin.document.write(stxt);
pwin.print();
}
</script>
4、用FileSystemlg实现WEB应用中的本地特定打印
<script Language=VBscript>
function print_onclick //打印函数
dim label
label=document.printinfo.label.value //获得HTML面的数据?br />set objfs=CreateObject("scripting.FileSystemObject") //创徏FileSystemlg对象的实例?br />set objprinter=objfs.CreateTextFile ("LPT1:",true) //建立与打印机的连接?br />objprinter.Writeline("__________________________________") //输出打印的内容?br />objprinter.Writeline("| |")
objprinter.Writeline("| 您打印的数据是："&label& " |?
objprinter.Writeline("| |")
objprinter.Writeline("|_________________________________|")
objprinter.close //断开与打印机的连接?br />set objprinter=nothing
set objfs=nothing // 关闭FileSystemlg对象
end function
</script>
服务器端脚本Q?br /><%………?br />set conn=server.CreateObject ("adodb.connection")
conn.Open "DSN=name;UID=XXXX;PWD=XXXX;"
set rs=server.CreateObject("adodb.recordset")
rs.Open(“select ……?,conn,1,1
……?%> //与数据库q行交互
HTML面~码Q?br /><HTML>
………?br /><FORM ID=printinfo NAME="printinfo" >
<INPUT type="button" value="打印>>" id=print name=print > //调用打印函数
<INPUT type=hidden id=text1 name=label value=<%=……?>> //保存服务器端传来的数据?br />………?br /></HTML>
]]>
<!--var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM") //加蝲文档//doc.load("b.xml");//创徏文g?/span>var p = doc.createProcessingInstruction("xml","version='1.0' encoding='gb2312'"); //d文g?/span> doc.appendChild(p);//用于直接加蝲时获得根接点//var root = doc.documentElement;//两种方式创徏Ҏ?/span>// var root = doc.createElement("students"); var root = doc.createNode(1,"students",""); //创徏子接?/span> var n = doc.createNode(1,"ttyp",""); //指定子接Ҏ?/span> //n.text = " this is a test"; //创徏孙接?/span> var o = doc.createElement("sex"); o.text = "?/span>"; //指定其文?/span> //创徏属?/span> var r = doc.createAttribute("id"); r.value="test"; //d属?/span> n.setAttributeNode(r); //创徏W二个属性 ?/span> var r1 = doc.createAttribute("class"); r1.value="tt"; //d属?/span> n.setAttributeNode(r1); //删除W二个属?/span> n.removeAttribute("class"); //d孙接?/span> n.appendChild(o); //d文本接点 n.appendChild(doc.createTextNode("this is a text node.")); //d注释 n.appendChild(doc.createComment("this is a comment\n")); //d子接?/span> root.appendChild(n); //复制接点 var m = n.cloneNode(true); root.appendChild(m); //删除接点 root.removeChild(root.childNodes(0)); //创徏数据D?/span> var c = doc.createCDATASection("this is a cdata"); c.text = "hi,cdata"; //d数据D?/span> root.appendChild(c); //dҎ?/span> doc.appendChild(root); //查找接点 var a = doc.getElementsByTagName("ttyp"); //var a = doc.selectNodes("http://ttyp"); //昄Ҏ点的属?/span> for(var i= 0;i<a.length;i++)
{
alert(a[i].xml); for(var j=0;j<a[i].attributes.length;j++)
{ alert(a[i].attributes[j].name);
}
} //修改节点,利用XPATH定位节点 var b = doc.selectSingleNode("//ttyp/sex"); b.text = "?/span>"; //alert(doc.xml); //XML保存Q需要在服务端，客户端用FSOQ?/span> //doc.save(); //查看Ҏ点XML if(n) { alert(n.ownerDocument.xml); }//--></script>7.4、文档对象模型（DOMQ?br /> 文档对象模型QDOMQ是表示文档Q比如HTML和XMLQ和讉K、操作构成文档的各种元素的应用程序接口（APIQ。一般的Q支持Javascript的所有浏览器都支持DOM。本文所涉及的DOMQ是指W3C定义的标准的文档对象模型Q它以树形结构表CHTML和XML文档Q定义了遍历q个树和查、修Ҏ的节点的Ҏ和属性?br />
7.4.1、DOMg的HTML文档Q树
在DOMgQHTML跟XML一h一U树形结构的文档Q?lt;html>是根QrootQ节点，<head>?lt;title>?lt;body>?lt;html>的子QchildrenQ节点，互相之间是兄弟（siblingQ节点；<body>下面才是子节?lt;table>?lt;span>?lt;p>{等。如下图Q?
q个是不是跟XML的结构有点相似呢。不同的是，HTML文档的树形主要包含表C元素、标记的节点和表C文本串的节炏V?/p>7.4.2、HTML文档的节?br /> DOM下，HTML文档各个节点被视为各U类型的Node对象。每个Node对象都有自己的属性和ҎQ利用这些属性和Ҏ可以遍历整个文档树。由于HTML文档的复杂性，DOM定义了nodeType来表C点的cd。这里列出Node常用的几U节点类型：
| 接口 | nodeType帔R | nodeType?/td> | 备注 |
| Element | Node.ELEMENT_NODE | 1 | 元素节点 |
| Text | Node.TEXT_NODE | 3 | 文本节点 |
| Document | Node.DOCUMENT_NODE | 9 | document |
| Comment | Node.COMMENT_NODE | 8 | 注释的文?/td> |
| DocumentFragment | Node.DOCUMENT_FRAGMENT_NODE | 11 | document片断 |
| Attr | Node.ATTRIBUTE_NODE | 2 | 节点属?/td> |
DOM树的根节Ҏ个Document对象Q该对象的documentElement属性引用表C文档根元素的Element对象Q对于HTML文档Q这个就?lt;html>标记Q。Javascript操作HTML文档的时候，documentx向整个文档，<body>?lt;table>{节点类型即为Element。Commentcd的节点则是指文档的注释。具体节点类型的含义Q请参考《Javascript权威指南》，在此不赘q?/p>
Document定义的方法大多数是生产型ҎQ主要用于创建可以插入文档中的各U类型的节点。常用的DocumentҎ有：
| Ҏ | 描述 |
| createAttribute() | 用指定的名字创徏新的Attr节点?/td> |
| createComment() | 用指定的字符串创建新的Comment节点?/td> |
| createElement() | 用指定的标记名创建新的Element节点?/td> |
| createTextNode() | 用指定的文本创徏新的TextNode节点?/td> |
| getElementById() | q回文档中具有指定id属性的Element节点?/td> |
| getElementsByTagName() | q回文档中具有指定标记名的所有Element节点?/td> |
对于Element节点Q可以通过调用getAttribute()、setAttribute()、removeAttribute()Ҏ来查询、设|或者删除一个Element节点的性质Q比?lt;table>标记的border属性。下面列出Element常用的属性：
| 属?/td> | 描述 |
| tagName | 元素的标记名Uͼ比如<p>元素为P。HTML文档q回的tabName均ؓ大写?/td> |
Element常用的方法：
| Ҏ | 描述 |
| getAttribute() | 以字W串形式q回指定属性的倹{?/td> |
| getAttributeNode() | 以Attr节点的Ş式返回指定属性的倹{?/td> |
| getElementsByTabName() | q回一个Node数组Q包含具有指定标记名的所有Element节点的子孙节点，光序ؓ在文档中出现的顺序?/td> |
| hasAttribute() | 如果该元素具有指定名字的属性，则返回true?/td> |
| removeAttribute() | 从元素中删除指定的属性?/td> |
| removeAttributeNode() | 从元素的属性列表中删除指定的Attr节点?/td> |
| setAttribute() | 把指定的属性设|ؓ指定的字W串|如果该属性不存在则添加一个新属性?/td> |
| setAttributeNode() | 把指定的Attr节点d到该元素的属性列表中?/td> |
Attr对象代表文档元素的属性，有name、value{属性，可以通过Node接口的attributes属性或者调用Element接口的getAttributeNode()Ҏ来获取。不q，在大多数情况下，使用Element元素属性的最单方法是getAttribute()和setAttribute()两个ҎQ而不是Attr对象?
7.4.3、用DOM操作HTML文档Node对象定义了一pd属性和ҎQ来方便遍历整个文档。用parentNode属性和childNodes[]数组可以在文档树中上下移动；通过遍历childNodes[]数组或者用firstChild和nextSibling属性进行@环操作，也可以用lastChild和previousSiblingq行逆向循环操作Q也可以枚D指定节点的子节点。而调用appendChild()、insertBefore()、removeChild()、replaceChild()Ҏ可以改变一个节点的子节点从而改变文档树?
需要指出的是，childNodes[]的值实际上是一个NodeList对象。因此，可以通过遍历childNodes[]数组的每个元素，来枚举一个给定节点的所有子节点Q通过递归Q可以枚举树中的所有节炏V下表列ZNode对象的一些常用属性和ҎQ?/p>
Node对象常用属性：
| 属?/td> | 描述 |
| attributes | 如果该节Ҏ一个ElementQ则以NamedNodeMap形式q回该元素的属性?/td> |
| childNodes | 以Node[]的Ş式存攑ֽ前节点的子节炏V如果没有子节点Q则q回I数l?/td> |
| firstChild | 以Node的Ş式返回当前节点的W一个子节点。如果没有子节点Q则为null?/td> |
| lastChild | 以Node的Ş式返回当前节点的最后一个子节点。如果没有子节点Q则为null?/td> |
| nextSibling | 以Node的Ş式返回当前节点的兄弟下一个节炏V如果没有这L节点Q则q回null?/td> |
| nodeName | 节点的名字，Element节点则代表Element的标记名U?/td> |
| nodeType | 代表节点的类型?/td> |
| parentNode | 以Node的Ş式返回当前节点的父节炏V如果没有父节点Q则为null?/td> |
| previousSibling | 以Node的Ş式返回紧挨当前节炏V位于它之前的兄弟节炏V如果没有这L节点Q则q回null?/td> |
Node对象常用ҎQ?/p>
| Ҏ | 描述 |
| appendChild() | 通过把一个节点增加到当前节点的childNodes[]l，l文档树增加节点?/td> |
| cloneNode() | 复制当前节点Q或者复制当前节点以及它的所有子孙节炏V?/td> |
| hasChildNodes() | 如果当前节点拥有子节点，则将q回true?/td> |
| insertBefore() | l文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在Q则删除之再插入到它的位|?/td> |
| removeChild() | 从文档树中删除ƈq回指定的子节点?/td> |
| replaceChild() | 从文档树中删除ƈq回指定的子节点Q用另一个节Ҏ换它?/td> |
接下来，让我们用上q的DOM应用~程接口Q来试着操作HTML文档?/p>
]]>
2通过JAVASCRIPT讄元素的样?br />3讄元素的CLASS属?br />4创徏输入元素
5向输入元素增加事件处理程?br />6创徏单选按?
- 1.
- <table id="MyTable>
- <tbody id="MyTableBody"></tbody>
- </table>
- var cell = documentcreateElement("td").appendChild(document.createTextNode("foo"));
- var row = document.createElement("tr").appendChild(cell);
- document.getElementById("MyTableBoyd").appendChild(row);
- 2.
- var spanElement = document.getElementById("myspan");
- //spanElement.setAttribute("style","font-weight:bold;color:red");
- spanElement.style.cssText="font-weight:bold;color:red";
- 3.
- element.setAttribute("class","stylename");//非IE
- element.setAttribute("className","stylename");//IE
- 4.
- var button = document.createElement("input");
- button.setAttribute("type","button");
- document.getElementById("form").appendChild(button);
- 5.
- var element = document.getElementById("ee");
- element.onclick=function(){todo();};
- 6.
- var ration = document.createElement("<input type='radio' name='radioa' value='checked'>);//ie
- vat radion = document.createElement("input");
- radion .setAttribute("type","radio");
- radion.setAttribute("name","radionsss");
- radion.setAttribute("value","checked");
]]>