BlogJava-前端工程师-Becket-随笔分类-网页web前端技术

HTML5+CSS3 W3C规范<<中文版>>参考手册(提供下载)

becket_zheng — Fri, 02 Apr 2010 00:45:00 GMT

HTML5+CSS3 W3C规范<<中文版>>参考手册(提供下载)

很多人说现在IE浏览器不支持.研究没用.但我觉的.就算IE9出来了,IE6,7,8还是不支持.. 所以现在和以后效果是一样的.都是要搞些兼容性

以下是参考手册下载地址 : http://files.cnblogs.com/Capricornus/css3.0html5.rar

各大浏览器 CSS3 和 HTML5 兼容速查表

http://news.csdn.net/a/20100401/217692.html

深入了解 HTML 5资源

http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K701.aspx

以下是截图:

becket_zheng 2010-04-02 08:45 发表评论

IE6/IE7/FF的CSS hack 浏览器兼容总

becket_zheng — Tue, 23 Mar 2010 02:10:00 GMT

IE6/IE7/FF的CSS hack 浏览器兼容总结

2010-01-23 15:25

由于不同的浏览器对CSS的支持及解析结果不一样，处理的优先级不一样。针对不同的浏览器来写不同的CSS达到在不同浏览器下显示想要的效果就是css hack。先贴两个直观的对比图：

再贴一段代码：

#bgcolor {
            background:red !important; /* Firefox 等其他浏览器 */
            background:blue; /* IE6 */
            }
            *+html #bgcolor {
            background:green !important; /* IE7 */
            }

IE6 不认 !important, 也不认 *+html. 所以 IE6 只能是 blue.
IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是 red, blue 和 green, 但 green 的优先度最高.
Firefox 和其他浏览器都认 !important. !important 优先, Firefox 可以是 red 和 blue, 但 red 优先度高。

下面以一个实际需求进行不同写法的实现：

针对下面的html代码：

Text

　　写CSS代码，分别在IE6、IE7、FF下显示不同的效果：

　　简单说明一下：IE6的划线是在下边、IE7是中间、FF是上边。因为IE6兼容性最差(同时下划线_只有ie6支持)，IE7标准居中，FF标准最高。

　　第一种方法：

div{　
　　　　text-decoration:overline;　
　　　　*text-decoration:line-through;　
　　　　_text-decoration:underline;　
}

　　原理是：

　　简单地说，就是利用下面几点：

　　1.各个浏览器解析CSS的语法不尽相同

　　2.CSS语法规则：后面的属性覆盖前面的属性

　　而这里仅仅是利用了_（IE6的专属）和*（用于IE6和IE7），接下来利用一下!important语法。

　　第二种方法：

　　!important语法针对的是“后面的属性覆盖前面的属性”这一语法，也就是说标识了!important的属性，是不被后面的相同属性所覆盖的，而IE6不认识这个，导致其他浏览器很容易根据这点“欺负”IE6：

div{　
　　　　text-decoration:overline;　
　　　　*text-decoration:line-through!important;　
　　　　*text-decoration:underline;　
}

　　原理：

　　1.FF不认识*，但IE6/IE7认识

　　2.IE6不认识!imprtant，但IE7认识

　　注意，顺序不能换，如果改为下面这样：

text-decoration:overline;　
*text-decoration:underline;　
*text-decoration:line-through　!important;

　　IE6和IE7都一样了。

　　IE6是支持!important属性的（该属性为CSS1语法，支持IE4+），上面的写法只是IE6的一个bug（同一个{}里面，相同属性取后者），若想要IE6支持，一般的做法是将CSS拆分，比如：

div{
　　　　text-decoration:line-through!important;　
}
div{
　　　　text-decoration:underline;
}

　　这样，在IE6下，显示的是line-through效果。

　　第三种方法：

　　先看一个表

　　为了方便记忆，在上面那个hack表增加了“针对对象”一列（关于*旁边有无空格均可，可以理解其同时也作为分隔符），需要补充的是IE7的专属写法：*+html div

　　在此就利用IE6和IE7的专属写法：

div{　
　　　　text-decoration:overline;　
}　
*+html　div{　
　　　　text-decoration:line-through;　
}　
*　html　div{　
　　　　text-decoration:underline;　
}

　　第四种方法：

div{　
　　　　text-decoration:overline;　
}　
html*div{　
　　　　text-decoration:line-through　!important;　
　　　　text-decoration:underline;　
}

　　原理：利用IE6/IE7的共同专属 + IE6不懂!important

　　第五种方法：

body>div{　
　　　　text-decoration:overline;　
　　　　*text-decoration:line-through;　
}　
div{　
　　　　text-decoration:underline;　
}

　　原理：利用IE6不懂>这种选择符 + 针对属性的hack。

另外还有/**/或者@important等方法。

为了通过W3C验证工具，需要把hack样式放到不同文件中处理。一个是针对所有浏览器的, 一个只为 IE 服务. 将所有符合 W3C 的代码写到一个里面去, 而一些 IE 中必须的, 又不能通过 W3C 验证的代码 (如: cursor:hand;) 放到另一个文件中, 再用下面的方法导入.

becket_zheng 2010-03-23 10:10 发表评论

Web 调试代理软件Fiddler 一个http调试代理，能够记录所有的你电脑和互联网之间的http通讯

becket_zheng — Tue, 23 Mar 2010 01:41:00 GMT

微软的Fiddler 包含一个简单却功能强大的基于JScript .NET 事件脚本子系统，他非常灵活性非常棒，可以支持众多的http调试任务。Fiddler 是用C#写出来的。它还是一个http调试代理，它能够记录所有的你电脑和互联网之间的http通讯，Fiddler 可以也可以让你检查所有的http通讯，设置断点，以及Fiddle 所有的“进出”的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思）。 Fiddler 要比其他的网络调试器要更加简单，因为它仅仅暴露http通讯还有提供一个用户友好的格式。

　　Fiddler 包含一个简单却功能强大的基于JScript .NET 事件脚本子系统，他非常灵活性非常棒，可以支持众多的http调试任务。Fiddler 是用C#写出来的。

　　用户可以加入一个Inspector插件对象，来使用.net下的任何语言来编写Fiddler扩展。RequestInspectors 和 ResponseInspectors提供一个格式规范的，或者是被指定的（用户自定义）Http请求和响应视图。

　　通过显示所有的Http通讯，Fiddler可以轻松的演示哪些用来生成一个页面，通过统计页面（就是Fiddler左边的那个大框）用户可以很轻松的使用多选，来得到一个WEB页面的“总重量”（页面文件以及相关js,css等）你也可以很轻松得看到你请求的某个页面，总共请求了多少次，以及多少字节被转化了。

　　另外，通过暴露HTTP头，用户可以看见哪些页面被允许在客户端或者是代理端进行缓存。如果要是一个响应没有包含Cache-Control 头，那么他就不会被缓存在客户端。

Fiddler 是微软出品的一款 Web 调试代理软件，它记录您的电脑和 Internet 之间的 HTTP(S) 数据流。Fiddler 允许你查看所有的 HTTP(S) 数据流，并且可以设置断点，改变请求和回应的数据。

Fiddler 是一款免费软件，可以对来自任意浏览器的访问的调试。

Fiddler 目前可以调试并解密 HTTPS 数据流。

下载 Fiddler

您可以在本站的工具中下载 Fiddler2，也可以 www.fiddlertool.com 或 www.fiddler2.com 进行下载。

安装 Fiddler

安装 Fiddler 比较简单，双击即可安装，安装完后可以在“开始”、“程序”中找到 Fiddler。

使用 Fiddler: 目前没有中文版，下面就 Fiddler 的使用作个介绍。

首先对主界面作一个介绍，请点击查看大图。

点击查看大图

性能和数据监测

开启抓取后，我们访问一个网页，在左边列表框中就可以得到相应的会话列表。注意，这里访问网页不能使用回送地址，如：127.0.0.1 或 localhost，但可以利用本机的 IP 访问，如：192.168.0.1 等。

选中一个会话：

在 Performance Statistics 中可以看到数据在互联网上经过的路径。
在 Session Inspector 中可以看到会话请求（发送）和回应（接收）的数据，可以分各部分查看。

自动响应

这里是使用用户自定义的一个文件来响应用户的请求，举例说明：

创建一个文本文件，存放于 C:\foo.txt。
在 AutoResponder 中选中 Enable automatic responses。
添加一个规则，设定一个 URI，响应一项填写：C:\foo.txt。
此时我们在浏览器中访问这个 URI 时，得到的就不是 URI 的内容，而是 C:\foo.txt 的内容。

创建请求

切换到 Request Builder 标签，输入一个网址，在 Request Headers 中输入：

User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; SailBrowser 2005; .NET CLR 2.0.50727)
Referer: http://www.fiddlertool.com/

此时我们再打开 Web 日志（IIS 的日志通常位于 C:\WINDOWS\system32\Logfiles，某些情况下日志可能不会立即在文件中表现出来），可以看到：日志中记录的 IE 版本是 8.0，来源（在 ASP 中可以用 Request.ServerVariables("HTTP_REFERER") 获得该值）是 http://www.fiddlertool.com/。

官方网站 http://www.fiddler2.com/

下载Fiddler
--------------------------------------------------------------------------------

HTTP调试工具：Fiddler介绍一（翻译）(原文地址：http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwebgen/html/IE_IntroFiddler.asp)

这个工具我已经使用比较长时间了，对我的帮助也挺大，今天我翻译的微软的文章，让更多的朋友都来了解这个不错的工具，也是我第一次翻译文章，不恰当之处请大家大家多多指正。
介绍：

你是不是曾经疑惑过你的web程序和IE是如何交互的？你是不是遇到过一些奇怪的而你又无法解决的性能瓶颈？你是不是对那些发送给服务器端的cookie 和那些你下载下来的被标记为可缓存的内容感到好奇？

Fiddler官方网站及下载地址：http://www.fiddlertool.com/Fiddler/dev/

微软的Fiddler能够帮助你回答以上的问题，不但如此，它还是一个http调试代理，它能够记录所有的你电脑和互联网之间的http通讯，Fiddler 可以也可以让你检查所有的http通讯，设置断点，以及Fiddle 所有的“进出”的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思）。 Fiddler 要比其他的网络调试器要更加简单，因为它仅仅暴露http通讯还有提供一个用户友好的格式。
Fiddler 包含一个简单却功能强大的基于JScript .NET 事件脚本子系统，他非常灵活性非常棒，可以支持众多的http调试任务。Fiddler 是用C#写出来的。
。。。。。接下来是一大段废话，关于如何安装的，只要一路next，就可以了。这段话我就跳过，直接切入正题了。

Running Fiddler

当你启动了Fiddler，程序将会把自己作为一个微软互联网服务的系统代理中去。你可以通过检查代理设置对话框来验证Fiddler是被正确地截取了web请求。操作是这样的：点击IE设置，工具，局域网设置，最后点击高级。

作为系统代理，所有的来自微软互联网服务（WinInet）的http请求再到达目标Web服务器的之前都会经过Fiddle，同样的，所有的Http响应都会在返回客户端之前流经Fiddler。这样，就能明白Fiddler很多作用了吧！

当你关闭Fiddler的时候，它就会自动从系统注册表中移出，换句话说，当你关闭了Fiddler后，不会占着茅坑不拉屎。

下面，是一个Fillder的用户界面，大家可以参考参考其功能。

用Fiddler来做性能测试

HTTP统计视图通过显示所有的Http通讯，Fiddler可以轻松的演示哪些用来生成一个页面，通过统计页面（就是Fiddler左边的那个大框）用户可以很轻松的使用多选，来得到一个WEB页面的“总重量”（页面文件以及相关js,css等）你也可以很轻松得看到你请求的某个页面，总共请求了多少次，以及多少字节被转化了。

另外，通过暴露HTTP头，用户可以看见哪些页面被允许在客户端或者是代理端进行缓存。如果要是一个响应没有包含Cache-Control 头，那么他就不会被缓存在客户端。

用Fiddler来调试

Fiddler支持断点调试概念，当你在软件的菜单—rules—automatic breakpoints选项选择beforerequest,或者当这些请求或响应属性能够跟目标的标准相匹配，Fiddler就能够暂停Http通讯，情切允许修改请求和响应。这种功能对于安全测试是非常有用的，当然也可以用来做一般的功能测试，因为所有的代码路径都可以用来演习。

Session检查用户可以在BuilderPage项种来以手工的方式来创建一个HTTP请求（即在 Fiddler右侧的tab的第三个，RequestBUILDER），或者可以使用拖拽操作从Session列表中来移动一个已经存在的请求到 builder page 来再次执行这个请求。。。
Fiddler 扩展Fiddler可以使用 .net framework来对它进行扩展。有2种为Fiddler扩展准备的基本机制：

自定义规则，和规则检查。

使用脚本化的规则来扩展Fiddler
Fiddler支持JScript .NET引擎，它可以允许用户自动地修改Http请求和响应。这个引擎能够在可视化界面修改在FiddlerUI中的Session，可以从列表中提取你感兴趣的错误，也可以移除你不感兴趣的Session。

以下的示例代码演示当cookie被加载的时候把界面变成紫色。

static function OnBeforeRequest(oSession:Fiddler.Session)

if (oSession.oRequest.headers.Exists("Cookie")){

oSession["ui-color"] = "purple";

oSession["ui-bold"] = "cookie";

通过加入Inspectors来扩展Fiddler

默认安装中，Fiddler加入了一下的Inspectors：

Request Inspectors

[RW] Headers—Shows request headers and status.

[RW] TextView—Shows the request body in a text box. （原始的请求body视图）

[RW] HexView—Shows the request body in a hexadecimal view. （body的16进制视图）

[RO] XML—Shows the request body as an XML DOM in a tree view.（以XML方式展示请求）

Response Inspectors

[RW] Transformer—Removes GZip, DEFLATE, and CHUNKED encodings for easier debugging.

[RW] Headers—Shows response headers and status.

[RW] TextView—Shows the response body in a text box.

[RW] HexView—Shows the response body in a hexadecimal view. （16进制视图）

[RO] ImageView—Shows the response body as an Image. Supports all .NET image formats.

[RO] XML—Shows the response body as an XML DOM in a tree view.

[RO] Privacy—Explains the P3P statement in the response headers, if present.（如果在响应头中有关于隐私策略的说明就展示出来）

转自http://hi.baidu.com/zdz8207/blog/item/6542fe1f503c4a0c304e15c4.html

becket_zheng 2010-03-23 09:41 发表评论

使用js获取QueryString

becket_zheng — Mon, 22 Mar 2010 07:40:00 GMT

摘要: 从网上看到一些使用js获取QueryString的方法，但用起来不是很理想，所以决定自己写一个。主要原理是使用正则表达式匹配location.search中的字符串。三个主要方法：方法说明 ... 阅读全文

becket_zheng 2010-03-22 15:40 发表评论

JSON in .Net

becket_zheng — Mon, 22 Mar 2010 07:31:00 GMT

摘要: 本文PDF下载本文结构 JSON简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它易于编程人员阅读和编写，同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。JSON采用完全独立于语言的... 阅读全文

becket_zheng 2010-03-22 15:31 发表评论

使用Google CDN服务提供的jQuery库

becket_zheng — Mon, 22 Mar 2010 07:24:00 GMT

jQuery，让我们控制页面元素更加方便快捷，让我们在编写js的时候不需要过多地考虑浏览器特性问题了。但是jQuery功能越强大，它本身的文件也越大。在做网站优化的时候,通常会通过优化js、css和图片文件能挤出来的几百k尺寸的下载量.

Google挺够意思，就提供了jQuery库，通过使用Google提供的jQuery库，Google的服务器和线路品质那自然是不在话下的。即提高了下载速度又减少了自己服务器的并发连接数。

用起来也很简单，直接在网页里引用Google服务器上的相关js文件就可以了。不过，如果引用多个js，就要插入多段的script。Google也提供了相应的办法，那就是google load。我们只需要在页面里引用一个js文件，就可以根据需要实时加载用到的js库了。

首先在页头部分加入以下这行代码：
< script type="text/javascript" src="http://www.google.com/jsapi">

加载jQuery，可以这样使用：
google.load("jquery","1.3.2");

这样我们就从Google的最近的CDN镜像上加载了jQuery 1.3.2版的js库，接下来就可以正常写js代码了。不过，即使是Google的CDN镜像，下载也毕竟是需要时间的，万一代码库还没有下载完而浏览器已经解释到了下面的代码了怎么办？我们可以设定在js库加载完以后才开始执行js：
google.setOnLoadCallback(function(){//要执行的代码});
更多有关google jsapi的相关介绍和文档，可以参考：google AJAX 库 API

除了jQuery,Google还提供供了以下这些js框架/库的API：
jQuery UI
Prototype
script.aculo.us
MooTools

becket_zheng 2010-03-22 15:24 发表评论

Google与Microsoft为jQuery,Prototype,MooTools等类库提供CDN服务

becket_zheng — Mon, 22 Mar 2010 07:20:00 GMT

以前在网站中都是这么引入jquery脚本库的：

有时还要引入其它比较大的脚本类库，如：Prototype，每次引入时柳永法(yongfa365)'Blog都得考虑：这么大的东西客户打开网页时要多郁闷啊。

现在好了，Google与Microsoft为jQuery,Prototype,MooTools等类库提供CDN服务，这样一来，不在客户在哪访问网站都是通过CDN访问这些脚本，提高了加载速度，减少了加载延迟并获得更好的缓存。
如：

推荐大家使用

C#中操作XML文件(读写改删全接触)-全了！

becket_zheng — Mon, 22 Mar 2010 03:18:00 GMT

已知有一个XML文件（bookstore.xml）如下：

xml version="1.0" encoding="gb2312"?>
<bookstore>
  <book genre="fantasy" ISBN="2-3631-4">
    <title>Oberon's Legacytitle>
    <author>Corets, Evaauthor>
    <price>5.95price>
  book>
bookstore>

操作

1、往节点中插入一个节点

XmlDocument xmlDoc = new XmlDocument();
xmlDoc.Load("bookstore.xml");
//xmlDoc.LoadXml("");
XmlNode root = xmlDoc.SelectSingleNode("bookstore");//查找
XmlElement xe1 = xmlDoc.CreateElement("book");//创建一个节点
xe1.SetAttribute("genre", "李赞红");//设置该节点genre属性
xe1.SetAttribute("ISBN", "2-3631-4");//设置该节点ISBN属性

XmlElement xesub1 = xmlDoc.CreateElement("title");
xesub1.InnerText = "CS从入门到精通";//设置文本节点
xe1.AppendChild(xesub1);//添加到节点中
XmlElement xesub2 = xmlDoc.CreateElement("author");
xesub2.InnerText = "候捷";
xe1.AppendChild(xesub2);
XmlElement xesub3 = xmlDoc.CreateElement("price");
xesub3.InnerText = "58.3";
xe1.AppendChild(xesub3);

root.AppendChild(xe1);//添加到节点中
xmlDoc.Save("bookstore.xml");

结果为：

xml version="1.0" encoding="gb2312"?>
<bookstore>
  <book genre="fantasy" ISBN="2-3631-4">
    <title>Oberon's Legacytitle>
    <author>Corets, Evaauthor>
    <price>5.95price>
  book>
  <book genre="李赞红" ISBN="2-3631-4">
    <title>CS从入门到精通title>
    <author>候捷author>
    <price>58.3price>
  book>
bookstore>

2.修改节点：将genre属性值为“李赞红“的节点的genre值改为“update李赞红”，将该节点的子节点的文本修改为“亚胜”。

XmlNodeList nodeList = xmlDoc.SelectSingleNode("bookstore").ChildNodes;//获取bookstore节点的所有子节点
foreach (XmlNode xn in nodeList)//遍历所有子节点
{
    XmlElement xe = (XmlElement)xn;//将子节点类型转换为XmlElement类型
    if (xe.GetAttribute("genre") == "李赞红")//如果genre属性值为“李赞红”
    {
        xe.SetAttribute("genre", "update李赞红");//则修改该属性为“update李赞红”

        XmlNodeList nls = xe.ChildNodes;//继续获取xe子节点的所有子节点
        foreach (XmlNode xn1 in nls)//遍历
        {
            XmlElement xe2 = (XmlElement)xn1;//转换类型
            if (xe2.Name == "author")//如果找到
            {
                xe2.InnerText = "亚胜";//则修改
                break;//找到退出来就可以了
            }
        }
        break;
    }
}

xmlDoc.Save("bookstore.xml");//保存。

结果：

xml version="1.0" encoding="gb2312"?>
<bookstore>
  <book genre="fantasy" ISBN="2-3631-4">
    <title>Oberon's Legacytitle>
    <author>Corets, Evaauthor>
    <price>5.95price>
  book>
  <book genre="update李赞红" ISBN="2-3631-4">
    <title>CS从入门到精通title>
    <author>亚胜author>
    <price>58.3price>
  book>
bookstore>

3、删除节点的genre属性，删除节点。

XmlNodeList xnl = xmlDoc.SelectSingleNode("bookstore").ChildNodes;

foreach (XmlNode xn in xnl)
{
    XmlElement xe = (XmlElement)xn;
    if (xe.GetAttribute("genre") == "fantasy")
    {
        xe.RemoveAttribute("genre");//删除genre属性
    }
    else if (xe.GetAttribute("genre") == "update李赞红")
    {
        xe.RemoveAll();//删除该节点的全部内容
    }
}
xmlDoc.Save("bookstore.xml");

结果

xml version="1.0" encoding="gb2312"?>
<bookstore>
  <book ISBN="2-3631-4">
    <title>Oberon's Legacytitle>
    <author>Corets, Evaauthor>
    <price>5.95price>
  book>
  <book>
  book>
bookstore>

4、显示所有数据。

XmlNode xn = xmlDoc.SelectSingleNode("bookstore");

XmlNodeList xnl = xn.ChildNodes;

foreach (XmlNode xnf in xnl)
{
    XmlElement xe = (XmlElement)xnf;
    Console.WriteLine(xe.GetAttribute("genre"));//显示属性值
    Console.WriteLine(xe.GetAttribute("ISBN"));

    XmlNodeList xnf1 = xe.ChildNodes;
    foreach (XmlNode xn2 in xnf1)
    {
        Console.WriteLine(xn2.InnerText);//显示子节点点文本
    }
}

参考资料来源：
http://www.yongfa365.com/item/CZhongCaoZuoXMLWenJianDuXieGaiShanQuanJieChuGenQiTaYuYanCaoZuoXMLChaBuDuoYiYang.html

becket_zheng 2010-03-22 11:18 发表评论

非常有用的JS事件功能(转)

becket_zheng — Sun, 28 Feb 2010 16:06:00 GMT

非常有用的JS事件功能(转)

1 >屏蔽功能类

1.1 屏蔽键盘所有键

1.2 屏蔽鼠标右键

在body标签里加上oncontextmenu=self.event.returnvalue=false

或者

function nocontextmenu()
{
    if(document.all) {
        event.cancelBubble=true;
        event.returnvalue=false;
        return false;
    }
}

或者

1.3 屏蔽 Ctrl+N、Shift+F10、F5刷新、退格键

1.4屏蔽浏览器右上角“最小化”“最大化”“关闭”键

function window.onbeforeunload()
{
  if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
  {
    window.event.returnvalue = "";
  }
}

或者使用全屏打开页面

注：在body标签里加上onbeforeunload="javascript:return false"（使不能关闭窗口）

1.5屏蔽F5键

1.6屏蔽IE后退按钮

在你链接的时候用

1.7屏蔽主窗口滚动条

在body标签里加上 style="overflow-y:hidden"

1.8 屏蔽拷屏,不断地清空剪贴板

在body标签里加上onload="setInterval('clipboardData.setData(\'Text\',\'\')',100)"

1.9 屏蔽网站的打印功能

1.10 屏蔽IE6.0 图片上自动出现的保存图标

方法一：

方法二：

1.11 屏蔽页中所有的script

2 >表单提交验证类

2.1 表单项不能为空

2.2 比较两个表单项的值是否相同

2.3 表单项只能为数字和"_",用于电话/银行帐号验证上,可扩展到域名注册等

2.4 表单项输入数值/长度限定

2.5 中文/英文/数字/邮件地址合法性判断

2.6 限定表单项不能输入的字符

becket_zheng 2010-03-01 00:06 发表评论

无阻塞下载脚本

becket_zheng — Sun, 28 Feb 2010 15:54:00 GMT

无阻塞下载脚本

原文作者：Nicholas C. Zakas
原文链接：Loading JavaScript without blocking
译文：
我看了Steve Souder的博文scripts without blocking 在这篇博文中他提到动态的创建一个script元素同时为他分配一个src的属性会促成下载这个js文件而不阻塞其他的下载或者页面的其他进程。他的博文缺少一个如何实现这种方式的例子。所以我想我。我想大多数开发者试图使用javascript脚本库来实现这种需求（我首先想到了YUI的Get utility）但是很有必要讨论一下这个技术的本质。
无阻塞的加载脚本的基本实现方式非常直接。
var scripts=document.createElement('script');
            script.type="text/javascript";
            script.src="file.js";
            document.body.appendChild(scripts);
看起来就是这么的简单，你创建了一个新的dom元素，给他它分配相应的属性同时把它添加到页面中。这段代码有两个方面需要注意。javascript文件直到script节点添加到document中才开始下载。这一点和动态的创建一个img元素，为这个元素分配一个src属性这时候加载已经开始即使该节点没有添加到document中。第二点需要注意的是你既能在中添加该script节点又能在中添加。这个无关紧要。这一切的结果就是动态的加载一个javascript文件而不阻塞页面。

当然，你可能同时也想知道什么时候 javascript文件完全被加载好和执行，同时这也是事情复杂之所在。大多数modern的浏览器（firefox ,safari,opera,chrome）对于scrpt元素有一个load的事件句柄。这是一个确定脚本是否加载好的简单方式。
//Firefox, Safari, Chrome, and Opera
            var scripts=document.createElement('script');
            script.type="text/javascript";
            script.src="file.js";

            scripts.onload=function(){
                alert('Script is loaded!')
            }
document.body.appendChild(scripts);
真正的问题出现在ie中，ie使用readyState属性表明script所处于的状态readystatechange事件句柄表明属性改变的时间。在这里readyState不和xmlHttpRequest对象中一样,这里一系列的状态值不是一个数字。在这里，readyState是五个可能是属性值。
*“uninitialized” 原始的状态。
*"loading"下载开始
*"loaded"下载完成
*"interactive"数据处在一种不完全可用
*"complete"所有的数据都可以被使用
即使MSDN documentation表示这些是readyState可用的值，实际上,你不可能看到所有的状态。该文档同时说明其他的元素也支持 readyState同时留给我们一个相当晦涩对于readyState期望值的描述：一个对象的state首先被初始化为unintialized，然后是loading，当数据加载完成，状态变为loaded然后是interactive最后是complete状态。

对象所有经历的状态取决于这个对象。一个对象可以跳过某个状态（比如说,interactive）如果这个状态没有被应到到这个对象。
更奇怪的是最后的状态不总是complete。有些时候，readState停止在loaded状态而不过渡到complete状态。同时有些时候会跳过 loaded状态。最好的解决方式是检查两个readState值同时在两个事件中移除事件处理这样可以确保你不会处理两次下载。
var scripts=document.createElement('script');
            script.type="text/javascript";
            script.src="file.js";
            document.body.appendChild(scripts);
            scripts.onreadystatechange=function(){
                if(readyState=="loaded"||readyState=="complete"){
                    scripts.onreadystatechange=null;
                    alert('script is loaded!')
                }
            }
            document.body.appendChild(scripts);
你能完美的封装这两个解决方式从而创造一个跨浏览器的函数动态加载脚本。
function loadScript(url,callback){
                var script=document.createElement('script');
                script.type="text/javascript";
                if(script.readyState){
                    script.onreadystatechange=function(){
                        if(readyState=="loaded" || readyState=="complete"){
                            script.onreadystatechange=null;
                            callback();
                        }
                    }
                }else{
                    script.onload=function(){
                        callback();
                    }
                }
                script.src=url;
                document.body.appendChild(script);
使用这个函数的时候，只是传入一个脚本所在的地址然后在加载好之后调用一个回调函数。
loadScript("http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js",
    function(){
        YAHOO.namespace("mystuff");

    //more...
});

以这种方式加载脚本避免脚本阻塞页面中其他资源的下载或者阻止渲染。对于提高性能这是一种相当有用的技术。真正cool的事情是YUI3构建了一个完美的无阻塞下载方式。所有你需要做的就是下载一个大约20kb的seed文件同时说明你需要下载的其他资源文件。比如这样
YUI().use("dom", function(Y){
    Y.DOM.addClass(document.body, "active");
});

实际上，YUI构建了一个合适的url以便下载dom模块，当代码可执行时自动执行回调函数。这样通过异步下载其余的脚本文件从而优化了整个页面下载的时间。
无阻塞的下载一个脚本是一个需要明白的重要技术同时在关注页面下载性能的web应用程序中应用。javascript 阻塞是整个用户体验降低，但是我们已经可以对阻塞说不了。

becket_zheng 2010-02-28 23:54 发表评论

Douglas Crockford谈Ajax性能

becket_zheng — Sun, 28 Feb 2010 15:53:00 GMT

Douglas Crockford谈Ajax性能

2008年12月25日，星期四

这是Douglas Crockford在圣诞节前的一个讲座。我觉得对于前端工程师来说算是一个“新年大片”。英文好的建议直接去看原文http://ericmiraglia.com/blog/?p=140感谢Eric Miraglia提供了完整的文字记录。

Crock先用<记忆碎片 >这部电影作为引子。我还没看过，一定要找来看看。

如果要向不太了解JSON的解释JSON为什么好Crock这句话说的很清楚“A JSON message is less work for the server to generate, it moves much faster on the wire because it’s smaller, it’s less work for the browser to parse and render than an HTML document.”

“The page is an application with a data connection to a server.”Crock对Ajax Revolution标题的注解。他提到“the client dose not need a copy of the database. it just needs, at any moment, just enough information to serve the user”，后端把所有数据都交给前端处理，后端是省事了，而浏览器端的性能则变的极差。“the client and the server are in a dialog, and we make the messages between them be as small as possible”，这是一个关键原则。just-in-time data delivery(按需传输数据)。

这些道理其实尽人皆知，但在设计复杂的应用时，在进行多人协作的项目时，仍然会犯这样的错误。为什么？因为如果真的要实现一个客户端和服务器端的高效对话，服务器端的设计就会变的复杂，我充分理解后端工程师也要考虑他们的问题。但为了更高效率，后端多花一些心思是值得的，因为目前浏览器还是一个非常低效的应用平台(这也是Google推出Chrome的原因)，存在显著的安全问题和性能问题。

Crock举的这个memoizer(缓存器)的例子非常经典:

var fibonacci = function(n){

return n < 2 ? n :

fibonacci(n - 1) + fibonacci(n - 2);

};

fibonacci(40);

执行自己 331,160,280 次

var memoizer = function(memo, fundamental){

var shell = function(n){

var result = memo[n];

if(typeof result !== ‘number’){

result = fundamental(shell, n);

memo[n] = result;

}

return result;

}

return shell;

}

var fibonacci = memoizer([0, 1], function(recur, n){

return recur(n - 1) + recur(n - 2);

});

优化后的程序仅执行了38次。”the key to optimization is work avoidance.” (优化的关键是“逃避工作”的技巧)

Crock提到两种优化思路：streamline和special casing

streamline(简化为使效率更高)：更换算法（选择更好的算法）、逃避工作、清除冗余代码（项目反复修改每次只是增加，往往忽略清除没用的代码）而且”These things are always good to do”这些事情应该一直去做而不是等到出现性能问题之后再解决。

special casing理解成特别包装更好一些。为了解决某些特别需求在原有代码基础上所做的包装，优其是对公共组件。会导致冗余代码越来越多，增加代码的 size，同时还会增加更多的测试路径（如果代码要进行白盒测试，无疑测试成本将增加很多）。要知道产品的需求永远是善变的。处理这种特殊需求可以写一些 “适配器”或“桥接器”，不用的话就直接拿掉。

“Avoid unnecessary displays or animation”很多产品经理认为花哨的交互就是好的用户体验，或者就是认为它够shiny，殊不知它带来的负面影响远比它的作用要大的多。 Crock是这么说的“A ‘wow’ effect is definitely worthwhile if it improves the user’s productivity, or improves the value of the experience to user.If it’s there just to show that we can do that, I think it’sa waste of our time, it’sa waste of the user’s time.”（译：如果这样做能提高用户的生产力或提升用户体验的价值，一个‘喔噻’的效果是价得的。但如果它的存在只是为了表明，我们能够做到这一点，我认为这是浪费我们的时间，这是浪费用户的时间）

重点解决影响最大的性能问题。看似费话，其实在开发中避重就轻的事没少干。关键首先要准确的判断出哪些环节是最大的症结所在。The bottleneck tends to be the DOM interface — DOM is a really inefficient API.(译: 瓶颈倾向于DOM接囗 - DOM是一个相当低效的API)，还会有reflow计算的问题。“So touch the DOM lightly, if you can.”怎么才能“touch lightly”，Crock告诉我们两个技巧：一个是在创建的结点添加到DOM树上之前对其进行操作，这样不会有回流计算的问题。二是用 innerHTML，它只会跟DOM发生一次关系。

var d = document.createElement(”div”);

d.style.height = ‘100px’;

d.style.border = ‘1px solid red’;

d.style.color = ‘green’;

…(该办的事先办完)…

//最后再添加到dom树中

document.body.appendChild(d);

“Don’t Tune For Quirks”不要调那些浏览器的怪异问题。建议首先是尽量绕开这些quirks，虽然通过一些技巧可以解决这些问题，但也许在其它浏览器上性能就会变差。而且当浏览器升级后修复了这个问题，之前所做的优化可能会变得更糟。Crock建议不做短期优化。

短短三十多分钟的讲座细细品味的话可以引出很多思考。

简单总结一下：

一是客户端要轻。程序不要臃肿，不要把所有数据都交给前端处理

二是代码是基础。寻求更好的算法，更好的设计模式

三是借住工具，不凭直觉

四是要抓重点。揪住主要问题解决

五是DOM操作是瓶颈

六是不要做短期优化

标签：ajax, performance
发布在前端 | 没有评论 »

高性能的Ajax应用－Julien Lecomte

2007年12月21日，星期五

高性能的Ajax应用－Julien Lecomte

第1部分高性能的开发

1.为高性能计划和设计
－从每一天开始就要计划高性能
－跟产品经理和设计师紧密的合作
－理解设计的基本原理
－设计和性能之前做解释和权衡
－提供选择和展示各种可能（原型）
－挑战自己，实现有挑战性的设计（不要只说“不”）
－为了简化设计和交互，有时候需要妥协

2.高性能工程开发：一些基本规则
－少就是多。不要做任何不必要的事。直到变得绝对重要，否则不要做。
－打破规则。只能在迫不得以的情况下，才能妥协并打破最佳做法。
－在提升可以感觉到的性能上下功夫。

3.衡量性能
－使用用户真实环境测试
－在开发中，profile你的代码
－使用自动的profiling/性能测试
－保持功能执行的历史数据
－在产品中考虑保留一些（少量的）profiling代码

第2部分高性能的页面下载

1.Yahoo!的14条性能原则
一个页面工作于3（有时是重叠的）个阶段－下载，渲染，运行。14条原则大部分作用于第1个阶段。

2.资源优化
－最小化CSS和Javascript文件。推荐使用YUI Compressor（http://developer.yahoo.com/yui/compressor）压缩。远离那些所谓的先进的压缩方案，如Packer。
－合并CSS和Javascript文件。在发布的时候合并(http://www.julienlecomte.net/blog/2007/09/16)或在运行的时候合并。
－优化图片资源。如：PngCrush(http://pmt.sourceforge.net/pngcrush)、PngOptimizer(http://psydk.org/PngOptimizer.php)等。

3.减小非压缩代码的大小
－下载和解析HTML、CSS、Javascript代码的成本是很高的。
－用简练写法和写更少的代码
－用好Javascript库
－在考虑将大的Javascript文件拆成小的文件(bundle)时，解析和编译脚本时要花费大量额外的时间
－按需下载代码（HTML、CSS、Javascript），如，Lazy Loading
* 参见，http://ajaxpatterns.org/On-Demand_Javascript
* 使用 YUI Loader
* Dojo的package system
* JSAN的Import System

4.优化初始渲染(1)：综合技巧
－Consider rendering the first view on the server
－关闭你的HTML标签提高解析速度。参见http://msdn2.microsoft.com/en-us/library/ms533020.aspx#Close_Your_Tags
－考虑尽早缓存。
－下载基本的资源，延迟或按需下载其他资源。使用YUI ImageLoader。

5.优化初始渲染(2)：不要一直等onload
－大部分DOM操作可以在onload事件触发前完成
－如果你需要控制你的初始化代码，可以直接写在里，并把它放在靠近的位置
－否则，使用YUI事件组件中的onDOMReady方法
YAHOO.util.Event.onDOMReady(function () {
// Do something here…
// e.g., attach event handlers.
});

6.优化初始渲染(3)：在页面下载后，再下载脚本。
－一个好的网站应该在Javascript失效下功能也应该是完整的
－因此，你可以延迟下载脚本
－这样做对下载其他资源（样式表、图片等）是有好处的
－这样做使网站下载更快

7.优化初始渲染(4)：有条件的预下载
－预下载潜在的资源（Javascript、CSS、图片等）真的可以增强用户体验。
－可是，在什么时候进行功妙的预下载是关键，否则，预下载会影响用户体验。
－参见http://www.sitepoint.com/article/web-site-optimization-steps/3
－参见http://search.yahoo.com

第3部分高性能的Javascript

1.减少符号查寻(1)：范围链
－每次访问变量时都会执行查寻
－变量从当前范围向上执行查寻
－因此，无论何时都在相同范围中声明和使用变量
－完全不要使用with，它会阻止编译器生成代码时访问本地变量的速度（因为首先要遍历原型链，然后是范围链等）
－缓存外部变量到本地变量。
不好的写法：
var arr = …;
var globalVar = 0;
(function () {
var i;
for (i = 0; i < arr.length; i++) {
globalVar++;
}
})();

好的写法：
var arr = …;
var globalVar = 0;
(function () {
var i, l, localVar;
l = arr.length;
localVar = globalVar;
for (i = 0; i < l; i++) {
localVar++;
}
globalVar = localVar;
})();

2.减少符号查寻(2)：原型链
－访问主对象上的成员的速度比访问原型链上的成员的速度快25%
－原型链越长查寻越慢
function A () {}
A.prototype.prop1 = …;

function B () {
this.prop2 = …;
}

B.prototype = new A();
var b = new B();//(译者：prop2为b的主对象成员，而prop1是原型链上的成员)

3.优化对象实例化
－如果你需要创建很多对象，可以考虑添加成员到原型中，而不添加到单个对象的构造器中。
－这样会减少内存的消耗
－然而会拖慢查寻查寻对象成员的速度

4.不要使用eval
－传字符串到eval中，需要编译和解释，相当的慢！
－完全不要传一个字符串到setTimeout和setInterval中。可以使用匿名函数代替。
setTimeout(function () {
// Code to execute on a timeout
}, 50);
－完全不要eval做为方法的构造器。

5.优化字符串连接
－在IE(JScript)中，连接两个字符串会导致一个新的字符串被重新分配资源，同时两个原字符串被复制：
var s = “xxx” + “yyy”;
s += “zzz”;
－因此在IE中，添加字符串到数组中然后再用Array.join连接比直接用+连接快很多（不要用在简单的连接中）
－其他Javascript引擎(WebKit、SpiderMonkey)已经对字符串连接做了优化
－使用YUI Compressor!

6.优化正则表达式
－尽量不要用RegExp构造，除非你的正则表达式需要实时创建。
－使用test方法测试一个pattern（exec方法会有小的性能问题）
－使用非捕获组(?:)
－保持pattern的简单

7.缓存
－在下面情况下应用缓存是合理的：
* 更低成本的获取一个值
* 值会被经常读取
* 值不经常改变
－会增加内存消耗（权衡）
－Memoization:
Module Pattern:
var fn = (function () {
var b = false, v;
return function () {
if (!b) {
v = …;
b = true;
}
return v;
};
})();

Store value in function object:
function fn () {
if (!fn.b) {
fn.v = …;
fn.b = true;
}
return fn.v;
}

Lazy function definition:
var fn = function () {
var v = …;
return (fn = function () {
return v;
})();
};

8.如何控制长时间运行处理的Javascript
－在Javascrit的长时间运行处理过程中，整个浏览器会被冻结
－因此为了维持好的用户体验，确保Javascript一个线程在约300兆秒内完成
－你可以通过用setTimeout将长运行处理拆成的更小处理单元串起来执行
－更多见http://www.julienlecomte.net/blog/2007/10/28/
－例子http://www.julienlecomte.net/blogfiles/javascript/long-running-js-process.html
function doSomething (callbackFn) {
// Initialize a few things here…
(function () {
// Do a little bit of work here…
if (termination condition) {
// We are done
callbackFn();
} else {
> // P
rocess next chunk
setTimeout(arguments.callee, 0);
}
})();
}

9.综合技巧
－简单的操作符往往比相应的方法要快
c = Math.min(a, b);
c = a < b ? a : b;//更快

myArray.push(value);
myArray[myArray.length] = value;//比上面快
myArray[idx++] = value;//比上面快

－避免使用try…catch在影响性能的部分：
不好的写法：
var i;
for (i = 0; i < 100000; i++) {
try {
…
} catch (e) {
…
}
}
好的写法：
var i;
try {
for (i = 0; i < 100000; i++) {
…
}
} catch (e) {
…
}
－If possible, avoid for…in in performance-critical sections
－无论何时分支条件都不改变的情况下，分支应该在外面，不要在里面：
不好的写法：
function fn () {
if (…) {
…
} else {
…
}
}

好的写法：
var fn;
if (…) {
fn = function () {…};
} else {
fn = function () {…};
}

第4部分高性能的动态HTML

1.文档树的修改：使用innerHTML
注意事项http://www.julienlecomte.net/blog/2007/12/38

2.文档树的修改：使用cloneNode
注意：expando属性或附加的事件会丢失

3.文档树的修改：使用DocumentFragment
－DocumentFragment(DOM Level 1 Core)是一个轻量级的文档对象
var i, j, el, table, tbody, row, cell, docFragment;
docFragment = document.createDocumentFragment();
el = document.createElement(”div”);
docFragment.appendChild(el);
table = document.createElement(”table”);
el.appendChild(table);
tbody = document.createElement(”tbody”);
table.appendChild(tbody);
for (i = 0; i < 1000; i++) {
…
}
document.body.appendChild(docFragment);
－它仅仅支持常规DOM方法和属性的子集
－IE实现DocumentFragment不服从W3C规范

4.限制事件柄的个数
－附加事件到上百个元素上的成本很高
－多个事件柄会增加潜在的内存漏洞
－解决方案：使用事件委托机制，一种依靠事件冒泡的机制

5.限制回流(Reflow)

第5部分高性能的布局和CSS

综合技巧
－使用CSS Sprites
－避免使用Javascript布局
－避免使用IE表达式
－避免使用IE滤镜(或尽可能少用)
－优化Table布局
－优化CSS选择器http://developer.mozilla.org/en/docs/Writing_Efficient_CSS

第6部分高性能的Ajax

1.综合技巧
－完全不要使用同步的XMLHttpRequest。参见http://yuiblog.com/blog/2006/04/04/synchronous-v-asynchronous
－编程处理网络超时
－解决方案：使用YUI Connection Manager
var callback = {
success: function () { /* Do something */ },
failure: function () { /* Do something */ },
timeout: 5000
};
YAHOO.util.Connect.asyncRequest(”GET”, url, callback);

2.提升可以感觉到的网络延迟体验
－如果数据在提交到服务器端之前经过本地校验，通常请求的成功率达99.9%
－因此，为了优化用户体验，我们可以采用下面的Pattern:
* 当请求发出时要更新UI
* Lock the UI/data structures with the finest possible granularity.
* 让用户知道发生了什么事
* 让用户知道为什么UI被锁定
* 当成功返回结果后要及时解除锁定
* 要用优雅的方式处理错误

3.综合技巧
－知道并发HTTP/1.1连接的最大数量
－如果后端支持，支持多元的Ajax请求
－Piggyback unsollicited notifications in a response to an Ajax request.
－用JSON代替XML做为数据交换格式
－推送，不要轮询。使用COMET向浏览器发送实时的通知
－考虑使用本地存储器缓存数据。
* IE的userData
* Flash本地存储
* DOM:Storage(WHATWG持久存储API, 已在Firefox2中实现)
* Google Gears
* 其它

第7部分性能工具

－YSlow? http://developer.yahoo.com/yslow
－Task Manager
－IE Leak Detector a.k.a Drip [ http://www.outofhanwell.com/ieleak/ ]
－Stopwatch profiling
* AjaxView [ http://research.microsoft.com/projects/ajaxview/ ]
* JsLex [ http://rockstarapps.com/pmwiki/pmwiki.php?n=JsLex.JsLex ]
* YUI profiler [ http://developer.yahoo.com/yui/profiler/ ]
－Venkman or Firebug Profiler [ http://www.getfirebug.com/ ]

(原文：http://yuiblog.com/blog/2007/12/20/video-lecomte/

becket_zheng 2010-02-28 23:53 发表评论

自制弹出式内容框JS代码

becket_zheng — Sun, 28 Feb 2010 15:50:00 GMT

//Xingmai命名空间
if(!Xingmai)
var Xingmai = {};

//内容窗口
Xingmai.ContentBox =
{
//创建窗口
CreateBox : function()
{
//创建窗体
var contentBox = {};

//ID
contentBox.ID = null;

//窗口Title
contentBox.Title = null;

//窗口宽度
contentBox.Width = null;

//窗口高度
contentBox.Height = null;

//窗口左像素
contentBox.Left = null;

//窗口顶像素
contentBox.Top = null;

//Class定义
contentBox.ClassName= null;

//默认值
contentBox.Common = {
Width : 500,
Height : 400,
Left : (document.documentElement.clientWidth - contentBox.Width)/2 + document.documentElement.scrollLeft,//有问题
Top : (document.documentElement.clientHeight - contentBox.Height)/2 + document.documentElement.scrollTop //有问题
};
//创建BOX
contentBox.Create = function()
{
//alert("a");
//创建主要界面
var newBox = document.createElement("div");
newBox.setAttribute("id", contentBox.ID);
with(newBox.style)
{
position = "absolute";
zIndex = "9999";
width = contentBox.Width + "px";
height = contentBox.Height + "px";
top = contentBox.Top;
left = contentBox.Left;
}
//newBox.setAttribute("style", "width : " + contentBox.Width + "px; height : " + contentBox.Height + "px;");
if(contentBox.ClassName!=null)
newBox.setAttribute("className", contentBox.ClassName);

//创建标题栏和删除按钮
var titleSpan = document.createElement("div");
with(titleSpan.style)
{
height = "20px";
textAlign = "left";
verticalAlign = "middle";
}
//titleSpan.setAttribute("style", "height : " + "35" + "px;");
titleSpan.setAttribute("class","contentTitleSpan");
var spanDiv = document.createElement("div");
with(spanDiv.style)
{
width = contentBox.Width - 30 + "px";
styleFloat = "left";
textAlign = "left";
}
spanDiv.appendChild(document.createTextNode(contentBox.Title));
titleSpan.appendChild(spanDiv);

var closeDiv = document.createElement("div");
with(closeDiv.style)
{
width = "20px";
styleFloat = "right";
textAlign = "right";
}
var closeButton = document.createElement("a");
closeButton.setAttribute("href", "#");
closeButton.appendChild(document.createTextNode("×"));
$addHandler(closeButton,"click", function(){Xingmai.ContentBox.KillBox(contentBox.ID);});
closeDiv.appendChild(closeButton)
titleSpan.appendChild(closeDiv);
newBox.appendChild(titleSpan);

//创建Iframe
var iframe = document.createElement("iframe");
iframe.setAttribute("class","contentIframe")
iframe.setAttribute("src" , contentBox.Url);
iframe.setAttribute("frameborder","0",0);
iframe.setAttribute("scrolling","no");
with(iframe.style)
{
border = "0";
width = "100%";
height = (contentBox.Height - 20) + "px";
}
newBox.appendChild(iframe);

return newBox;
};

//创建ID
contentBox.CreateID = function()
{
var now = new Date();
return "ContentBox" + now.getFullYear() + now.getMonth() + now.getDay() + now.getHours() + now.getMinutes() + now.getSeconds() + now.getMilliseconds();
};

//显示窗口
contentBox.Show = function()
{
//处理默认值
contentBox.ID = contentBox.ID == null ? contentBox.CreateID() : contentBox.ID;
contentBox.Title = contentBox.Title == null ? "内容系统窗口" : contentBox.Title;
contentBox.Url = contentBox.Url == null ? "about:blank" : contentBox.Url;
if(isNaN(contentBox.Width)||contentBox.Width == null)
contentBox.Width = contentBox.Common.Width;
if(isNaN(contentBox.Height)||contentBox.Height == null)
contentBox.Height = contentBox.Common.Height;
if(isNaN(contentBox.Left)||contentBox.Left == null)
contentBox.Left = contentBox.Common.Left;
if(isNaN(contentBox.Top)||contentBox.Top == null)
contentBox.Top = contentBox.Common.Top;

//创建窗口并显示
var add = contentBox.Create();
document.getElementsByTagName("body").item(0).appendChild(add);
};

return contentBox;
},

//删除窗口
KillBox : function(id)
{
var box= document.getElementById(id);
if(box)
box.parentNode.removeChild(box);
}
};

becket_zheng 2010-02-28 23:50 发表评论

javascript提交验证

becket_zheng — Sun, 28 Feb 2010 14:17:00 GMT

function onlyNum()
{
        var realKey = String.fromCharCode(event.keyCode)
        var myReg = /^(-|\+)?\d+(((\.\d+)|(\.))|((\/\d+)|(\/)))?$/;
//        alert(event.srcElement.value + realKey);
//        alert(myReg.test(event.srcElement.value + realKey));
        if (myReg.test(event.srcElement.value + realKey) == false)
        {
            event.returnValue=false;
        }
}

调用代码：

不过需要提交前进行验证或者在焦点离开时还要验证
验证正则
^(-|\+)?\d+((\.\d+)|(\/\d+))?$/
如果不验证可能出现1.或者1/这样的输入

becket_zheng 2010-02-28 22:17 发表评论

Windows 7安全和网页挂马

becket_zheng — Mon, 25 Jan 2010 12:18:00 GMT

这几年来，国内网页挂马的现象是越来越严重。不管是白道黑道，或攻或防，都围绕着这个问题做文章。我们看到，有利用IE安全漏洞的0day，如去年的XML。或ActiveX控件的0day，如前一阵子的OWC安全漏洞。这一个过程中，安全厂商或是推出自己的IE的Plug-in监测，或是URL拦阻，或是在反病毒上做文章等等。

我对于如反病毒之类的响应类型软件的效果，一直是有保留态度。有兴趣的同时可以参见最近有什么厉害的计算机病毒？一文。真正意义上的安全改进还是要依赖于操作系统一级上的提高。

举个例子，以前在DOS时代给予引导扇区的病毒曾经很流行，但是随着操作系统的改进，在Windows上这类病毒已经销声匿迹了，这是因为它的攻击方式在操作系统一级上已经被阻止了。这种程度上的安全改进，是反病毒软件无法做到的。

Vista由于种种原因，例如性能，在国内就没有普及。现在还是以XP为主。让我们来看看现在的给予IE/XP的挂马方式吧，绝大情况就是给予0day或是已经打了补丁的安全漏洞（用户可能没有及时更新），加上堆污染，然后感染用户的机器。效果就是用户访问了一个恶意网页，然后中招。

那我们看看，在Win7上，会是什么样子。在Win7上，IE8+DEP+ALSR+SEHOP+Low Right，目前所有的挂马方式，都不能成功。换句话说，就算是IE8有一个0day的安全漏洞，你在Win7上访问到一个被挂了马的恶意网页，也不会被感染。不需要有其它反病毒软件的帮助。当然，如果你一定要直接下载一个EXE文件再运行，就没有办法了。

Win7的性能和兼用型都做的比Vista好了许多。从现在的反馈看，Win7的普及会非常快的。随着XP的换代，困扰大家这么长时间的网页挂马现象会得到非常大的改进。当然，攻击者总会发现新的攻击方式，不过像XP上现在这么容易的攻击方式估计是不会在有了。我也对在安全领域工作的几个朋友提及，要好好评估一下Win7对他们产品带来的影响。新的一轮的洗牌，也就会在这一两年内吧。

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/chengyun_chu/archive/2009/09/17/4561097.aspx

becket_zheng 2010-01-25 20:18 发表评论

关于HttpModule

becket_zheng — Tue, 19 Jan 2010 17:44:00 GMT

关于HttpModule

这几天在看一个项目,非常有感触.觉得自己知道的还是太少,需要学习的东西也非常之多.其实很多底层的东西应该多去了解,这样对于自己开发一个应用系统以及开发的模式会有很大的帮助,就比如系统权限方面,以前自己写的权限这块看来真的是小儿科,而今看到了利用HttpModule来配合权限的编写,又让我好好的学习了一把,在网上找到对于HttpModule的一些基础解释,先转发过来,供自己和一些路过的朋友参考.

--------------------
来源：赛迪网作者：孙亚民

ASP.Net中自定义Http处理及应用之HttpModule篇

HttpHandler实现了类似于ISAPI Extention的功能，他处理请求(Request)的信息和发送响应(Response)。HttpHandler功能的实现通过实现IHttpHandler接口来达到。而HttpModule实现了类似于ISAPI Filter的功能。

HttpModule的实现

HttpModules实现了类似于ISAPI Filter的功能，在开发上，通常需要经过以下步骤：

1.编写一个类，实现IhttpModule接口

2.实现Init 方法，并且注册需要的方法

3.实现注册的方法

4.实现Dispose方法，如果需要手工为类做一些清除工作，可以添加Dispose方法的实现，但这不是必需的，通常可以不为Dispose方法添加任何代码。

5.在Web.config文件中，注册您编写的类

下面是一个HttpModules的示例，在这个示例中，只是简单的注册了HttpApplication 的BeginRequest 和 EndRequest事件，并且通过这些事件的实现方法，将相关的信息打印出来。

例1：
            using System;
            using System.Web;
            namespace MyModule
            {
            public class MyModule : IHttpModule
            {
            public void Init(HttpApplication application)
            {
            application.BeginRequest += (new
            EventHandler(this.Application_BeginRequest));
            application.EndRequest += (new
            EventHandler(this.Application_EndRequest));
            }
            private void Application_BeginRequest(Object source, EventArgs e)
            {
            HttpApplication Application = (HttpApplication)source;
            HttpResponse Response=Application.Context.Response;
            Response.Write("Beginning of Request
");
            }
            private void Application_EndRequest(Object source, EventArgs e)
            {
            HttpApplication application = (HttpApplication)source;
            HttpResponse Response=Application.Context.Response;
            Response.Write("End of Request
");
            }
            public void Dispose()
            {
            }
            }
            }

程序的开始引用了如下名称空间：

using System;
            using System.Web;

因为HttpApplication、HttpContext、HttpResponse等类在System.Web中定义，因此，System.Web名称空间是必须引用的。

MyModule类实现了IhttpModule接口。在Init方法中，指明了实现BeginRequest 和EndRequest 事件的方法。在这两个方法中，只是简单的分别打印了一些信息。

下面，在Web.config文件中注册这个类，就可以使用这个HttpModule了，注册的方法如下：

现在来看一下效果。编写一个Aspx页面test.aspx，内容如下：

<%
            Response.Write("This is the Page
");
            %>

运行以后的界面如图所示：

深入研究HttpModule

HttpModule通过对HttpApplication对象的一系列事件的处理来对HTTP处理管道施加影响，这些事件在HttpModule的Init方法中进行注册，包括：

BeginRequest
            AuthenticateRequest
            AuthorizeRequest
            ResolveRequestCache
            AcquireRequestState
            PreRequestHandlerExecute
            PostRequestHandlerExecute
            ReleaseRequestState
            UpdateRequestCache
            EndRequest

其中部分事件同Global.asax中的事件相对应，对应关系如下：

HttpModule	Global.asax
BeginRequest	Application_BeginRequest
AuthenticateRequest	Application_AuthenticateRequest
EndRequest	Application_EndRequest

在例1中，处理了BeginRequest和EndRequest事件，其他事件的处理方式基本上类似。

同HttpHandler对应来看，这些事件，有些在HttpHandler之前发生，有些在HttpHandler处理完后发生。了解事件发生的顺序非常重要，因为，服务器端的对象在不同的时间段有着不同的表现。例子之一是Session的使用。不是所有的事件中都能对Session进行处理，而只能在有限的几个事件中进行处理。详细的过程可以参考下面的HTTP Request处理生命周期图。

使用HttpModule实现权限系统

我们在开发应用系统的时候，应用系统的权限控制是非常重要的一个部分。在ASP中，要实现权限的控制是比较麻烦的事情，因为我们必须在每个需要控制权限的ASP页面中添加权限控制代码，从而控制客户对页面的访问。这样带来的问题，除了编写大量重复代码外，由于权限控制部分同业务处理部分的模块紧密耦合在一起，对权限控制模块的修改，往往又会带来大量的修改工作，甚至造成大量的Bug。

所以，我们现在需要将权限控制和业务处理模块进行解耦，使得两个部分可以独立开发和修改，而不会互相影响，或者，将影响减到最低。在Jsp程序中，这个目的可以通过引入一个前端控制器来实现权限过滤（关于前端控制器模式，可以参见《J2EE核心模式一书》）。在ASP.Net中，我们可以利用HttpModule实现同样的效果。下面来看一下实现的过程。

首先，我们会构建一个权限处理系统，可以检测某个用户对某个模块功能是否有访问权限（具体的结构，我想，读者都应该接触过这个部分的编程，所以不再赘述），其中，暴露给客户端调用的权限校验类的定义如下：

public class RightChecker
            {
            public static bool HasRight(User user,Module module)
            {
            //进行权限校验，
            }
            }

然后，我们利用HttpModule编写一个过滤器：

using System;
            using System.Web;
            namespace MyModule
            {
            public class MyModule : IHttpModule
            {
            public void Init(HttpApplication application)
            {
            application. AcquireRequestState += (new
            EventHandler(this.Application_AcquireRequestState));
            }
            private void Application_AcquireRequestState (Object source,
            EventArgs e)
            {
            HttpApplication Application = (HttpApplication)source;
            User user=Application.Context.Sesseion["User"]  //获取User
            string url=Application.Context.Request.Path;
            //获取客户访问的页面
            Module module= //根据url得到所在的模块
            If(!RightChecker.HasRight(user,module))
            Application.Context.Server.Transfer("ErrorPage.aspx");
            //如果没有权限，引导到错误处理的页面
            }
            public void Dispose()
            {
            }
            }
            }

将这个类按照前面介绍的方法，在Web.Config中注册后，我们的应用系统就具备权限管理的功能了。怎么样，比原来的方式好很多吧？

结束语

在.Net中，微软把原来具有较高难度的服务器扩展的编程作了很大的简化，对于我们开发的确带来了很大的方便，值得我们对此技术进行深入的研究。

例1：
            using System;
            using System.Web;
            namespace MyModule
            {
            public class MyModule : IHttpModule
            {
            public void Init(HttpApplication application)
            {
            application.BeginRequest += (new
            EventHandler(this.Application_BeginRequest));
            application.EndRequest += (new
            EventHandler(this.Application_EndRequest));
            }
            private void Application_BeginRequest(Object source, EventArgs e)
            {
            HttpApplication Application = (HttpApplication)source;
            HttpResponse Response=Application.Context.Response;
            Response.Write("Beginning of Request
");
            }
            private void Application_EndRequest(Object source, EventArgs e)
            {
            HttpApplication application = (HttpApplication)source;
            HttpResponse Response=Application.Context.Response;
            Response.Write("End of Request
");
            }
            public void Dispose()
            {
            }
            }
            }

程序的开始引用了如下名称空间：

using System;
            using System.Web;

现在来看一下效果。编写一个Aspx页面test.aspx，内容如下：

<%
            Response.Write("This is the Page
");
            %>

BeginRequest
            AuthenticateRequest
            AuthorizeRequest
            ResolveRequestCache
            AcquireRequestState
            PreRequestHandlerExecute
            PostRequestHandlerExecute
            ReleaseRequestState
            UpdateRequestCache
            EndRequest

其中部分事件同Global.asax中的事件相对应，对应关系如下：

HttpModule	Global.asax
BeginRequest	Application_BeginRequest
AuthenticateRequest	Application_AuthenticateRequest
EndRequest	Application_EndRequest

public class RightChecker
            {
            public static bool HasRight(User user,Module module)
            {
            //进行权限校验，
            }
            }

然后，我们利用HttpModule编写一个过滤器：

using System;
            using System.Web;
            namespace MyModule
            {
            public class MyModule : IHttpModule
            {
            public void Init(HttpApplication application)
            {
            application. AcquireRequestState += (new
            EventHandler(this.Application_AcquireRequestState));
            }
            private void Application_AcquireRequestState (Object source,
            EventArgs e)
            {
            HttpApplication Application = (HttpApplication)source;
            User user=Application.Context.Sesseion["User"]  //获取User
            string url=Application.Context.Request.Path;
            //获取客户访问的页面
            Module module= //根据url得到所在的模块
            If(!RightChecker.HasRight(user,module))
            Application.Context.Server.Transfer("ErrorPage.aspx");
            //如果没有权限，引导到错误处理的页面
            }
            public void Dispose()
            {
            }
            }
            }

becket_zheng 2010-01-20 01:44 发表评论

.net Cookies安全性实践

becket_zheng — Tue, 19 Jan 2010 17:30:00 GMT

.net Cookies安全性实践

首先，你要相信网络是不安全的，TCP协议也是不安全的。HTTP访问是基于TCP协议来完成的，其能够被攻击是一定的。

跨站脚本攻击一直是Web上常见的手段之一，攻击一般是劫持用户会话，拿到私有的钥匙。如何劫持这个会话呢？

一、Sniffer（这里采用的软件是Sniffer，java版的那个）

Sniffer监听会话是不可护的，就和KOF里拉尔夫的宇宙幻影一样，只要打中，一定是致命的。

上图，就是一组侦听数据，当然这里侦听的是我本机的数据。实际上是可以侦听局域网，甚至广域网上的数据。

得到一组16进制的值。可以用以下代码获得其值：

string bytestr = "";
string[] byteArray = bytestr.Split(' ');
byte[] b = new byte[byteArray.Length];
for (int i = 0; i < byteArray.Length; i++) {
b[i] = Convert.ToByte(byteArray[i], 16);
}
string msg = Encoding.UTF8.GetString(b);
Console.WriteLine(msg);

Console.Read();

bytestr 变量就放置16进制字符串就行了。另外这里使用的编码是utf-8，实际应用中应该与网站的编码匹配。这个实验是拿博客园做实验的。博客园登录状态的cookie名为“.DottextCookie”。

在firefox中，退出博客园登录，然后切换到firebug的控制台，使用命令行键入document.cookie='.DottextCookie=******;'，然后刷新页面，看到了什么？现在正处于登录状态！

实际上在会话劫持中，一般都是拿登录cookie的值，无论其是否加密，都可以劫持。

二、跨域脚本攻击

要实现跨域脚本攻击，除了利用浏览器漏洞，或者ARP欺骗，一般需要有两个要素。首要的要素是，被攻击的网站，需要能自定义html代码(除了利用漏洞，一般是要支持script)。在客户端使用document.cookie就可以拿到cookie的值，然后进行分析，找出需要的键值对。就可以完成攻击。这里关于如何跨域保存信息就不讨论了。

比如有以下代码：

HttpCookie cookie = new HttpCookie("mmmm", "vvvvvvvvvvvv");
Response.Cookies.Add(cookie);

实现了cookie的写入。而在这个域下的页面中，我有权限设置某个页面中包含脚本的话，就可以实现攻击。

以上代码是个简单的输出，如果我把拦截到的document.cookie发送到我能保存数据的地方，那么就可以拿到很多有用的信息。这样就完成了跨域脚本攻击。

三、其它攻击方法
其他攻击方法只要能够拿到这个cookie就可以了，不管你是用flash或者其它办法。

四、可以防止的和不可防止的
刚才介绍到Sniffer方法是不可防止，那怎么防止脚本的攻击呢？可以禁止用户使用脚本，很多网站都这么做的，如果一定要使用的话，需要对cookie做特殊设置。在dotnet中，可以这样处理：

HttpCookie cookie = new HttpCookie("mmmm", "vvvvvvvvvvvv");
cookie.HttpOnly = true;
Response.Cookies.Add(cookie);

这样，在客户端就不可以访问这个键值对的cookie,从而让其他人即使能用脚本拦截会话，但是无法得到关键数据。

becket_zheng 2010-01-20 01:30 发表评论

实现HTTP内容的抓取

becket_zheng — Tue, 19 Jan 2010 17:30:00 GMT

实现HTTP内容的抓取

前段时间做了一个网页爬虫，初次接触，收获了很多知识。其中关于HTTP协议的内容，记述如下：

        RFC2616中主要描述了HTTP 1.1协议。下面的描述没有实现其各个方面的内容，只提出了一种能够完成所有HTTP网页抓取的最小实现（不能够抓取HTTPS）。

        1、首先提交一个URL地址，分为普通的GET网页获取，POST的数据提交两种基本模式。

建立HttpWebReques实例，其中uri是网页的URL的地址：
   HttpWebRequest webrequest = (HttpWebRequest) WebRequest.Create(uri);

KeepAlive表示HTTP的连接是长连接：
   webrequest.KeepAlive = true;

如果需要，添加引用地址，主要用于防止其他网站的连接引用，比如登陆时，经常需要验证：
   if(referer!=null)
   {
    webrequest.Referer=referer;
   }

选择数据的提交方式，有GET、POST两种方式，HEAD不常用：
   switch(RequestMethod)
   {
    case 1:
     webrequest.Method="GET";
     break;
    case 2:
     webrequest.Method="POST";
     break;
    case 3:
     webrequest.Method="HEAD";
     break;
    default:
     webrequest.Method="GET";
     break;
   }

设置User－Agent，经常遇到，在某些网站中，做了限制，User－Agent为空，则不能访问：
   webrequest.UserAgent = "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322; .NET CLR 2.0.50215; fqSpider)";

添加其他的HTTP的Header信息，collHeader是一个NameValue的Collection：
   if(collHeader!=null&&collHeader.Count>0)
   {
    int iCount = collHeader.Count;
    string key;
    string keyvalue;

    for (int i=0; i < iCount; i++)
    {
     key = collHeader.Keys[i];
     keyvalue = collHeader[i];
     webrequest.Headers.Add(key, keyvalue);
    }
   }

设置Content－Type的内容，如果为POST，设置成application/x-www-form-urlencoded，如果是Get设置成text/html：
   if(webrequest.Method=="POST")
   {
    webrequest.ContentType="application/x-www-form-urlencoded";
   }
   else
   {
    webrequest.ContentType = "text/html";
   }


设置代理服务器地址和端口：
   if ((ProxyServer!=null) &&(ProxyServer.Length > 0))
   {
    webrequest.Proxy = new
     WebProxy(ProxyServer,ProxyPort);
   }

设置是否允许自动转移：
   webrequest.AllowAutoRedirect = true;

设置基本的登陆认证：
   if (NwCred)
   {
    CredentialCache wrCache =
     new CredentialCache();
    wrCache.Add(new Uri(uri),"Basic",
     new NetworkCredential(UserName,UserPwd));
    webrequest.Credentials = wrCache;
   }

设置Request的Cookie容器：
   webrequest.CookieContainer=Cookies;

设置POST数据：
   byte[] bytes = Encoding.ASCII.GetBytes(RequestData);
   webrequest.ContentLength=bytes.Length;

   Stream oStreamOut = webrequest.GetRequestStream();
   oStreamOut.Write(bytes,0,bytes.Length);
   oStreamOut.Close();

becket_zheng 2010-01-20 01:30 发表评论

一直处于页面底部的div

becket_zheng — Tue, 19 Jan 2010 17:29:00 GMT

一直处于页面底部的div

一月 14th, 2009 No Comments »

看到facebook每个页面底部的工具栏了吗？如图：

昨天用js写了一个，代码如下：

   1:  $(document).ready(function() {

   2:              fixPosition();

3:

   4:              $(window).resize(fixPosition).scroll(fixPosition);

   5:          });

6:

   7:          function fixPosition() {

8:

   9:              $('.bottom').css("top", document.body.offsetHeight + getScrollTop() - 200)

  10:              .css('left', (document.body.offsetWidth - 500) / 2).html(

  11:                  'document.body.offsetHeight:' + document.body.offsetHeight

  12:                  + '
document.body.scrollTop:' + document.body.scrollTop

  13:                  + '
document.body.clientHeight:' + document.body.clientHeight

  14:                  + '
document.body.scrollHeight:' + document.body.scrollHeight

  15:                  + '
document.documentElement.scrollTop:' + document.documentElement.scrollTop

  16:                  + '
' + new Date().toLocaleTimeString());

  17:          }

  18:          function getScrollTop() {

  19:              var scrollPos = 0;

  20:              if (typeof window.pageYOffset != 'undefined') {

  21:                  scrollPos = window.pageYOffset;

  22:              }

  23:              else if (typeof window.document.compatMode != 'undefined' &&

  24:          window.document.compatMode != 'BackCompat') {

  25:                  scrollPos = window.document.documentElement.scrollTop;

  26:              }

  27:              else if (typeof window.document.body != 'undefined') {

  28:                  scrollPos = window.document.body.scrollTop;

  29:              }

  30:              return scrollPos;

  31:          }

css代码：

   1:  .bottom

   2:          {

   3:              position: absolute;

   4:              height: 200px;

   5:              background: #ddd;

   6:              width: 500px;

   7:          }

不过在ie和firefox下使用的时候都会闪，而facebook的却一点也不闪，好奇之下用firebug看了看样式，原来如此：

原来用css实现了，代码如下

.bottom
{
bottom: 0;
color: #111111;
font-size: 11px;
height: 25px;
padding: 0;
position: fixed;
right: 0;
width: 100%;
z-index: 99;
}

试了一下，果然不闪了，特记之。。。

becket_zheng 2010-01-20 01:29 发表评论

探寻IIS最大并发数

becket_zheng — Tue, 19 Jan 2010 17:27:00 GMT

探寻IIS最大并发数

测试系统Window 2003 Server ,IIS 6.0 ,ASP.Net 3.5 sp1
Dual 1.8双核，2G内存，14G虚拟内存。

为了探寻IIS的最大并发数，先要做几个假设。

1、假设最大并发数就是当前的连接数。意思是当前能承受最大的连接，那么就表明最大的并发。
2、假设IIS应用程序池处于默认状态，更改设置将会对最大连接数产生影响。

做完假设，现在做限制，设置站点保持HTTP连接，超时设置成0，就是不会超时。在站点请求的default.aspx页面设置线程Thread.Sleep(int.MaxValue)，接下来开发一个用来保持连接的小程序。

    class Program {
        private volatile static int errorCount = 0;
        private volatile static int rightCount = 0;

        static void Main(string[] args) {
            ServicePointManager.DefaultConnectionLimit = 10000;
            int count = 0;
            int all = 0;
            while (true) {
                all++; count++;
                CreateThread();
                Thread.Sleep(10);
                if (count >= 200) {
                    Console.WriteLine(string.Format("sucess:{0};error:{1}", all - errorCount, errorCount));
                    count = 0;
                }
                if (all > 1800)
                    break;
            }
            Console.ReadKey();
        }

        static void CreateThread() {
            Thread thread = new Thread(ActiveRequest);
            thread.IsBackground = true;
            thread.Start();
        }

        static void ActiveRequest() {
            RequestClient client = new RequestClient("http://192.168.18.2/default.aspx?d=" + Guid.NewGuid());
            client.RequestProcess();
            if (client.IsError) {
                errorCount++;
                Console.WriteLine(string.Format("错误消息:{0}", client.Messages));
            } else {
                rightCount++;
                //Console.WriteLine(client.Messages);
            }
        }
    }

/**
* author : yurow
*      http://birdshover.cnblogs.com
* description:
*
* history : created by yurow 2009-8-16 0:29:05
*/

using System;
using System.Collections.Generic;
using System.Text;
using System.Net;
using System.IO;

namespace MaxLinked {
    ///

///
///

    public class RequestClient {
        HttpWebRequest request;
        WebResponse response;

        public RequestClient(string url) {
            request = (HttpWebRequest)HttpWebRequest.Create(url);
            request.Timeout = int.MaxValue;
            request.KeepAlive = true;
            ErrorCode = -1;
        }

        public void AddHeader(string name, string value) {
            request.Headers.Add(name, value);
        }

        private bool isError = false;
        private StringBuilder buffer = new StringBuilder();

        public int ErrorCode { get; set; }

        public bool IsError {
            get { return isError; }
        }

        public string Messages {
            get { return buffer.ToString(); }
        }

        public void RequestProcess() {
            try {
                response = request.GetResponse();
            } catch (WebException ex) {
                ErrorCode = (int)ex.Status;
                buffer.Append(ex.Message);
                isError = true;
            }
            if (response != null) {
                Stream stream = null;
                StreamReader reader = null;
                try {
                    //stream = response.GetResponseStream();
                    //reader = new StreamReader(stream, Encoding.UTF8);
                    //buffer.Append(reader.ReadToEnd());
                } catch (Exception ex) {
                    buffer.Append(ex.Message);
                    isError = true;
                } finally {
                    //if (reader != null)
                    //    reader.Close();
                    //if (stream != null)
                    //    stream.Close();
                }
            } else {
                isError = true;
                buffer.Append("建立连接失败！");
            }
        }

        public void Close() {
            if (response != null)
                response.Close();
            request.Abort();
        }
    }
}

程序设置为只能启动1800个线程，这是由于.Net单进程最大线程数好像是2000个。因此，要测试最大并发数，要需要同时开几个测试进程。把系统虚拟内存调到最大值，线程过多会急剧占用内存。现在开始测试。

打开web站点的性能计数器，把显示比例调成1万。

发现到5000个连接时，IIS服务器崩溃（503错误），去洗了个澡，发现IIS服务器无法自己修复错误。又测试了几次，发现最大并发值是8200个，但是一般到5000左右就会崩溃，有时候甚至只有1000个。

按8200个计算，一个用户开一个浏览器浏览网页，可能会占用2～3个连接（参考《IIS连接数实验——Web开发必读》）,按两个计算，那么IIS默认情况下，最大并发数是4000个左右。

打开应用程序池配置，把最大工作进程数调高（默认为1），能有效提高最大连接数。我记得以前看过一篇文章，讲的是调到5左右比较合适。

becket_zheng 2010-01-20 01:27 发表评论

IIS连接数实验——Web开发必读

becket_zheng — Tue, 19 Jan 2010 17:27:00 GMT

IIS连接数实验——Web开发必读

我哭，实验需要，清空了cookie，害得文章丢了～～～～下面重写写过，汗～

本文旨在通过实验发现IIS连接状态以及其它因素会对它产生的影响。

打开性能计数器，添加Web Service下的Current Connections。实验需要，把测试站点超时调整为5秒，最大连接数为2。

现在打开网页，分别用IE7(以下简称IE),Firefox 3.5（以下简称FF），Chrome 3.0（以下简称CH）打开站点。发现CH浏览器返回"Service Unavailable"，这个很好理解，因为最大连接数是2，其它两个浏览器各占一个，第三个怎么也打不开。那同类浏览器会产生什么效果呢？比如用3个IE（单独进程的，不是tab上的），3个FF，3个CH分别打开后，发现，IE的第3个会报错，而FF与CH还是占用一个连接。这方面，FF和CH明显比IE优秀。而如果是tab上打开，那么3种浏览器都是占用一个连接，这方面都是一样的。

当打开一个浏览器访问后，切换到性能计数器，发现，网页早就下载完了，但是连接还是没有释放。在超时设置为5的情况下，需要等待16~18秒钟，连接才关闭。3种浏览器都一样。

那连接关闭是否与超时设置有关呢？现在把超时设置改成120秒，这是默认值。分别用IE,FF,CH打开，并且等待连接释放，发现IE需要70秒，FF和CH则需要130秒。这表明，打开单个纯文字网页，FF和CH更耗资源。而连接关闭的时间确实与超时设置有关。

接下来测试网页中有图片时，连接的情况。在网页中加入两张不同的图片，用IE,FF,CH分别打开。IE在第一打开时，占用一个连接，刷新几次后占用两个连接；FF始终占用一个连接；CH始终占用两个连接。（也可能测试不够充分）而对于开多个浏览器的情况，到第三个IE的时候，还是会报错（如果第一个浏览器刷新几次，第二个就会报错），而FF与CH则正常。三个tab则全部正常。

现在把两张不同的图片换成5张相同的图片，发现每种浏览器，都只占用一个连接。而把图片换成5张不同的，则全部占用两个连接，并且，在第一次打开时候，IE能显示两个图片，其余显示XX；FF能显示3张；CH能显示3～4张。而刷新几次后，IE全部显示，FF全部显示，CH最多只能显示4张。这应该是浏览器缓存的原因。

还记得以前用XP系统开发的时候，有很多图片的网页一次打开后图片不能全部显示，原因应该就是这个。而从这里也可以看到，图片与WEB应用分离的重要性。有些网站，现在才有大背景图显示(比如taobao)有以上的原因。

就写到这里吧，文章丢了贫道很伤心，没啥写下去的欲望了。

总结以上的测试，可以看出，要适当调整好IIS超时设置，同时注意图片的处理方式！(补充一句，特别是买的虚拟空间，使用时候，就要注意图片的问题，不是把图片都切成块就好。)

等几天可能会写个姐妹篇，看实验数据是否值得发个帖子，呵呵～～～

becket_zheng 2010-01-20 01:27 发表评论

.net Cookies安全性实践

becket_zheng — Tue, 19 Jan 2010 17:25:00 GMT

.net Cookies安全性实践

首先，你要相信网络是不安全的，TCP协议也是不安全的。HTTP访问是基于TCP协议来完成的，其能够被攻击是一定的。

跨站脚本攻击一直是Web上常见的手段之一，攻击一般是劫持用户会话，拿到私有的钥匙。如何劫持这个会话呢？

一、Sniffer（这里采用的软件是Sniffer，java版的那个）

Sniffer监听会话是不可护的，就和KOF里拉尔夫的宇宙幻影一样，只要打中，一定是致命的。

上图，就是一组侦听数据，当然这里侦听的是我本机的数据。实际上是可以侦听局域网，甚至广域网上的数据。

得到一组16进制的值。可以用以下代码获得其值：

Code
string bytestr = "";
string[] byteArray = bytestr.Split(' ');
byte[] b = new byte[byteArray.Length];
for (int i = 0; i < byteArray.Length; i++) {
b[i] = Convert.ToByte(byteArray[i], 16);
}
string msg = Encoding.UTF8.GetString(b);
Console.WriteLine(msg);

Console.Read();

实际上在会话劫持中，一般都是拿登录cookie的值，无论其是否加密，都可以劫持。

二、跨域脚本攻击

比如有以下代码：

HttpCookie cookie = new HttpCookie("mmmm", "vvvvvvvvvvvv");
Response.Cookies.Add(cookie);

实现了cookie的写入。而在这个域下的页面中，我有权限设置某个页面中包含脚本的话，就可以实现攻击。

以上代码是个简单的输出，如果我把拦截到的document.cookie发送到我能保存数据的地方，那么就可以拿到很多有用的信息。这样就完成了跨域脚本攻击。

三、其它攻击方法
其他攻击方法只要能够拿到这个cookie就可以了，不管你是用flash或者其它办法。

四、可以防止的和不可防止的
刚才介绍到Sniffer方法是不可防止，那怎么防止脚本的攻击呢？可以禁止用户使用脚本，很多网站都这么做的，如果一定要使用的话，需要对cookie做特殊设置。在dotnet中，可以这样处理：

HttpCookie cookie = new HttpCookie("mmmm", "vvvvvvvvvvvv");
cookie.HttpOnly = true;
Response.Cookies.Add(cookie);

这样，在客户端就不可以访问这个键值对的cookie,从而让其他人即使能用脚本拦截会话，但是无法得到关键数据。

becket_zheng 2010-01-20 01:25 发表评论

[转]RIA大潮中，那种技术适合你？

becket_zheng — Tue, 12 Jan 2010 16:33:00 GMT

[转]RIA大潮中，那种技术适合你？

关键字: RIA

前言

RIA技术介绍和优缺点
1. Ajax
2. Flash/Flex/Laszlo
3. Adobe AIR（Adobe Integrated Runtime）
4. WPF（Windows Presentation Foundation）
5. Microsoft Silverlight
6. Mozilla XUL
7. SUN JavaFX
RIA技术分类和比较
1. 浏览器类
2. 浏览器插件类
3. 新型桌面类
那种RIA技术适合你
1. 你是什么样的类型？
2. 选择标准
3. 找到合适自己的（目前和未来）
总结

在互联网技术不断普及的今天，我们随处可见Web应用程序（Web Application）的身影，甚至于Web Application已经成为很多开发企业开发各类软件系统的首选。Web Application的出现是为了解决早期C/S（客户端-服务器）系统的部署、更新和维护的困难。其通过把整个应用程序运行在服务器端，把界面解析为HTML通过HTTP协议发送给客户端的浏览器，以展现给用户。

这种基于页面的模型虽然结构简单，系统部署成本低，但同时也带来了一些额外的问题，比如：用户操作体验简单，不容易开发丰富的效果来展示数据，应用程序需要联网才能运行，系统安全性不高，浏览器兼容性容易影响系统正常运行，应用程序很难或者需要通过其他技术的辅助才能操作客户机的资源，服务器的负载过高而客户机的计算能力没有充分使用，等等。

传统Web Application的诸多缺点已经被业界意识到，这样一种全新的应用系统构架——Rich Internet Application（富互联网应用程序，简称RIA）被提了出来。RIA可以充分利用客户机的计算能力，又不失Web Application那样的部署优点。这里的Rich体现了两个方面的含义：一，用户界面的丰富；二，数据模型的智能。RIA通过在客户机上单独运行一个客户端程序（这个客户端程序有可能独立运行，也可能嵌在浏览器中运行，下文会详细阐述他们的区别），极大的提高了用户界面的丰富表现，可以很容易的和多媒体技术结合，提高了用户体验。由于RIA需要一个独立于服务器的客户端程序，那么和传统Web Application的最大区别就在于，服务器已经成为支持RIA客户端程序正常运行的数据服务，并能为RIA提供复杂的数据处理方式，包括异步的数据传输处理和脱机的数据缓存机制。

我们可以看到RIA实际上是应用系统构架的进化的一个全新设计，从最早的大型主机模型到C/S，到Web Application，再到现在的RIA，是逐步应用系统的部署地域和用户体验的。图1显示了应用系统构架的发展过程：

图1 Rich Internet Application的发展（摘自Adobe Flex：创建企业Rich Internet Application 的表示层解决方案）

一句话，RIA就是把传统Web Application和桌面程序的优点结合在一起，既提供了丰富的客户端体验，又通过网络轻易部署和自由访问Internet的资源。

RIA的概念首先由Macromedia在2004年发布Flex的时候提出，随着Ajax的普及和深入，目前各大开发平台供应商都推出了各自的RIA技术平台，以其在RIA大潮来临的时候，成为主流的开发技术。

同时在网络社区中，对于RIA技术平台应该具备那些条件和特点，也进行了热烈的讨论：

良好的用户体验, 响应速度快和丰富的用户界面
基于互联网的开放标准进行数据传输
运行时快速高效
能整合多种媒体格式
丰富的组件，基于事件驱动，能进行快速开发
支持联机/离线的数据传输
良好的兼容性，能在多种平台下运行
与服务器的交互方式必需首先支持异步的交互
所基于的新的媒体格式必需是基于文本的，这样的格式才可能对于搜索引擎友好
要能够支持增量的呈现（incremental rendering）
要基于动态类型的脚本语言，例如JavaScript或ActionScript，而不是C#这样的静态类型语言
要有90%以上的客户端部署比例。这样才能保证很好的Web可访问性（Web Accessibility）
要有较为强大的开发工具
开发和部署的成本不能太高
UI组件库能够比较方便的做扩展
RIA框架本身能够比较方便的做扩展
这种RIA技术不应该造成对于服务器端技术的厂商锁定

以上前言内容，由于排版和字数的原因，最终没有发布。

在前言完了后，我RIA技术介绍和优缺点中简单介绍了这些技术，并给出使用这些技术开发RIA的优缺点（仅个人观点）。

接着在RIA技术分类和比较中，我给出了如下这个表格：

RIA技术分类	包含的技术	优点	缺点
浏览器	Ajax	基于原有Web技术与HTML无缝集成无需学习新技术	把应用程序绑定在浏览器中，受浏览器安全沙箱控制浏览器的兼容性影响应用程序的开发和运行
浏览器插件	Flex Laszlo Silverlight	独立的技术与HTML部分集成丰富的界面表现特定的开发语言和工具能使用部分在Web开发中的经验	需要下载插件和定制的运行时运行在浏览器中，受浏览器安全沙箱控制需要学习新技术
新型桌面	WPF XUL AIR JavaFX	独立完善的技术特定的开发语言和工具可独立浏览器运行（也可以运行于浏览器中）最丰富的界面表现能方便的访问本地资源可使用桌面软件开发的技巧	需要安装单独的运行环境需要学习新技术

从上面的表中，可以看到一个明显的特点，就是Adobe和Microsoft都同时推出在浏览器中运行和独立浏览器运行的RIA开发平台。

在三种分类的技术中，浏览器技术是成为开发RIA最直接的技术。很多人认为Ajax是开发RIA的不二选择，Ajax的潜力还没有完全挖掘出来，使用现有的Web技术（HTML+CSS+JavaScript）完成可以开发出丰富的用户界面。此类技术适合一直在做Web应用的软件开发商选择。

新型桌面技术则完全另起炉灶，充分使用桌面开发的技术、技巧和理念，并结合Web Application部署方便即时安装的优点。此类技术适合做Windows应用的开发商。

浏览器插件则在浏览器技术和新型桌面之间进行了折中，既使用新的技术来实现丰富的界面，又能和现有的Web技术进行部分的集成。

如何选择适合自己的技术，主要看如下几个方面：

自己目前的技术，和产品的结构
RIA技术供应商的背景
RIA技术学习的成本
RIA技术应用的成本
RIA技术运行的效率
……

最后，RIA技术平台未来市场的发展情况，供应商将会是三国鼎立的局面：Adobe、Microsoft和SUN。Adobe依赖Flex，已经在RIA领域有了很好的基础，最近又推出AIR，把手伸向了桌面系统。Microsoft向来是桌面软件开发的霸主，通过推出WPF来一统Windows和Web界面开发技术，现在又推出Silverlight来和Flex直接竞争，并且Silverlight有很多比Flex先进的特性。SUN依靠Java的基础，以及在移动设备上的JavaME运行时，走开源路线，也会成为一个有力竞争者。总体来说，Microsoft和Adobe是份额最大的供应商，SUN会稍显弱势。另外，Ajax会成为很多一直在做Web Application的软件开发商的首选，其必将成为一个重要的RIA开发技术。

becket_zheng 2010-01-13 00:33 发表评论

REST+RIA方案

becket_zheng — Tue, 12 Jan 2010 16:32:00 GMT

一直很想体会一下使用REST+RIA这种组合开发Web应用效果究竟如何，乘着这几天有空简单试验了一把。

我选择的案例很简单，就是《应用Rails进行敏捷开发》一书中的depot应用。为了简化问题，我只使用了其中的store控制器部分，并将这一部分改写成REST+RIA的方式。具体地说，就是：

1、重写一个控制器（我把它称为RestStore），它的功能和Store控制器类似，但只提供RESTful风格的接口；
2、表示层部分用Flex重写。该层与RestStore控制器通信以获取必要的后台数据；

为了比较的目的，以下将《应用Rails进行敏捷开发》所使用的“经典”方法（Rails作为后台，rhtml作为表现层）称为方案一，将我所试验的方法（RESTful Rails作为后台，Flex作表现层）称为方案二。除了结构上的差异，这两个方案所实现的功能和界面基本上是完全相同的。

代码量比较

方案一：
Controllers（1个文件，57行）
Helpers（1个文件，9行）
Models（5个文件，85行）
Views（6个文件，93行）
CSS（1个文件，227行）
------------------------------------------
共计14个文件，471行

方案二：
Controllers（1个文件，37行）
Models（3个文件，39行）
Views（3个文件，15行）
MXMLs（3个文件，278行）
ActionScripts（4个文件，142行）
CSS（1个文件，76行）
--------------------------------------------
共计15个文件，587行

方案二比方案一要大概多出25%的代码，这主要是因为前后台采用了不同的技术，所以必须写一些用于转换数据格式的方法。
需要说明的是，由于没有详细统计注释和空行，因此这个数字并不十分精确，只能作为一个数量级上的参考。但是代码量的分布上还是能看出一些问题来的。方案二比起方案一而言，服务器部分得到了很大的简化，原因在于（1）视图部分只提供XML数据，不再负责处理界面；（2）购物车移到客户端来实现，后台不再需要Cart和相关的类。

此外，方案一的CSS文件相当长，而方案二的CSS就要小得多。这是因为方案一的CSS也包括许多用于页面布局的部分，而在Flex中，布局是用布局容器来实现的，CSS只负责组件样式。这就使得Flex中MXML比较大而CSS可以稍小一些。（我个人的看法是使用布局容器进行整体布局比用CSS更加合理）

通信量比较

在客户端使用如下操作步骤，这些操作覆盖了控制器所实现的所有功能。使用HttpLook软件记录并比较两个方案与服务器通信的次数和通信数据量大小。

1、浏览首页
2、添加货品1
3、清空购物车
4、添加货品2
5、添加货品3
6、结账
7、不输入任何数据就提交
8、输入正确的数据并提交

以下为比较结果。括号内为服务器返回的HTTP body大小，如果有两个数字，则分别表示请求数据和应答数据的大小。
比较结果不包含货品的图片，因为这部分数据量对所有方案都是一样的。

	方案一	方案2
1	GET /store(9834) GET /stylesheets/depot.css(3263) GET /javascripts/prototype.js(71260) GET /javascripts/effects.js(38200) GET /javascripts/dragdrop.js(30550) GET /javascripts/controls.js(28911) GET /javascripts/application.js(148) GET /images/logo.png(1070) GET /images/favicon.ico(0)	GET /depotclient.html(4308) GET /AC_OETags.js(7826) GET /history.js(1292) GET /history.html(1272) GET /depotclient.swf(298104) GET /history.swf(2656) GET //favicon.ico(0) GET /rest_store/list_pay_types.xml(157) GET /rest_store/list.xml(5281)
2	POST /store/add_to_cart/11(1851)
3	POST /store/empty_cart(93) GET /store(9834) GET /stylesheets/depot.css(0)
4	POST /store/add_to_cart/5(1881)
5	POST /store/add_to_cart(1(2065)
6	POST /store/checkout(2718) GET /images/logo.png(0)
7	POST /store/save_order(94,3217)
8	POST /store/save_order(129,93) GET /store(9891)	POST /rest_store/save_order(300,21)

可以看到两种方案在通信方式上的巨大差异。类似的地方是，两种方案初次浏览时都需要加载相当多的附件，不同之处在于方案二要加载的东西中有一个相当大的swf文件，其他内容则都比较小。而方案一则也需要加载几个比较大的JS文件，这些JS文件大多是Ajax所需要的。

在后续过程中，方案二的优点就体现出来了：由于购物车是在客户端处理的，结账的表单也嵌入在SWF中，因此方案二可以在绝大部分时间不必与服务器通信，只在最后提交表单的时候需要再次请求服务器。方案一虽然每次请求的数据量都不大，但是请求次数相当频繁，对于服务器来说负担仍然相当沉重，而且请求次数越多，由于网络问题等原因出错的可能性也越大。

仔细观察表中的数据也能看出一些有意思的结论。请看方案一中的步骤2和步骤3：步骤3清空购物车使用的传统的Web方法，即向服务器发出请求，然后重新载入整个页面；步骤2添加一件货品，使用的是Ajax方法。两个步骤其实数据量差不多大小，步骤2还要多出一个product_id参数，但是无论从请求数量（1：3）还是数据量大小（1851：9927）都表明Ajax比传统的全页面刷新方法要优越得多。不过在这个方面，RIA走得更远：完全不需要向服务器请求，客户端本身就可以完成相当一部分工作。

结论

REST+RIA是一种新兴的Web应用结构，这种结构具有如下的优点：

1、将表现层与后台彻底分离

传统的Web表现层技术总是依赖于特定的服务器编程语言的。比如你用JSP编写页面，就意味着服务器后台必须使用Java，如果后来决定改用ROR，那么除了用rhtml重写表现层以外大概没有什么更好的办法。而使用RESTful风格的接口意味着服务器只需要提供资源，不论后台使用Java，Ruby或.Net来实现，对表现层都完全没有影响，哪怕把后台整个换掉也不需要重写表现层，这也意味着表现层是完全可重用的。考虑到真实的项目中对表现层的修改往往是最麻烦且工作量极大的部分，这项分离意义重大。

要将表现层与后台分离，其实也有其他的一些技术方案可选。以前出现过的两种比较常见的办法：（1）服务器提供XML数据，然后用XSLT转换为HTML或其他格式；（2）服务器提供Web Service接口，用支持WS的客户端访问。不过这两种方法可能也存在一定的问题，最后并没有真正流行开来。Web Service更多的用在异构系统整合而不是系统内部通信上。

2、方便程序员和美工协同开发

在页面中嵌入代码是好是坏？问题不在于代码本身，而在于这样一来美工和程序员的工作难以协调，任何一方做出修改，都必须复核自己的修改是否破坏了对方的工作。RESTful风格的接口只提供资源数据，不暴露服务器上的任何实现细节，这对美工和程序员来说绝对是个好消息：只需要约定服务器提供数据的格式，美工就可以完全按照自己的节奏去设计和测试页面，程序员也可以专心实现后台逻辑，彼此都不需要担心破坏对方的工作，可以实现完全的并行开发，这是以往任何Web开发技术都没能做到的。

3、有利于采用快速原型的开发方式

在上面已经提到过，在这种方式下，美工和程序员可以完全并行工作。即使在还没有实现任何后台逻辑之前，只要先写一个符合格式的Xml占位文件，表现层就可以开始设计，不论后台开发速度快慢，表现层都可以尽快提供一个可以工作的原型，对于尽早审核需求和获得用户反馈都是非常有利的。

4、合理分配负载，减轻服务器压力

大多数Web应用在负载的分配问题上其实是非常不合理的：服务器承担着成千上万的用户请求，每时每刻都在忙碌之中，而客户端机器在这个时间里只是傻傻的等待响应，根本无事可做。从前面的测试结果可以看到，RIA的方案需要一次性下载较大的数据，但在这之后客户端可以承担相当一部分工作，避免频繁请求服务器，不仅在资源分配上更加合理，也能够让服务器同时承载更多的用户。

5、提高用户体验

减少服务器请求不仅是资源问题，也关系到用户体验，频繁的页面闪烁是相当糟糕的。Ajax可以在相当程度上缓解这一问题，
但是Ajax并不太适用于大范围的页面变化和页面跳转，一般的Web应用中使用页面跳转的比例仍然远高于使用Ajax的比例。当网络情况不佳或服务器繁忙时，等待服务器响应也是很恼人的事情。
一个RIA（如Flex）应用中通常包括多个页面，在页面之间切换不会有停顿，甚至不太大的应用可以One page one application，更不必担心愉快的冲浪过程中突然抛给你一个404或500错误（这对心脏相当有好处）。

（PS：不过世界上的事情有时候也难说。我的确知道有这么一些人，他们觉得看浏览器页面闪动的白屏比看Flash的平滑窗口渐变更舒服。除了习惯成自然外，我实在很难想出有什么别的理由可以解释这个问题）

但是这种开发方式也有一些问题：

1、至少在目前，Flex面临着和浏览器一样的限制——只支持GET/POST调用，还不能完整支持REST所要求的全部动词。虽然这个问题有一些临时的解决办法，不过需要在后台和表现层上都必须写一些hack代码，并不是很优雅。上面的例子也仅使用了GET/POST调用，还不能算是很严谨的REST方案。我们期待下一个版本能解决此一问题；

2、这种方式的开发代码量要略大于纯ROR的方法。Flex中使用的Actionscript语法比较类似于Java，仍然需要写很多大括号，对于循环也只能用笨拙的for ...。动态语言在生产力方面的优越性还是相当明显的。当然，比起Java或ASP.Net来说，Flex的代码量或许已经算是很少了。

3、关于如何组织Flex程序，目前还没有一致的意见，因此在Flex程序中还没法体现惯例优于配置的原则，仍然要编写一些自定义代码；

4、Flex编译后的程序通常比较大（普通规模的一般有200~300K，嵌入资源的话更多），在低速网络上首次下载会比较慢。据说Flex 3已经在着手解决此问题。

感想：

RIA（这里的RIA特指Adobe Flex和M$ WPF/Silverlight等，不包括Ajax）现在还是一种褒贬不一的技术。赞赏者认为，RIA结合了B/S结构和C/S结构的优点，安装部署的代价接近于前者而表现力上接近于后者；批评者则认为RIA在两方面都算不上最好：部署上不如B/S（需要安装浏览器插件）而表现力不如C/S（因为安全原因不能访问全部本地资源）。其实这两种说法都有道理。世上没有一种技术能具有所有的优点而没有缺点，也没有一种技术能包打天下。DHH说RIA没用，现代的Web技术足够发达了，我觉得此说不确。目前的Web应用或许有80%用HTML加上一些Ajax就够了，但余下的那20%呢？那些是用纯Web方案很难甚至没办法解决的领域，虽然少，但是硬骨头也要有人来啃。

因为REST和RIA目前都不能算比较成熟的技术，即使在这个很小的例子里也暴露出一些问题，大规模采用这种解决方案还是不太可行的。不过这些问题大多已经有人开始想办法去克服，相信未来会逐步得到解决。

事实上在这个简单的例子里我已经感觉到这种方案“分离关注点”带来的好处。在ROR的方案里，我需要同时考虑：在Controller里面提供什么数据，在View中怎么展示这些数据，思路总是在Model，Controller和View中来回切换。但是在REST+RIA的方案下，我可以在实现Controller的时候完全不考虑表示层，在实现界面的时候也完全不用考虑后台，思路非常集中，也容易专注于去思考一些设计上的问题。这是一次很好的开发体验，也让我有足够的信心说：尽管还存在一些问题，但是REST+RIA的方案必将有着光明的前途。

becket_zheng 2010-01-13 00:32 发表评论

最轻量,最简单的Ajax框架！

becket_zheng — Wed, 30 Dec 2009 06:00:00 GMT

最轻量,最简单的Ajax框架！

[ Houfeng.Web.Ajax ]

简介: Houfeng.Web.Ajax是一个轻量级的Ajax框架（不知能不能称为框架），但确实能让你轻松完成Ajax。。

如何使用:

1.修改页基类

public partial class Test1 : Houfeng.Web.Ajax.BasePage {... }

2.假如页面有一个方法Hello 它有一个参数 string woh

public string Hello(string who)
{
return "Hello!"+who;
}

3.在页面加载事件中注册实例及方法。

protected    void    Page_Load(object    sender,    EventArgs    e)
{
                this.RegInstance(this);   //这里将页面自个注册了。。
                this.RegFunction("Hello",    1);   //注册已注册实例的方法。
}

4.在客户端调用服务端方法

function test()
{
alert(Hello("曹操"));
}

如果页面有一个按钮的click为test()，那么便会弹出 ”Hello!曹操“;

5.如何异步调用？

function  test()
{
            Hello("曹操",test1);
}
function  test1(x)
{
            alert(x);
}

页面按钮的click还是test()，那么又会弹出 ”Hello!曹操“; 不过这下是回调text1 弹出来的。

becket_zheng 2009-12-30 14:00 发表评论

107条Javascript的常用语句

becket_zheng — Thu, 19 Nov 2009 07:09:00 GMT

107条Javascript的常用语句

http://hi.baidu.com/tabooc/blog/item/8910c211049c5df6c2ce7952.html

2009年11月06日星期五 12:01

1. document.write( " "); 输出语句
2.JS中的注释为// /**/
3.传统的HTML文档顺序是:document- >html- >(head,body)
4.一个浏览器窗口中的DOM顺序是:window- >(navigator,screen,history,location,document)
5.得到表单中元素的名称和值:document.getElementById( "表单中元素的ID號 ").name(或value)
6.一个小写转大写的JS: document.getElementById( "output ").value = document.getElementById( "input ").value.toUpperCase();
7.JS中的值类型:String,Number,Boolean,Null,Object,Function
8.JS中的字符型转换成数值型:parseInt(),parseFloat()
9.JS中的数字转换成字符型:( " " 变量)
10.JS中的取字符串长度是:(length)
11.JS中的字符与字符相连接使用號.
12.JS中的比较操作符有:==等于,!=不等于, >, >=, <. <=
13.JS中声明变量使用:var来进行声明
14.JS中的判定语句结构:if(condition){}else{}
15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop}
16.循环中止的命令是:break
17.JS中的函数定义:function functionName([parameter],...){statement[s]}
18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.
19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self
20.状態栏的设置:window.status= "字符 ";
21.弹出提示信息:window.alert( "字符 ");
22.弹出確认框:window.confirm();
23.弹出输入提示框:window.prompt();
24.指定当前显示链接的位置:window.location.href= "URL "
25.取出窗体中的所有表单的数量:document.forms.length
26.关闭文档的输出流:document.close();
27.字符串追加连接符: =
28.创建一个文档元素:document.createElement(),document.createTextNode()
29.得到元素的方法:document.getElementById()
30.设置表单中所有文本型的成员的值为空:
var form = window.document.forms[0]
for (var i = 0; i if (form.elements.type == "text "){
form.elements.value = " ";
}
}
31.复选按钮在JS中判定是否选中:document.forms[0].checkThis.checked (checked属性代表为是否选中返回TRUE或FALSE)
32.单选按钮组(单选按钮的名称必须相同):取单选按钮组的长度document.forms[0].groupName.length
33.单选按钮组判定是否被选中也是用checked.
34.下拉列表框的值:document.forms[0].selectName.options[n].value (n有时用下拉列表框名称加上.selectedIndex来確定被选中的值)
35.字符串的定义:var myString = new String( "This is lightsword ");
36.字符串转成大写:string.toUpperCase(); 字符串转成小写:string.toLowerCase();
37.返回字符串2在字符串1中出现的位置:String1.indexOf( "String2 ")!=-1则说明没找到.
38.取字符串中指定位置的一个字符:StringA.charAt(9);
39.取出字符串中指定起点和终点的子字符串:stringA.substring(2,6);
40.数学函数:Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的最在值,Math.pow(value1,10)返回

value1的十次方,Math.round(value1)四舍五入函数,Math.floor(Math.random()*(n 1))返回隨机数
41.定义日期型变量:var today = new Date();
42.日期函数列表:dateObj.getTime()得到时间,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,dateObj.getMonth()得

到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期几,dateObj.getHours()得到小时,dateObj.getMinutes()得到

分,dateObj.getSeconds()得到秒,dateObj.setTime(value)设置时间,dateObj.setYear(val)设置年,dateObj.setMonth(val)设置

月,dateObj.setDate(val)设置日,dateObj.setDay(val)设置星期几,dateObj.setHours设置小时,dateObj.setMinutes(val)设置

分,dateObj.setSeconds(val)设置秒 [注重:此日期时间从0开始计]
43.FRAME的表示方式: [window.]frames[n].ObjFuncVarName,frames[ "frameName "].ObjFuncVarName,frameName.ObjFuncVarName
44.parent代表父亲对象,top代表最顶端对象
45.打开子窗口的父窗口为:opener
46.表示当前所属的位置:this
47.当在超链接中调用JS函数时用:(javascript :)来开头后面加函数名
48.在老的浏览器中不执行此JS:

=========================================================

程序的执行结果如下：

如果a的值是1，那么可以在浏览器中看到这句话
-------------------------------------------------------
返回true
-------------------------------------------------------
弹出对话框，显示2
-------------------------------------------------------
45
-------------------------------------------------------
55
-------------------------------------------------------
45

becket_zheng 2009-11-19 15:09 发表评论

javascript 概念及基本语句

becket_zheng — Thu, 19 Nov 2009 07:08:00 GMT

javascript 概念及基本语句
http://hi.baidu.com/wutian123/blog/item/84ba58ddf7e256a8cc116610.html

2009-09-03 14:32

javascript 概念及基本语句

综合来看，JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML超文本语言一起实现在一个Web页面中与 Web客户进行交互作用。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷。JavaScript是一种比较简单的编程语言，使用方法是JavaScript向页面的HTML文件增加一个脚本，不许单独编译解释。当一个支持JavaScript浏览器打开这个页面时，它会读出这个脚本并执行其指令。因此JavaScript使用较容易方便，运行快，适用于较简单的应用。

基本程序语句

可以使用JavaScript所提供的语句在Web网页中实现很多交互性的的功能。JavaScript所提供语句可以分为以下几大类。

变量申明：Var

函数定义语句：Function，Return

条件和分支语句：If…Else，Switch

循环语句：For，For…In，Break和Continue

对象操作语句：New，This和With

注释语句：∥或者/* */

1. If语句

基本语法

01 If（条件）{

02 执行语句

03 }else{

04 执行语句

05 }

语法解释

如果其中的条件成立，则程序执行相应的语句。

文件范例：

hour=13;
if (hour< 12)
alert("Good_morning");
else if (hour< 18)
alert("Good_afternoon");
else
alert("Good_evening");

文件说明

将变量 hour赋值为13，进行不同的判断，由于hour< 18，因此将Good afternoon输出。

2.For语句

基本语法

01 for （初始化部分；条件部分；更新部分）

02 {

03 语句块…

04 }

语法解释

实现条件循环，当条件成立时，执行语句集，否则跳出循环体

sum=0;
for(i=0;i<6;i++)
sum+=3;
alert(sum);

文件说明

进行了变量i的6次循环，进行了6次相加，因此最终的值为18。

3.Switch语句

基本语法

01 switch(expression){

02 case labell:

03 语句块1

04 case label2:

05 语句块2

06 …

07 default:

08 语句块N

09 }

语法解释

每一个Labe1标记都必须在程序中由Expression表达式的一个或是多个可能的值代入.

for(i=1;i<=10; ++i)
{
switch(i)
{
case 1:
val="one";
break;
case 2:
val="two";
break;
case 3:
val="three";
break;
case 4:
val="four";
break;
case 5:
val="five";
break;
case 6:
val="six";
break;
case 7:
val="seven";
break;
case 8:
val="eight";
break;
case 9:
val="nine";
break;
case 10:
val="ten";
break;
default:
val="unknown"
}
alert(val+"
");
}

文件说明

使用For语句,实现变量i值由1-10的循环,使用switch语句,以换行的形式书写程序结果

4.D0…While语句

基本语法

01 do{

02 语句块；

03 }while（条件）

语法解释

执行的情况是：首先执行语句块，然后判断条件是否成立。所以D0…While循环至少执行一次。

i=0;
do
{
++i;
alert("this is a level "+i+" heading."+"");
}while(i<6)

文件说明

在此输出了H1-H5的标记。

5.Break语句

基本语法

Break;

语法解释

Break语句是结束当前的循环，并把程序的控制权交给循环的下一个语句。

for(i=1;i<100;i++)
{
document.write(i+"
");
if(i%17==0)
break;
}

文件说明

当循环到能被17整除时自动跳出整个循环，所以只输出1-17。

6.Continue语句

基本语法

continue;

语法解释

Continue语句是结束当前的某一次循环,但是并没有跳出整个循环.

for(i=1;i<100;i++)
{
alert(i+"
");
if(i%17==0)
continue;
}

文件说明

当循环到能被17整除时不能跳出整个循环，所以输出1-99。

becket_zheng 2009-11-19 15:08 发表评论

常用JavaScript语句集

becket_zheng — Thu, 19 Nov 2009 07:07:00 GMT

常用JavaScript语句集
http://hi.baidu.com/h_l99/blog/item/e87e81b3cf1a6fadd9335a1c.html

2009-09-28 11:25

--------------- 输出并重定向

---------------- 内嵌一个页面并设置为可编辑

--------------- 检验复选框是否已选并提示

---------------- 用JavaScript 在超连接中打开一个新窗口(可控制大小)

','','width=570,height=160,toolbar=no, status=no, menubar=no, resizable=yes, scrollbars=yes');return false;">打开一个窗口

1．让文字不停地滚动

　　＜MARQUEE＞滚动文字＜/MARQUEE＞

2．记录并显示网页的最后修改时间

　　＜script language=javascript＞

　　document．write("最后更新时间: " + document．lastModified + "")

　　＜/script＞

3．关闭当前窗口

　　＜a href="/"onClick="javascript：window.close();return false;"＞关闭窗口＜/a＞

4．5秒后关闭当前页

　　＜script language="javascript"＞

　　＜!--

　　setTimeout('window.close();',5000);

　　--＞

　　＜/script＞

5．2秒后载入指定网页

　　＜head＞

　　＜meta http-equiv="refresh" content="2;URL=http://你的网址"＞

　　＜/head＞

6．添加到收藏夹

　　＜Script Language="javascript"＞

　　function bookmarkit()

　　{

　　window.external.addFavorite('http://你的网址','你的网站名称')

　　}

　　if (document．all)document．write('＜a href="#" onClick="bookmarkit()"＞加入收藏夹＜/a＞')

　　＜/Script＞

7．让超链接不显示下划线

　　＜style type="text/css"＞

　　＜!-

　　a:link{text-decoration:none}

　　a:hover{text-decoration:none}

　　a:visited{text-decoration:none}

　　-＞

　　＜/style＞

8．让网页随意后退

＜a href="javascript :history.go(-X)"＞X＜/a＞

//把X换成你想要后退在页数

　　 //把“-”变成“+”就为前进

9．设置该页为首页

　　＜body bgcolor="#FFFFFF" text="#000000"＞

　　＜!-- 网址：http://你的网址--＞

　　＜a class="chlnk" style="cursor:hand" HREF

　　onClick="this.style.behavior='url(#default#homepage)';

　　this.setHomePage('你的网站名称);"＞＜font color="000000" size="2" face="宋体"＞设为首页＜/font＞＜/a＞

　　＜/body＞

10．节日倒计时

　　＜Script Language="javascript"＞

　　var timedate= new Date("December 25,2003");

　　var times="圣诞节";

　　var now = new Date();

　　var date = timedate.getTime() - now.getTime();

　　var time = Math.floor(date / (1000 * 60 * 60 * 24));

　　if (time ＞= 0)

　　document．write("现在离"+times+"还有: "+time +"天")＜/Script＞

11．单击按钮打印出当前页

　　＜Script Language="javascript"＞

　　＜!-- Begin

　　if (window.print) {

　　document．write('＜form＞'

　　+ '＜input type=button name=print value="打印本页" '

　　+ 'onClick="javascript：window.print()"＞＜/form＞');

　　}

　　// End --＞

　　＜/Script＞

12．单击按钮‘另存为’当前页

　　＜input type="button" name="Button" value="保存本页"

　　onClick="document．all.button.ExecWB(4,1)"＞

　　＜object id="button"

　　width=0

　　height=0

　　classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"＞

　　＜embed width="0" height="0"＞＜/embed＞

　　＜/object＞

13．显示系统当前日期

　　＜script language=javascript＞

　　today=new Date();

　　function date(){

　　this.length=date.arguments.length

　　for(var i=0;i＜this.length;i++)

　　this[i+1]=date.arguments }

　　var d=new date("星期日","星期一","星期二","星期三","星期四","星期五","星期六");

　　document．write(

　　"＜font color=##000000 style='font-size:9pt;font-family: 宋体'＞ ",

　　today.getYear(),"年",today.getMonth()+1,"月",today.getDate(),"日",

　　d[today.getDay()+1],"＜/font＞" );

　　＜/script＞

14．不同时间段显示不同问候语

　　＜Script Language="javascript"＞

　　＜!--

　　var text=""; day = new Date( ); time = day.getHours( );

　　if (( time＞=0) && (time ＜ 7 ))

　　　　text="夜猫子，要注意身体哦！ "

　　if (( time ＞= 7 ) && (time ＜ 12))

　　　　text="今天天气……哈哈哈，不去玩吗？"

　　if (( time ＞= 12) && (time ＜ 14))

　　　　text="午休时间哦，朋友一定是不习惯午睡的吧？！"

　　if (( time ＞=14) && (time ＜ 18))

　　　　text="下午茶的时间到了，休息一下吧！ "

　　if ((time ＞= 18) && (time ＜= 22))

　　　　text="您又来了，可别和MM聊太久哦！"

　　if ((time ＞= 22) && (time ＜ 24))

　　　　text="很晚了哦，注意休息呀！"

　　document．write(text)

　　//---＞

　　＜/Script＞

15．水中倒影效果

　　＜img id="reflect" src="你自己的图片文件名" width="175" height="59"＞

　　＜script language="javascript"＞

　　function f1()

　　{

　　　　setInterval("mdiv.filters.wave.phase+=10",100);

　　}

　　if (document．all)

　　{

　　　　document．write('＜img id=mdiv src="'+document．all.reflect.src+'"

　　　　style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()"＞')

　　　　window.onload=f1

　　}

　　＜/script＞

16．慢慢变大的窗口

　　＜Script Language="javascript"＞

　　＜!--

　　var Windowsheight=100

　　var Windowswidth=100

　　var numx=5

　　function openwindow(thelocation){

　　temploc=thelocation

　　(!(window.resizeTo&&document．all)&&!(window.resizeTo&&document．getElementById))

　　{

　　　　window.open(thelocation)

　　　　return

　　}

　　windowsize=window.open("","","scrollbars")

　　windowsize.moveTo(0,0)

　　windowsize.resizeTo(100,100)

　　tenumxt()

　　}

　　function tenumxt(){

　　if (Windowsheight＞=screen.availHeight-3)

　　　　numx=0

　　windowsize.resizeBy(5,numx)

　　Windowsheight+=5

　　Windowswidth+=5

　　if (Windowswidth＞=screen.width-5)

　　{

　　　　windowsize.location=temploc

　　　　Windowsheight=100

　　　　Windowswidth=100

　　　　numx=5

　　　　return

　　}

　　setTimeout("tenumxt()",50)

　　}

　　//--＞

　　＜/script＞

　　＜p＞＜a href="javascript：openwindow(http://www.xxx.com)"＞进入＜/a＞

17．改变IE地址栏的IE图标

　　我们要先做一个16*16的icon（图标文件），保存为index.ico。把这个图标文件上传到根目录下并在首页＜head＞＜/head＞之间加上如下代码：

＜link REL = "Shortcut Icon" href="index.ico"＞

18．鼠标指向时弹出信息框

　　＜body＞

　　＜a href onmouseover="alert('弹出信息！')"＞显示的链接文字＜/a＞

＜/body＞

19．单击鼠标右键弹出添加收藏夹对话框

　　＜body＞

　　＜script Language=javascript＞

　　if (document.all)

　　document.body.onmousedown=new function("if (event.button==2||event.button==3)

　　window.external.addFavorite('您的网址','您的网站名称)")

　　＜/script＞

＜/body＞

20．离开网页时和加载网站时提示你将本站加入收藏夹

可以很大的加大的网站的访问量。

一、在网页的

二、在网页中的标记中加入下面的代码：

onunload=favorate()

当然如果你想在网页载入时提示只需要把

上面的onunload=favorate()改成onload=favorate()

21．JS制作网页标题栏滚动信息的显示:

将下面的代码copy到网页的和中.

在网页的BODY中加入下面的代码:

22．JS状态栏信息分行显示:

将下面的代码copy到网页的和中.

在网页的BODY中加入下面的代码:

23. 可以在收藏夹中显示出你的图标

24. 永远都会带着框架

25. 最小化、最大化、关闭窗口

本例适用于IE

26. TEXTAREA自适应文字行数的多少

</p> <p style="text-indent: 2em">

27. 检测某个网站的链接速度：

把如下代码加入区域中:

28. 如何改变链接的鼠标形状

只需在链接上加上这一代码就行的了

或者跟上面的用CSS写也行

style="cursor:hand"　　　　　　style="cursor:crosshair"

style="cursor:text" 　　　　　　style="cursor:wait"

style="cursor:move" 　　　　　　style="cursor:help"

style="cursor:e-resize" 　　　　style="cursor:n-resize"

style="cursor:nw-resize" 　　　style="cursor:w-resize"

style="cursor:s-resize" 　　　　style="cursor:se-resize"

style="cursor:sw-resize"

以上代码你只需要加到连接或是页面的STYLE区里就可以实现鼠标多样化。

29.COOKIE脚本记录，有很大的用处。

function get_cookie(Name) {

var search = Name + "="

var returnvalue = "";

if (documents.cookie.length > 0) {

offset = documents.cookie.indexOf(search)

if (offset != -1) { // if cookie exists

offset += search.length

// set index of beginning of value

end = documents.cookie.indexOf(";", offset);

// set index of end of cookie value

if (end == -1)

end = documents.cookie.length;

returnvalue=unescape(documents.cookie.substring(offset, end))

}

return returnvalue;

}

function loadpopup(){

if (get_cookie('popped')==''){

openpopup()

documents.cookie="popped=yes"

}

说明：以上是JS代码，请自己加起始符和结束符

becket_zheng 2009-11-19 15:07 发表评论

40中常用javascript语句

becket_zheng — Thu, 19 Nov 2009 07:06:00 GMT

40中常用javascript语句
http://hi.baidu.com/gotodoit/blog/item/6a8dad1303446d8a6538db86.html

2009-11-12 10:50

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
< table border oncontextmenu=return(false)>< td>no< /table> 可用于Table

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

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

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

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

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

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

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

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

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

11. < input type=button value=查看网页源代码
onclick="window.location = "view-source:"+ "http://www.pconline.com.cn"">

12.删除时确认
< a href="javascript:if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"">删除< /a>

13. 取得控件的绝对位置
//Javascript
< script language="Javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
< /script>

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

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

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

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

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

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

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

1 solid #000000">< /textarea>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

36. 检测某个网站的链接速度：
把如下代码加入< body>区域中:
< script language=Javascript>
tim=1
setInterval("tim++",100)
b=1
var autourl=new Array()
autourl[1]="www.njcatv.net"
autourl[2]="javacool.3322.net"
autourl[3]="www.sina.com.cn"
autourl[4]="www.nuaa.edu.cn"
autourl[5]="www.cctv.com"
function butt(){
document.write("< form name=autof>")
for(var i=1;i< autourl.length;i++)
document.write("< input type=text name=txt"+i+" size=10 value=测试中……> =》< input type=text
name=url"+i+" size=40> =》< input type=button value=GO

onclick=window.open(this.form.url"+i+".value)>
")
document.write("< input type=submit value=刷新>< /form>")
}
butt()
function auto(url){
document.forms[0]["url"+b].value=url
if(tim>200)
{document.forms[0]["txt"+b].value="链接超时"}
else
{document.forms[0]["txt"+b].value="时间"+tim/10+"秒"}
b++
}
function run(){for(var i=1;i< autourl.length;i++)document.write("< img src=http://"+autourl+"/"+Math.random()+"

width=1 height=1

onerror=auto("http://"+autourl+"")>")}
run()< /script>

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

38.页面进入和退出的特效
进入页面< meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出页面< meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为

1-23:
0 矩形缩小
1 矩形扩大
2 圆形缩小
3 圆形扩大
4 下到上刷新
5 上到下刷新
6 左到右刷新
7 右到左刷新
8 竖百叶窗
9 横百叶窗
10 错位横百叶窗
11 错位竖百叶窗
12 点扩散
13 左右到中间刷新
14 中间到左右刷新
15 中间到上下
16 上下到中间
17 右下到左上
18 右上到左下
19 左上到右下
20 左下到右上
21 横条
22 竖条
23 以上22种随机选择一种

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

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

becket_zheng 2009-11-19 15:06 发表评论

107个常用Javascript语句

becket_zheng — Thu, 19 Nov 2009 07:06:00 GMT

107个常用Javascript语句
http://hi.baidu.com/oxolin/blog/item/69e4adfb2ab5d26e024f562b.html

2009-10-27 13:04

1.返回顶部javascript:scroll(0,0)
2.替换空链接重置到页面首端：javascript:void(null) or javascript:;
------------------------------------------------------------
1.document.write(""); 输出语句
2.JS中的注释为//
3.传统的HTML文档顺序是:document->html->(head,body)
4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)
5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID號").name(或value)
6.一个小写转大写的JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase();
7.JS中的值类型:String,Number,Boolean,Null,Object,Function
8.JS中的字符型转换成数值型:parseInt(),parseFloat()
9.JS中的数字转换成字符型:("" 变量)
10.JS中的取字符串长度是:(length)
11.JS中的字符与字符相连接使用號.
12.JS中的比较操作符有:==等于,!=不等于,>,>=,<.<=
13.JS中声明变量使用:var来进行声明
14.JS中的判断语句结构:if(condition){}else{}
15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop}
16.循环中止的命令是:break
17.JS中的函数定义:function functionName([parameter],...){statement[s]}
18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.
19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self
20.状態栏的设置:window.status="字符";
21.弹出提示信息:window.alert("字符");
22.弹出確认框:window.confirm();
23.弹出输入提示框:window.prompt();
24.指定当前显示链接的位置:window.location.href="URL"
25.取出窗体中的所有表单的数量:document.forms.length
26.关闭文档的输出流:document.close();
27.字符串追加连接符: =
28.创建一个文档元素:document.createElement(),document.createTextNode()
29.得到元素的方法:document.getElementById()
30.设置表单中所有文本型的成员的值为空:
var form = window.document.forms[0]
for (var i = 0; i if (form.elements.type == "text"){
form.elements.value = "";
}
}
31.复选按钮在JS中判断是否选中:document.forms[0].checkThis.checked (checked属性代表为是否选中返回TRUE或FALSE)
32.单选按钮组(单选按钮的名称必须相同):取单选按钮组的长度document.forms[0].groupName.length
33.单选按钮组判断是否被选中也是用checked.
34.下拉列表框的值:document.forms[0].selectName.options[n].value (n有时用下拉列表框名称加上.selectedIndex来確定被选中的值)
35.字符串的定义:var myString = new String("This is lightsword");
36.字符串转成大写:string.toUpperCase(); 字符串转成小写:string.toLowerCase();
37.返回字符串2在字符串1中出现的位置:String1.indexOf("String2")!=-1则说明没找到.
38.取字符串中指定位置的一个字符:StringA.charAt(9);
39.取出字符串中指定起点和终点的子字符串:stringA.substring(2,6);
40.数学函数:Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的最在值,Math.pow(value1,10)返回value1的十次方,Math.round(value1)四舍五入函数,Math.floor
(Math.random()*(n 1))返回隨机数
41.定义日期型变量:var today = new Date();
42.日期函数列表:dateObj.getTime()得到时间,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,dateObj.getMonth()得到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期几,dateObj.getHours()得到小时,dateObj.getMinutes()得到分,dateObj.getSeconds()得到
秒,dateObj.setTime(value)设置时间,dateObj.setYear(val)设置年,dateObj.setMonth(val)设置月,dateObj.setDate(val)设置日,dateObj.setDay(val)设置星期几,dateObj.setHours设置小时,dateObj.setMinutes(val)设置分,dateObj.setSeconds(val)设置秒 [注意:此日期时间从0开始计]
43.FRAME的表示方式: [window.]frames[n].ObjFuncVarName,frames
["frameName"].ObjFuncVarName,frameName.ObjFuncVarName
44.parent代表父亲对象,top代表最顶端对象
45.打开子窗口的父窗口为:opener
46.表示当前所属的位置:this
47.当在超链接中调用JS函数时用:(javascript :)来开头后面加函数名
48.在老的浏览器中不执行此JS:
49.引用一个文件式的JS:
50.指定在不支持脚本的浏览器显示的HTML:
51.当超链和onCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例:dfsadf
52.JS的內建对象
有:Array,Boolean,Date,Error,EvalError,Function,Math,Number,Object,RangeError,ReferenceError,RegExp,String,SyntaxError,TypeError,URIError
53.JS中的换行:\n
54.窗口全屏大小:
55.JS中的all代表其下层的全部元素
56.JS中的焦点顺序:document.getElementByid("表单元素").tabIndex = 1
57.innerHTML的值是表单元素的值:如

"how are you"

,则innerHTML的值就是:how are you
58.innerTEXT的值和上面的一样,只不过不会把这种標记显示出来.
59.contentEditable可设置元素是否可被修改,isContentEditable返回是否可修改的状態.
60.isDisabled判断是否为禁止状態.disabled设置禁止状態
61.length取得长度,返回整型数值
62.addBehavior()是一种JS调用的外部函数文件其扩展名为.htc
63.window.focus()使当前的窗口在所有窗口之前.
64.blur()指失去焦点.与FOCUS()相反.
65.select()指元素为选中状態.
66.防止用户对文本框中输入文本:onfocus="this.blur()"
67.取出该元素在页面中出现的数量:document.all.tags("div(或其它HTML標记符)").length
68.JS中分为两种窗体输出:模態和非模態.window.showModaldialog(),window.showModeless()
69.状態栏文字的设置:window.status='文字',默认的状態栏文字设置:window.defaultStatus = '文字.';
70.添加到收藏夹:external.AddFavorite("http://www.dannyg.com";,"jaskdlf");
71.JS中遇到脚本错误时不做任何操作:window.onerror = doNothing; 指定错误句柄的语法为:window.onerror = handleError;
72.JS中指定当前打开窗口的父窗口:window.opener,支持opener.opener...的多重继续.
73.JS中的self指的是当前的窗口
74.JS中状態栏显示內容:window.status="內容"
75.JS中的top指的是框架集中最顶层的框架
76.JS中关闭当前的窗口:window.close();
77.JS中提出是否確认的框:if(confirm("Are you sure?")){alert("ok");}else{alert("Not Ok");}
78.JS中的窗口重定向:window.navigate("http://www.sina.com.cn";);
79.JS中的打印:window.print()
80.JS中的提示输入框:window.prompt("message","defaultReply");
81.JS中的窗口滚动条:window.scroll(x,y)
82.JS中的窗口滚动到位置:window.scrollby
83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout
84.JS中的模態显示在IE4 行,在NN中不行:showModalDialog("URL"[,arguments][,features]);
85.JS中的退出之前使用的句柄:function verifyClose(){event.returnValue="we really like you and hope you will stay longer.";}} window.=verifyClose;
86.当窗体第一次调用时使用的文件句柄:onload()
87.当窗体关闭时调用的文件句柄:onunload()
88.window.location的属性: protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80),pathname("/a/a.html"),hash("#giantGizmo",指跳转到相应的锚记),href(全部的信息)
89.window.location.reload()刷新当前页面.
90.window.history.back()返回上一页,window.history.forward()返回下一页,window.history.go(返回第几页,也可以使用访问过的URL)
91.document.write()不换行的输出,document.writeln()换行输出
92.document.body.noWrap=true;防止链接文字折行.
93.变量名.charAt(第几位),取该变量的第几位的字符.
94."abc".charCodeAt(第几个),返回第几个字符的ASCii码值.
95.字符串连接:string.concat(string2),或用 =进行连接
96.变量.indexOf("字符",起始位置),返回第一个出现的位置(从0开始计算)
97.string.lastIndexOf(searchString[,startIndex])最后一次出现的位置.
98.string.match(regExpression),判断字符是否匹配.
99.string.replace(regExpression,replaceString)替换现有字符串.
100.string.split(分隔符)返回一个数组存储值.
101.string.substr(start[,length])取从第几位到指定长度的字符串.
102.string.toLowerCase()使字符串全部变为小写.
103.string.toUpperCase()使全部字符变为大写.
104.parseInt(string[,radix(代表进制)])强制转换成整型.
105.parseFloat(string[,radix])强制转换成浮点型.
106.isNaN(变量):测试是否为数值型.
107.定义常量的关键字:const,定义变量的关键字:var

becket_zheng 2009-11-19 15:06 发表评论