无风的港湾 » js

ASP防注入新方式，希望对大家是有用的

江小邪 — Wed, 28 Jul 2010 02:00:27 +0000

最近我的网站经常把js脚本注入到数据，清除了又来。先后在网上找了很多的方法，还是没有用的，十分恼火。

首先先告诉大家一个批量清除代码的sql语句。

update 表名 set 字段=replace(字段,’script src=http://3b3.org/c.js>
1、分析那些无聊的人，或者有些病态的人究竟做了些什么。

通过iis的日志或者microsoft urlscan 日志查看，在一些通过id查询数据库内容的时候后面被人加了一段很长的字符窜。

%%3B%%44%%65%%43%%4C%%61%%52%%45%%类似这样的字符窜，一定是其他的方式编码

首先我们先用工具分析下如此之长的字符窜究竟包含了些什么内容。

通过批量替换工具把%%全部替换成空，然后把得到的字符串通过其他的转码工具，转成字符窜。

;DeCLaRE @S NvArCHaR(4000);SeT @S=CaSt(0×45这里代码去掉了06F007200 aS NvArChAR(4000));ExEc(@S);–

就是一段与通过id查询数据库同时执行的sql，就给数据库某些表的字段加入了js病毒连接。

2、所以我们的原来的防sql注入的字符串就需要升级了。

如果过滤16进制

; 对应 3B

DeCLaRE 对应 4465434C615245

@ 对应 40

NvArCHaR 对应 4E76417243486152

set 对应 536554

CaSt 对应 43615374

as 对应 6153

exec 对应 45784563

- 对应 2D

把16进制的代码用|隔开放到injdata 里面

injdata = “3B|2D|’|;|and|exec|insert|select|delete%20from|update|count|”

然后自己测试下，程序是否拦击了这些16进制的代码，本人测试过是可以拦击的，如果不加入这些是不拦击的

照样可以注入到数据库。

AJAX的各种控件和类库

江小邪 — Sun, 25 Jul 2010 16:49:49 +0000

Ajax控件和类库现在真的太多了，不知不觉中增加了Ajax的神秘性和复杂性，看到版内很多人为此费解和伤神，决定发此贴谈谈本人对Ajax的观点，希望能让大家对Ajax有一个本质的认识。

　　观点一：Ajax和服务器端技术毫不相关

　　严格的说，与传统web开发相比，Ajax是完完全全的客户端技术。由于很多控件封装了客户端和服务器端的通信过程，因此很多问题也因通信而起。事实上，不论何种Ajax技术，服务器端都是返回的一个纯文本流，再由客户端来处理这个文本。这段文本可以是xml格式，也可以是一个Html片段，也可以是一段JavaScript脚本，或者仅是一个字符串。服务器端仅仅是作为一个数据接口，客户端使用XMLHttpRequest对象来请求这个页面，服务器端在页面内写入结果文本，这个过程和普通的web开发没有任何区别。所不同的只是，客户端在异步获取结果后，不是直接显示在页面，而是由客户端的Javascript脚本处理后再显示在页面。至于各种控件所谓的能返回DataSet对象，Date对象，或者其他的数据类型，都是封装了这个处理过程的结果。

　　观点二：DOM模型是Ajax最本质的技术

　　之所以没有把XMLHttpRequest列为最本质的技术，因为本人觉得它实在是太简单了，它只是可以让浏览器在后台请求一个页面，并将其内容交给JavaScript处理。真正的核心应该是：DOM模型，即文档对象模型。在DOM模型里，Html标记都被认为是一个对象，例如：div对象，table对象等等。DOM模型就规定了这些对象所具有的属性、方法和事件。通过这些性质，可以对一个已经显示于浏览器的页面进行内容的修改，例如增加节点、修改节点位置，删除节点等等。而不仅仅是一个innerHTML属性这么简单，虽然这是一个很有用的属性。

　　观点三：在使用Ajax控件前理解它们的实现

　　使用Ajax控件的确可以提高效率，但如果你空中楼阁般使用控件，那就得不偿失了。从一个控件换到另外一个控件又会有一个漫长的学习曲线。所以应该从底层了解其，况且Ajax实在不是什么高深的技术。其实任何东西的最底层其实都是简单的，但如果封装了这些底层的东西，事情会变得复杂和难以理解。以Asp.net为例，它的定制特性可以使得只要在方法前加上[ajax method]类似这样的标志就可以称为一个异步方法，相信这使得Asp.net的Ajax开发显得更加“高效”或者是“神秘”，而更多的事情则被封装了。同样记住一条，任何对服务器端的请求仅仅是返回纯文本，我们不一定要依赖于封装好的处理过程，而完全可以自己来实现。

　　观点四：学好JavaScript

　　在大多数人看来，JavaScript总不是那么一种正规的语言，随便copy一段就碰巧能运行，学过c之类的人，一看也能看懂，而且在浏览器中常常有脚本错误提示，所以潜意识觉得总不能付之以大任。事实上，要学好Ajax，这就完全是一种错误的看法。javascript作为一种脚本语言，其语法的确不是很严格，但并不妨碍其完成诸多复杂的任务，没有JavaScript，就没有Ajax。所以本人强烈建议，学Ajax前，一定要好好研究一番JavaScript，一般来讲，如果能顺利看懂prototype框架的代码（如：prototype-1.3.1.js），你的JavaScript水平就基本过关了。同时对DOM模型也可以算有一个基本的了解。

　　观点五：Ajax点缀：CSS

　　用JavaScript控制CSS其实很简单，基本上每个DOM对象都有一个style对象，只要把css属性里的”-”去掉，并让随后的字母变为大写就可以作为属性使用了，例如：element.style.backgroundColor=”#f00″;在css是：选择符 {background-color:#f00}

　　一口气说这么多，希望对大家有点用处。

innerHTML、innerText和outerHTML的用法

江小邪 — Sun, 25 Jul 2010 16:46:30 +0000

用法：

<div id=”test”>
test1 test2

在JS中可以使用：

test.innerHTML:

　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
　　上例中的test.innerHTML的值也就是“test1 test2 ”。

test.innerText:

　　从起始位置到终止位置的内容, 但它去除Html标签
　　上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

　　除了包含innerHTML的全部内容外, 还包含对象标签本身。
　　上例中的text.outerHTML的值也就是

test1 test2

完整示例：

test1 test2

javascript:alert(test.innerHTML)”>innerHTML内容
inerHTML内容
 outerHTML内容

特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：

/gim,”))”>无HTML,符合W3C标准

XMLHTTP对象封装技术

江小邪 — Sun, 25 Jul 2010 16:43:39 +0000

Ajax技术的实现主要依赖于xmlhttprequest，但我们在调用其来进行异步数据的传输时，由于xmlhttp是个短线过程（处理事件完成后就销毁）如果不对该对象进行包装处理的话，就不得不在需要调用的地方重新构建xmlhttprequest，每次调用都要写一大段的代码，实在不是个好办法。好在现在很多开源的ajax框架都提供了对xmlhttp封装的方案。这里以ajaxtags自带的prototype-1.4.0.js为母版，来看看如何将xmlhttp对象封装成一个可复用的方法。

在prototype.js中，首先定义了一个变量：Ajax
var Ajax = {
getTransport: function() {
return Try.these(
function() {return new ActiveXObject(‘Msxml2.XMLHTTP’)},
function() {return new ActiveXObject(‘Microsoft.XMLHTTP’)},
function() {return new XMLHttpRequest()}
) || false;
},

activeRequestCount: 0
}

变量返回了一个xmlhttprequest，可以看到，如果我们调用了Ajax.getTransport()，每次都会返回一个新的xmlhttprequest对象。

在Ajax变量中定义了一个基础方法Ajax.Base和该基础方法的原型（初始时，每个脚本方法默认都有个空的原型，该原型会继承Object的原型，如果我们在Object中改变了原型，则所有的脚本方法都会被改变。）该基础方法被Ajax.Request所继承，注意的是，如果在Ajax.Request中填充了继承的原型的同名方法或变量，则会实现重载。

Ajax.Base原型中最主要的是setOptions方法，过会我们就会用到。
setOptions: function(options) {
this.options = {
method: ‘post’,
asynchronous: true,
parameters: ”
}

prototype中对request是通过定义Ajax.Request原型（Ajax.Request.prototype）来实现的。

但我们并不能直接对Ajax.Request进行调用，主要原因是Ajax.Request并没有提供一个统一处理的过程。而且我们可能需要通过request 再取得response。（试想一下，客户那边发出一条信息，都始终没与收到回复，那是会让人觉得很恼火的事~），prototype同样为我们封装好了resoponse（Ajax.Responders），但两者都是相互独立的，如何把他们进行整合呢？

在 prototype中给我们提供了两个方案，一个是Ajax.Updater，另一个是Ajax.PeriodicalUpdater，两个共同点都是必须传入3个参数：

container：

response数据要传达的位置，该位置通过html标签的id进行定义，比如你要把返回的数据输出到html中的某个＜div＞中，则只要把container改成该id的值就可以了。如果找不到该container，则会发生脚本错误。

url：

request请求要传递的目的地。该目的地应该是个servlet或jspservlet，因为request对象只能被servlet中的do***方法自动获取。

options：

结构应该与上面Ajax.Base定义的setOptions（）中的option结构相同，如果为空或不写，则采用 Ajax.Base定义的初始值（没有传递任何参数时使用）。

两者的区别在与Ajax.Updater返回给container的是完整的responseText，只有在responseText完全取得又没发生异常时才会把内容写到container里面，而PeriodicalUpdater在获取responseText时，不管是否已经完整取得，就把内容填进container，直到发生异常或完全取得responseText。大多数情况应该使用第一种方法，因为第一种方法在发生异常时会把异常信息显示在container里面，而第二种就不一定了。

既然已经把xmlhttp封装好了，我们只需要设置好前面所说的3个参数就可以了，要注意的是，设置options参数，一定要按照base中的options结构进行设置，如果我们使用post方法，还可以在opitons中设置postBody属性，把要传递的queryString 放到body中,一个使用post方法进行传递的脚本例子如下：

/*表单提交用post方法*/
function doRequest(container,paraments,url){
var options ={
method: ‘post’,
asynchronous: true,
postBody: paraments
};
new Ajax.Updater(container,url,options);
}

最后不得不说的是中文编码问题，prototype对传递的参数都进行了编码转换工作，每个传递值通过encodeURIComponent　进行了处理．编码会被转换成utf－8，在后台获取request时，应该统一使用request.setCharacterEncoding(“UTF-8″)对request设置编码，而不必管页面的编码格式是什么．如果使用post方法进行传递数据，则会自动执行:

request．setHeader(‘Content-type’,'application/x-www-form-urlencoded’).确保传递数据编码格式的正确.

ajax基础知识:js事件触发大全

江小邪 — Sun, 25 Jul 2010 16:42:48 +0000

onactivate 当对象设置为活动元素时触发。
onbeforeactivate 对象要被设置为当前元素前立即触发。
onbeforecut 当选中区从文档中删除之前在源对象触发。
onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即触发。
onbeforeeditfocus 在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。
onbeforepaste 在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
onclick 在用户用鼠标左键单击对象时触发。
oncontextmenu 在用户使用鼠标右键单击客户区打开上下文菜单时触发。
oncontrolselect 当用户将要对该对象制作一个控件选中区时触发。
oncut 当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。
ondblclick 当用户双击对象时触发。
ondeactivate 当 activeElement 从当前对象变为父文档其它对象时触发。
ondrag 当进行拖曳操作时在源对象上持续触发。
ondragend 当用户在拖曳操作结束后释放鼠标时在源对象上触发。
ondragenter 当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。
ondragleave 当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。
ondragover 当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。
ondragstart 当用户开始拖曳文本选中区或选中对象时在源对象上触发。
ondrop 当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。
onfocusin 当元素将要被设置为焦点之前触发。
onfocusout 在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。
onhelp 当用户在浏览器为当前窗口时按 F1 键时触发。
onkeydown 当用户按下键盘按键时触发。
onkeypress 当用户按下字面键时触发。
onkeyup 当用户释放键盘按键时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmousemove 当用户将鼠标划过对象时触发。
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmouseover 当用户将鼠标指针移动到对象内时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
onmousewheel 当鼠标滚轮按钮旋转时触发。
onmove 当对象移动时触发。
onmoveend 当对象停止移动时触发。
onmovestart 当对象开始移动时触发。
onpaste 当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。
onpropertychange 当在对象上发生对象上发生属性更改时触发。
onreadystatechange 当对象状态变更时触发。
onresizeend 当用户更改完控件选中区中对象的尺寸时触发。
onresizestart 当用户开始更改控件选中区中对象的尺寸时触发。
onselectionchange 当文档的选中状态改变时触发。
onstop 当用户单击停止按钮或离开 Web 页面时触发。

ajax的缺点

江小邪 — Sun, 25 Jul 2010 16:41:11 +0000

下面是我对一部分缺陷的看法：

为Ajax而Ajax(Using Ajax for the sake of Ajax.)

很同意这点，当一个技术本身的生存意义由于它自身的亮点而被抹杀，不知道是这个技术的幸运还是不幸。

干掉了back按钮(Breaking the back button)

back按钮是一个标准的web站点UI的重要功能。然后，后退按钮没法和js很好的合作……
gmail似乎作的很好？不过没去仔细看过gmail如何实现后退和js相容的，被这个mistake一提醒，也许这也是ue的一个切口哦。

点击的时候没有提供一个可视化的提示(Not giving immediate visual cues for clicking widgets)

……也许是我没看懂，觉得写这段的人自相矛盾。。他说没提供可视化提示，不过是拿gmail右上角的红色提示作为例子。

阻挡了离线用户于门外(Leaving offline people behind)

看标题就清楚了，不过我持保留意见，web application和离线浏览本身似乎就存在着矛盾，要整合，可能要动很多脑子

别让我等(Don’t make me wait)

不过，ajax本身就存在着如果客户端的带宽不够，它的展示就会一塌糊涂的问题，这是它的先天缺陷，也是它崛起的先天因素－－由于网速和带宽的不断增大，使得服务端与客户端的频繁通信成为可能。

显式的传递敏感信息(Sending sensitive information in the clear)

使用js传递数据，本身似乎就存在着这个风险，在我找到反对意见之前，我倾向认同这点－－https协议除外。

假设ajax发展是一个单平台的发展。(Assuming AJAX development is single platform development)

作者文中的观点是ajax由于必须兼容多个浏览器，而没法做到只需要编码到标准的js就行，还要考虑到各个浏览器的问题……这个是js的问题，和ajax关系不大吧？

忘掉了可能多人在同时使用同一个应用(Forgetting that multiple people might be using the same application at the same time)

嗯，这其实是一个同步的问题，在b/s系统中这是一个麻烦的问题……当然，也许并不麻烦，做一个标记位就解决了吧？

太多代码让浏览器慢下来(Too much code makes the browser slow)

呃……同意这点，虽然在代码优化之后会有很大改善，但js本身运行速度慢这个缺陷还是会成为一个瓶颈。

不计划要那些禁用或者没有js的用户(Not having a plan for those who do not enable or have JavaScript)

呃……我在页面上用ajax的时候就准备放弃这些用户了，我没google那么闲，作两套系统，一套用ajax，一套纯页面。不过养成一个良好的编码习惯还是有必要，比如在超链接中不要直接设置href=”javascript:…”而使用onmouseup或者onclick来触发事件，偶尔也为别人考虑考虑嘛，而且我也不能保证我的js程序在所有的浏览器上通吃。

不期然的页面闪烁和改变(Blinking and changing parts of the page unexpectedly)

我没经历过以前网页中blink标签的骚扰，所以我对作者的反感有点摸不着头脑，我觉得在适当的提示之后刷新某块页面总比整个页面的刷新看起来舒服。

没法把超链接发给朋友以及收藏(Not using links I can pass to friends or bookmark)

嘿嘿，这就是我上面提及的那点，如果编码习惯够好－－而且时间够多，在超链接中为非js用户和js用户提供两套方案是可行的。

同步导致的批量操作(Asynchronously performing batch operations)

作者的意思是说ajax一次性把原来要分几次作的操作一次做掉，而导致他没法跟踪每个元素变化，没法回溯，呃……也许是有这种需求吧。。不过似乎也是可以解决的吧？

导致页面滚动并让我迷失位置（Scrolling the page and making me lose my place）

作者认为插入文本到一个页面中会导致页面发生滚动，并让其迷失方向，我没看过这么恶心的效果，没法评价，不过我对于一些ajax的导航作的不好表示不满意，我经常会迷失于一些ajax程序中而不知道我刚才上一步到了哪里……

发明了新的UI习惯（Inventing new UI conventions）

呵呵，作者用了一句话来描述这个缺点：“点击一个不明显的东东来产生一个不明显的结果”。这个归纳倒是满准确的，在很多ajax程序中，用户完全是作为一个瞎子，在抖抖索索的摸着这个ajax程序大象，在到处瞎点一气并瞎拖一气之后才掌握这个程序的用法。但是换个角度来说，最开始的web页面不也是一样？没有开始的困难接触，不会有之后的进步，只要有足够的帮助，上手任何东西都应该不会太难－－除非这东西本来就不想让人觉得好用，那就是其它的问题了。

阻止了爬虫（Blocking Spidering）

同意这点，我在犹豫着使用ajax的时候，就在考虑爬虫对js的不感冒，以及爬虫该如何理解我那些以奇怪方式加载的页面，去解析ajax库似乎是一个不可能的事情，爬虫又不是人脑，如果爬虫可以媲美人脑，那就是《骇客帝国4》了。

字符集（Character Sets）

ajax本身对字符集的支持比较缺失，这个这个……设置成utf-8吧，不过作者最后也是这么说的。

使用超链接改变状态（Changing state with links (GET requests)）

作者认为主流的ajax应用程序都是用get方式来工作，而这违反了W3对GET和POST方法的使用建议……我少见多怪，主流的ajax应用程序我没怎么去看，不知道是不是真的都用get，虽然ajax编码用get简单，但不表示ajax不能用post吧？

没有连带改变页面中其它相关部分（Not cascading local changes to other parts of the page）

因为ajax让人很容易控制页面中的特定部分，所以也容易导致过于关注某个点而失去对整体布局的关注。嗯嗯……这是编码的问题，表怪到ajax头上。

问题报告（Problem reporting）

作者认为服务端的程序错误，很容易再现并捕捉，而客户端的错误要重现就比较麻烦，嗯，支持这点，不过还是和ajax关系不大……

投资回报(Return on Investment)

作者认为ajax能够提升应用程序的可用性，但是富客户端程序并不会比纯html版本好多少……忽略这个观点，来人，把作者拖出去，账责五十

拙劣地模仿浏览器页面跳转行为（Mimicing browser page navigation behavior imperfectly）

……忽略，没看到作者所描述的情况。

基于JSON的高级AJAX开发技术

江小邪 — Sun, 25 Jul 2010 16:39:46 +0000

一、引言

　　毫无疑问，AJAX已经成为当今Web开发中一种强有力的用户交互技术，但是它的许多可能性应用仍然鲜为人知。在本文中，我们将来共同探讨如何使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将详细讨论如何创建一组对象(在其它语言中经常被当作一个包)，如何把这些对象串行化为JSON以发送到服务器端，以及如何把服务器端JSON反串行化为客户端JavaScript对象。

　　提示：你可以在Douglas Crockford的网站上找到本文中使用的JSON分析器。

　　在继续阅读前，本文假定你已经掌握了JavaScript技术并且了解如何创建一个基本的AJAX引擎，并经由AJAX技术向服务器端发出请求和从服务器端接收响应。为了更好地理解本文中示例，你需要下载本文相应的源码文件。

　　二、开始

　　为了进一步抽象我们的AJAX请求并有助于我们以后在不同的应用程序间共享AJAX引擎代码，本文使用了一个我自己创建的AJAX引擎。为了使用这个引擎，我们简单地导入三个JavaScript文件并且向一个名为AjaxUpdater的对象发出请求。然后，由该引擎来负责处理其它任务，包括把响应代理到在该请求中指定的回调方法中。下面的示例展示了我们如何使用这个引擎发出请求以及导入相关的文件：

＜script type=”text/javascript”src=”javascript/model/Ajax.js”＞＜/script＞
＜script type=”text/javascript” src=”javascript/model/HTTP.js”＞＜/script＞
＜script type=”text/javascript” src=”javascript/model/AjaxUpdater.js”＞＜/script＞
＜script type=”text/javascript”＞
document.load = AjaxUpdater.Update(’GET’， URL， callback);
＜/script＞

　　首先，让我们来讨论JavaScript对象。

三、 JavaScript对象

　　JavaScript以前经常被误解，似乎它主要用于实现客户浏览器端图形效果。其实，JavaScript是一种强有力的语言，特别当它与AJAX以及一个应用程序的服务器端相结合时;但是，即使在客户端，JavaScript也能够实现远比你预料得多的多的功能。面向对象的JavaScript就是一个示例，它能够使我们创建对象，扩展内在对象，甚至能够把我们的对象创建成包以达到更容易的管理之目的。

　　在本文示例中，我们将创建三个对象：Auto，Car和Wheel。其中，每一个都是简单的对象;在此，我们仅使用它们来展示如何创建一个基本包。

　　首先，Auto对象被声明为一个新的对象：

　　var Auto = new Object();

　　注意，这个Auto对象将用作Car对象的父类。因此，Car对象将成为Auto对象的一个属性，只不过它被分离到另一个文件中以更易于管理(这个概念经常被用于其它面向对象的语言中，但是在JavaScript中却并不经常提起它)。下面是这个Car对象相应的代码：

　　Auto.Car = new Object();
　　Auto.Car.color = “#fff”;
　　Auto.Car.setColor = function(_color)
　　{
　　Auto.Car.color = _color;
　　}
　　Auto.Car.setColor(“#333″);

　　如你所见，该Car对象是Auto对象的一个子对象—这分明是一种类对象层次结构。这个对象有一个名为color的属性和一个用于设置它的方法。在此，我们把color属性设置为灰色以覆盖掉缺省的白色。当在后面我们串行化该对象时请牢记住这个事实。

　　下一个对象，Wheel，是Car的一个子对象：

Auto.Car.Wheel = new Object();
Auto.Car.Wheel.color = “#000″;

　　在此，Wheel是一个基本对象，但是它展示了对象层次中的又一个层。这个对象有一个称为color的缺省值为黑色(“#000”)的属性。

　　下面，让我们来分析一下为什么这些对象如此重要以及我们是如何使用它们提供的简单的属性的。

四、把JavaScript对象串行化为JSON

　　借助于JSON分析器，我们可以很容易地把刚才创建的JavaScript对象串行化为JSON。首先，我们需要下载该分析器的一个副本，并且要把它添加到文档中。下面是我在本文示例中用于导入该脚本的相应的代码：

＜script type=”text/javascript” src=”javascript/utils/jsonparser.js”＞＜/script＞

　　我已经把该分析器添加到我的javascript目录，即一个称为utils的子目录下。

　　下面是最终的包括到其中用于导入适当的JavaScript文件的代码片断：

以下是引用片段：
＜script type=”text/javascript” src=”javascript/Auto.js”＞＜/script＞
＜script type=”text/javascript” src=”javascript/Car.js”＞＜/script＞
＜script type=”text/javascript” src=”javascript/Wheel.js”＞＜/script＞
＜script type=”text/javascript” src=”javascript/utils/jsonparser.js”＞＜/script＞
＜script type=”text/javascript” src=”javascript/model/Ajax.js”＞＜/script＞
＜script type=”text/javascript” src=”javascript/model/HTTP.js”＞＜/script＞
＜script type=”text/javascript” src=”javascript/model/AjaxUpdater.js”＞＜/script＞

　　在导入适当的文件后，我们可以通过把两个div元素和一个onload事件简单地添加到HTML文档中开始串行化。这两个div元素将分别拥有ID：body和loading。其中，这个loading标签将由AJAX引擎使用来指示进度情况，而body标签将用于显示消息。

＜div id=”loading”＞＜/div＞
＜div id=”body”＞＜/div＞

　　onload事件相应于body元素并且设置它的innerHTML属性为JavaScript对象(作为一个串行化的JSON字符串)。为了实现这一目的，我在Auto对象上使用了jsonparser.js文件内的toJSONString方法：

＜body onload=”document.getElementById(’body’).innerHTML = ’＜b＞Local objects serialized as JSON＜/b＞
Auto Object: ’+ Auto.toJSONString();”＞

　　这段代码使用了Auto对象及其所有的子对象，并且使用JSON分析器的toJSONString方法把它们串行化为一个JSON字符串。然后，该数据可以被用作服务器端的一种数据交换格式。

　　你可能还记得，在前面我们曾调用了一个称为setColor的方法来改变Car对象的颜色。当时，我使用它是因为我想向你展示串行化能够在运行时刻的任何点上实现，而且还为了反映出对象中最新的数据。

　　如果你仔细分析一下onload事件，你会注意到，Car和Wheel对象都包装在方括号内，这些方括号代表了父对象(即Auto)。这意味着，该串行化的JavaScript对象能够在运行时刻被发送到服务器端以存储最新的数据，并且也可以在应用程序启动时从服务器端进行接收以便从数据库中检索多数的当前数据。最精彩的部分在于，为了创建一种“无缝”的过程，所有与服务器之间实现的数据交换都可以使用JSON技术来实现。

　　下面，让我们来看一下相同的数据是如何从服务器端接收的，以及它们是如何被使用最新的数据(典型地，来源于一个数据库)串行化为客户端JavaScript对象的。

五、把JSON反串行化为客户端JavaScript对象

　　在本文中，我简单地把一个静态文件创建为JSON响应，但是在实际开发中，你可以把这些数据存储在一个数据库中并且使用一种服务器端语言返回它。基于这一能力，我们就可以轻松地创建一种强有力的数据交换过程!在前面，我们已经分析了这一串行化过程。凭基本的AJAX体验，你应该能够理解数据是如何被寄送到服务器端的。现在，让我们着手讨论反串行化的问题。首先来看一个针对本文示例提供的静态JSON文件。这个文件其实是我们在上一节中串行化的数据：

}}

　　作为一个请求JSON文件的示例，当我们点击下列链接时将请求这个串行化的Auto对象：

＜a href=”javascript:AjaxUpdater.Update(’GET’， ’json/data.js’， displayResponse);”＞Get remote JSON＜/a＞

　　一旦接收到响应消息，我们的称为displayResponse回调方法就会被激活，然后，我们就能够反串行化并开始使用这些对象：

＜script type=”text/javascript”＞
function displayResponse()
{
　if(Ajax.checkReadyState(’loading’) == “OK”)
　{
　　var Auto = Ajax.request.responseText.parseJSON();
　　document.getElementById(“body”).innerHTML += ”
＜b＞Remote JSON unserialized＜/b＞”;
　　document.getElementById(“body”).innerHTML += ”
Car color: “+Auto.Car.color;
　　document.getElementById(“body”).innerHTML += ”
Wheel color: “+Auto.Car.Wheel.color;
　}
}
＜/script＞

　　这是相当激动人心的一部分!一旦我们拥有了该responseText，我们就能够简单地使用JSON分析器中的parseJSON方法来从串行化的数据中重建我们的Auto对象。借助于这个新的Auto对象，我们就可以调用相应的子对象。这个特征允许我们在服务器和客户端来回发送对象—而不必进行大量的分析工作，然而在以前标准的XML响应情况下我们将却必须这样做。这样以来，我们就可以创建出能够基于AJAX技术来保留自身状态的客户端JavaScript对象

PHP封装常用Javascript为JS类以便快速调用

江小邪 — Sat, 22 May 2010 21:32:51 +0000

php
# $Id: js.class.php,v 0.1 p $

// 禁止直接访问该页面
if (basename($HTTP_SERVER_VARS['PHP_SELF']) == "js.class.php") {
header("HTTP/1.0 404 Not Found");
}

# Purpose 封装了一些常用的Javascript代码，以便在PHP中快速调用

class JS{
function JS(){}

     #返回上页
     # @param $step 返回的层数默认为1
     function Back($step = -1){
         $msg = "history.go(".$step.");";
         JS::_Write($msg);
         JS::FreeResource();
         exit;
     }

    # 弹出警告的窗口
    # @param $msg 警告信息
     function Alert($msg){
         $msg = "alert(\"".$msg."\");";
         JS::_Write($msg);
     }

    # 写js
    # @param $msg
     function _Write($msg) {
         echo "";
     }

     # 刷新当前页
     function Reload(){
         $msg = "location.reload();";
         JS::FreeResource();
         JS::_Write($msg);
         exit;
     }

     #刷新弹出父页
     function ReloadOpener(){
         $msg = "if (opener)     opener.location.reload();";
         JS::_Write($msg);
     }

     #跳转到url
     #@param $url 目标页
     function Goto($url){
         $msg = "location.href = ‘$url’;";
         JS::FreeResource();
         JS::_Write($msg);
         exit;
     }

     #关闭窗口
     function Close(){
         $msg = "window.close()";
         JS::FreeResource();
         JS::_Write($msg);
         exit;
     }

     #提交表单
     #@param $frm 表单名
     function Submit($frm){
         $msg = $frm.".submit();";
         JS::_Write($msg);
     }

    #关闭数据库连接
    function FreeResource(){
         // 数据库连接标志
         global $conn;
         if (is_resource($conn))
             @mysql_close($conn);
     }
}
?>

JS实现全景图效果360度旋转

江小邪 — Sat, 22 May 2010 21:20:17 +0000

<div style="border-bottom: red 1px solid; position: absolute; border-left: red 1px solid; width: 500px; height: 190px; overflow: hidden; border-top: red 1px solid; cursor: hand; border-right: red 1px solid" id="div1" onmouseout="change(1);" onmousemove="getpos()" onmouseover="clearTimeout(scrl);">http://www.jb51.net/upload/out500b.jpg" />

nginx的rewrite规则

江小邪 — Sat, 22 May 2010 21:17:23 +0000

正则表达式匹配，其中：

* ~ 为区分大小写匹配
* ~* 为不区分大小写匹配
* !~和!~*分别为区分大小写不匹配及不区分大小写不匹配
文件及目录匹配，其中：

* -f和!-f用来判断是否存在文件
* -d和!-d用来判断是否存在目录
* -e和!-e用来判断是否存在文件或目录
* -x和!-x用来判断文件是否可执行
flag标记有：

* last 相当于Apache里的[L]标记，表示完成rewrite
* break 终止匹配, 不再匹配后面的规则
* redirect 返回302临时重定向地址栏会显示跳转后的地址
* permanent 返回301永久重定向地址栏会显示跳转后的地址
一些可用的全局变量有，可以用做条件判断(待补全)

$args
$content_length
$content_type
$document_root
$document_uri
$host
$http_user_agent
$http_cookie
$limit_rate
$request_body_file
$request_method
$remote_addr
$remote_port
$remote_user
$request_filename
$request_uri
$query_string
$scheme
$server_protocol
$server_addr
$server_name
$server_port
$uri
结合QeePHP的例子

if (!-d $request_filename) {
rewrite ^/([a-z-A-Z]+)/([a-z-A-Z]+)/?(.*)$ /index.php?namespace=user&controller=$1&action=$2&$3 last;
rewrite ^/([a-z-A-Z]+)/?$ /index.php?namespace=user&controller=$1 last;
break;
多目录转成参数
abc.domian.com/sort/2 => abc.domian.com/index.php?act=sort&name=abc&id=2
}

if ($host ~* (.*)\.domain\.com) {
set $sub_name $1;
rewrite ^/sort\/(\d+)\/?$ /index.php?act=sort&cid=$sub_name&id=$1 last;
}
目录对换
/123456/xxxx -> /xxxx?id=123456

rewrite ^/(\d+)/(.+)/ /$2?id=$1 last;
例如下面设定nginx在用户使用ie的使用重定向到/nginx-ie目录下：

if ($http_user_agent ~ MSIE) {
rewrite ^(.*)$ /nginx-ie/$1 break;
}
目录自动加“/”

if (-d $request_filename){
rewrite ^/(.*)([^/])$ http://$host/$1$2/ permanent;
}
禁止htaccess

location ~/\.ht {
deny all;
}
禁止多个目录

location ~ ^/(cron|templates)/ {
deny all;
break;
}
禁止以/data开头的文件
可以禁止/data/下多级目录下.log.txt等请求;

location ~ ^/data {
deny all;
}
禁止单个目录
不能禁止.log.txt能请求

location /searchword/cron/ {
deny all;
}
禁止单个文件

location ~ /data/sql/data.sql {
deny all;
}
给favicon.ico和robots.txt设置过期时间;
这里为favicon.ico为99天,robots.txt为7天并不记录404错误日志

location ~(favicon.ico) {
log_not_found off;
expires 99d;
break;
}

location ~(robots.txt) {
log_not_found off;
expires 7d;
break;
}
设定某个文件的过期时间;这里为600秒，并不记录访问日志

location ^~ /html/scripts/loadhead_1.js {
access_log off;
root /opt/lampp/htdocs/web;
expires 600;
break;
}
文件反盗链并设置过期时间
这里的return 412 为自定义的http状态码，默认为403，方便找出正确的盗链的请求
“rewrite ^/ http://leech.xxx.com/leech.gif;”显示一张防盗链图片
“access_log off;”不记录访问日志，减轻压力
“expires 3d”所有文件3天的浏览器缓存

location ~* ^.+\.(jpg|jpeg|gif|png|swf|rar|zip|css|js)$ {
valid_referers none blocked *.xxx.com *.xxx.net localhost 208.97.167.194;
if ($invalid_referer) {
rewrite ^/ http://leech.xxx.com/leech.gif;
return 412;
break;
}
access_log off;
root /opt/lampp/htdocs/web;
expires 3d;
break;
}
只充许固定ip访问网站，并加上密码

root /opt/htdocs/www;
allow 208.97.167.194;
allow 222.33.1.2;
allow 231.152.49.4;
deny all;
auth_basic “C1G_ADMIN”;
auth_basic_user_file htpasswd;
将多级目录下的文件转成一个文件，增强seo效果
/job-123-456-789.html 指向/job/123/456/789.html

rewrite ^/job-([0-9]+)-([0-9]+)-([0-9]+)\.html$ /job/$1/$2/jobshow_$3.html last;
将根目录下某个文件夹指向2级目录
如/shanghaijob/

指向 /area/shanghai/
如果你将last改成permanent，那么浏览器地址栏显是/location/shanghai/

rewrite ^/([0-9a-z]+)job/(.*)$ /area/$1/$2 last;
上面例子有个问题是访问/shanghai 时将不会匹配

rewrite ^/([0-9a-z]+)job$ /area/$1/ last;
rewrite ^/([0-9a-z]+)job/(.*)$ /area/$1/$2 last;
这样/shanghai 也可以访问了，但页面中的相对链接无法使用，
如./list_1.html真实地址是/area/shanghia/list_1.html会变成/list_1.html,导至无法访问。

那我加上自动跳转也是不行咯
(-d $request_filename)它有个条件是必需为真实目录，而我的rewrite不是的，所以没有效果

if (-d $request_filename){
rewrite ^/(.*)([^/])$ http://$host/$1$2/ permanent;
}
知道原因后就好办了，让我手动跳转吧

rewrite ^/([0-9a-z]+)job$ /$1job/ permanent;
rewrite ^/([0-9a-z]+)job/(.*)$ /area/$1/$2 last;
文件和目录不存在的时候重定向：

if (!-e $request_filename) {
proxy_pass http://127.0.0.1;
}
域名跳转

server
{
listen 80;
server_name jump.xxx.com;
index index.html index.htm index.php;
root /opt/lampp/htdocs/www;
rewrite ^/ http://www.xxx.com/;
access_log off;
}
多域名转向

server_name www.xxx.com;
index index.html index.htm index.php;
root /opt/lampp/htdocs;
if ($host ~ “xxx\.net”) {
rewrite ^(.*) http://www.xxx.com$1 permanent;
}
三级域名跳转

if ($http_host ~* “^(.*)\.i\.xxx\.com$”) {
rewrite ^(.*) http://top.xxx.com$1;
break;
}
域名镜向

server
{
listen 80;
server_name mirror.xxx.com;
index index.html index.htm index.php;
root /opt/lampp/htdocs/www;
rewrite ^/(.*) http://www.xxx.com/$1 last;
access_log off;
}
某个子目录作镜向

location ^~ /zhaopinhui {
rewrite ^.+ http://zph.xxx.com/ last;
break;
}
discuz ucenter home (uchome) rewrite

rewrite ^/(space|network)-(.+)\.html$ /$1.php?rewrite=$2 last;
rewrite ^/(space|network)\.html$ /$1.php last;
rewrite ^/([0-9]+)$ /space.php?uid=$1 last;
discuz 7 rewrite

rewrite ^(.*)/archiver/((fid|tid)-[\w\-]+\.html)$ $1/archiver/index.php?$2 last;
rewrite ^(.*)/forum-([0-9]+)-([0-9]+)\.html$ $1/forumdisplay.php?fid=$2&page=$3 last;
rewrite ^(.*)/thread-([0-9]+)-([0-9]+)-([0-9]+)\.html$ $1/viewthread.php?tid=$2&extra=page\%3D$4&page=$3 last;
rewrite ^(.*)/profile-(username|uid)-(.+)\.html$ $1/viewpro.php?$2=$3 last;
rewrite ^(.*)/space-(username|uid)-(.+)\.html$ $1/space.php?$2=$3 last;
rewrite ^(.*)/tag-(.+)\.html$ $1/tag.php?name=$2 last;
给discuz某版块单独配置域名

server_name bbs.xxx.com;

location = / {
if ($http_host ~ news\.xxx.com$)
{
rewrite ^.+ http://news.xxx.com/forum-831-1.html last;
break;
}
}
discuz ucenter 头像 rewrite 优化

location ^~ /ucenter {
location ~ .*\.php?$
{
#fastcgi_pass unix:/tmp/php-cgi.sock;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
include fcgi.conf;
}

location /ucenter/data/avatar {
log_not_found off;
access_log off;
location ~ /(.*)_big\.jpg$ {
error_page 404 /ucenter/images/noavatar_big.gif;
}
location ~ /(.*)_middle\.jpg$ {
error_page 404 /ucenter/images/noavatar_middle.gif;
}
location ~ /(.*)_small\.jpg$ {
error_page 404 /ucenter/images/noavatar_small.gif;
}
expires 300;
break;
}
}
jspace rewrite

location ~ .*\.php?$
{
#fastcgi_pass unix:/tmp/php-cgi.sock;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
include fcgi.conf;
}

location ~* ^/index.php/
{
rewrite ^/index.php/(.*) /index.php?$1 break;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
include fcgi.conf;
}

《高性能网站建设指南》读书笔记

江小邪 — Sat, 22 May 2010 21:06:26 +0000

规则1，减少HTTP请求

这是最重要的原则，如果14条规则里只能选一条，那就是它了。可以通过多种方法减少HTTP请求，例如合并图片，合并JS和CSS等等。这一点薄荷网有很多改进的余地，首先应该把现在的JS合并了。

规则2，使用内容发布网络

内容发布网络就是CDN了，但是CDN似乎挺贵的，目前还不适合薄荷网，不过可以考虑自己弄一个网通的静态资源服务器解决有中国特色的可恶的南北互通问题。

规则3，添加Expires头

这个没什么好说的，是个建网站的人都应该知道。目前薄荷网图片,css,js,flash过期时间设置了3年，可以说是永久了，：） Expires有个麻烦的地方是内容更新问题，Ruby on Rails这方面处理的非常棒，它是在文件名后面自动带了

资源文件的timestamp，完美解决。

规则4，压缩组件

这个也没什么好说的，配置一下web server的压缩功能，减少服务器带宽，加快响应，立杆见影。

规则5，将样式表放在顶部

这条有点新鲜，虽然平常都是这么做的，但是没有想过不这样做有什么麻烦。如果不这样，浏览器是不能做到边下载边显示，用户体验很糟糕。薄荷网现在有部分样式没放在顶部，回头检查测试一下看看。

规则6，将脚本放在底部

这条是第一次听说，有些震惊。原因在于浏览器下载执行脚本的时候，会阻塞其他资源的下载，这样导致整体响应时间变长。薄荷网的脚本几乎都是放在顶部的，回头测试比较下看看。

规则7，避免CSS表达式

CSS表达是简直像个Bug，可以弃用，寻求变通的解决方便，比如事件处理器等。

规则8，使用外部的JavaScript和CSS

相信大家大部分情形下都是使用外联的，但纯粹的处理而已，内联JS和CSS似乎更快，考虑到缓存和复用，大部分情况显然是外联更划算。因此，在一些情景，例如首页，还是可以使用内联的。

规则9，减少DNS查找

DNS耗费的时间是相当可观的，因此同一页面的域名数量最好控制在2~4之间。

规则10，精简JavaScript

精简JavaScript可以显著减少Js文件的大小，减少下载时间。

规则11，避免重定向

get的重定向可以通过web server的url rewrite很好解决。

规则12，移除重复脚本

重复的脚本既增加一次http请求，又要重复执行，当然坚决移除了。

规则13，配置ETag

目前web server的ETag实现不但起不到好的效果，通常还使性能变得更差，真是一个糟糕的设计。

所以静态资源尽量去除ETag配置。但是对于刷新频率不高的Rails动态页面，这个似乎是个不错的大幅

加快响应的方法，值得再深入好好研究一番。

规则14，使Ajax可缓存

就是使用之前的规则应用于Ajax请求，：）

js表单输入判断

江小邪 — Wed, 02 Jan 2008 20:01:43 +0000

//函数名：chksafe
//功能介绍：检查是否含有"'",'\\',"/"
//参数说明：要检查的字符串
//返回值：0：是 1：不是

function chksafe(a)
{
return 1;
/* fibdn = new Array ("'" ,"\\", "、", ",", ";", "/");
i=fibdn.length;
j=a.length;
for (ii=0;ii{ for (jj=0;jj{ temp1=a.charAt(jj);
temp2=fibdn[ii];
if (temp1==temp2)
{ return 0; }
}
}
return 1;
*/
}

//函数名：chkspc
//功能介绍：检查是否含有空格
//参数说明：要检查的字符串
//返回值：0：是 1：不是

function chkspc(a)
{
var i=a.length;
var j = 0;
var k = 0;
while (k{
if (a.charAt(k) != " ")
j = j+1;
k = k+1;
}
if (j==0)
{
return 0;
}

if (i!=j)
{ return 2; }
else
{
return 1;
}
}

//函数名：chkemail
//功能介绍：检查是否为Email Address
//参数说明：要检查的字符串
//返回值：0：不是 1：是

function chkemail(a)
{ var i=a.length;
var temp = a.indexOf('@');
var tempd = a.indexOf('.');
if (temp > 1) {
if ((i-temp) > 3){

if ((i-tempd)>0){
return 1;
}

}
}
return 0;
}//opt1 小数 opt2 负数
//当opt2为1时检查num是否是负数
//当opt1为1时检查num是否是小数
//返回1是正确的，0是错误的
function chknbr(num,opt1,opt2)
{
var i=num.length;
var staus;
//staus用于记录.的个数
status=0;
if ((opt2!=1) && (num.charAt(0)=='-'))
{
//alert("You have enter a invalid number.");
return 0;

}
//当最后一位为.时出错
if (num.charAt(i-1)=='.')
{
//alert("You have enter a invalid number.");
return 0;
}

for (j=0;j{
if (num.charAt(j)=='.')
{
status++;
}
if (status>1)
{
//alert("You have enter a invalid number.");
return 0;
}
if (num.charAt(j)<'0' || num.charAt(j)>'9' )
{
if (((opt1==0) || (num.charAt(j)!='.')) && (j!=0))
{
//alert("You have enter a invalid number.");
return 0;
}
}
}
return 1;
}
//函数名：chkdate
//功能介绍：检查是否为日期
//参数说明：要检查的字符串
//返回值：0：不是日期 1：是日期

function chkdate(datestr)
{
var lthdatestr
if (datestr != "")
lthdatestr= datestr.length ;
else
lthdatestr=0;

var tmpy="";
var tmpm="";
var tmpd="";
//var datestr;
var status;
status=0;
if ( lthdatestr== 0)
return 0

for (i=0;i{ if (datestr.charAt(i)== '-')
{
status++;
}
if (status>2)
{
//alert("Invalid format of date!");
return 0;
}
if ((status==0) && (datestr.charAt(i)!='-'))
{
tmpy=tmpy+datestr.charAt(i)
}
if ((status==1) && (datestr.charAt(i)!='-'))
{
tmpm=tmpm+datestr.charAt(i)
}
if ((status==2) && (datestr.charAt(i)!='-'))
{
tmpd=tmpd+datestr.charAt(i)
}

}
year=new String (tmpy);
month=new String (tmpm);
day=new String (tmpd)
//tempdate= new String (year+month+day);
//alert(tempdate);
if ((tmpy.length!=4) || (tmpm.length>2) || (tmpd.length>2))
{
//alert("Invalid format of date!");
return 0;
}
if (!((1<=month) && (12>=month) && (31>=day) && (1<=day)) )
{
//alert ("Invalid month or day!");
return 0;
}
if (!((year % 4)==0) && (month==2) && (day==29))
{
//alert ("This is not a leap year!");
return 0;
}
if ((month<=7) && ((month % 2)==0) && (day>=31))
{
//alert ("This month is a small month!");
return 0;

}
if ((month>=8) && ((month % 2)==1) && (day>=31))
{
//alert ("This month is a small month!");
return 0;
}
if ((month==2) && (day==30))
{
//alert("The Febryary never has this day!");
return 0;
}

return 1;
}
//函数名：fucPWDchk
//功能介绍：检查是否含有非数字或字母
//参数说明：要检查的字符串
//返回值：0：含有 1：全部为数字或字母

function fucPWDchk(str)
{
var strSource ="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var ch;
var i;
var temp;

for (i=0;i<=(str.length-1);i++)
{

ch = str.charAt(i);
temp = strSource.indexOf(ch);
if (temp==-1)
{
return 0;
}
}
if (strSource.indexOf(ch)==-1)
{
return 0;
}
else
{
return 1;
}
}

function jtrim(str)
{ while (str.charAt(0)==" ")
{str=str.substr(1);}
while (str.charAt(str.length-1)==" ")
{str=str.substr(0,str.length-1);}
return(str);
}

//函数名：fucCheckNUM
//功能介绍：检查是否为数字
//参数说明：要检查的数字
//返回值：1为是数字，0为不是数字

function fucCheckNUM(NUM)
{
var i,j,strTemp;
strTemp="0123456789";
if ( NUM.length== 0)
return 0
for (i=0;i{
j=strTemp.indexOf(NUM.charAt(i));
if (j==-1)
{
//说明有字符不是数字
return 0;
}
}
//说明是数字
return 1;
}
//函数名：fucCheckTEL
//功能介绍：检查是否为电话号码
//参数说明：要检查的字符串
//返回值：1为是合法，0为不合法

function fucCheckTEL(TEL)
{
var i,j,strTemp;
strTemp="0123456789-()# ";
for (i=0;i{
j=strTemp.indexOf(TEL.charAt(i));
if (j==-1)
{
//说明有字符不合法
return 0;
}
}
//说明合法
return 1;
}
//函数名：fucCheckLength
//功能介绍：检查字符串的长度
//参数说明：要检查的字符串
//返回值：长度值

function fucCheckLength(strTemp)
{
var i,sum;
sum=0;
for(i=0;i{
if ((strTemp.charCodeAt(i)>=0) && (strTemp.charCodeAt(i)<=255))
sum=sum+1;
else
sum=sum+2;
}
return sum;
}

JS扩展函数集合

江小邪 — Fri, 17 Aug 2007 02:52:41 +0000

[runcode]

js取得网页中的选中文字

江小邪 — Fri, 17 Aug 2007 02:31:41 +0000

New Document

sadkfasldjfksahufksdahkjfdshakjfhsjkl

这种方法在FireFox和IE下全有效的

google个性主页的拖拽效果的js的完整注释

江小邪 — Thu, 16 Aug 2007 21:39:40 +0000

可以这里下载例子：
[file]attachment/200708/google_drag.rar[/file]

// 工具类，使用Util的命名空间，方便管理
var Util =
new Object();
// 获取http header里面的UserAgent，浏览器信息
Util.getUserAgent = navigator.userAgent;
// 是否是Gecko核心的Browser，比如Mozila、Firefox
Util.isGecko = Util.getUserAgent.indexOf( " Gecko " ) !=
- 1 ;
// 是否是Opera
Util.isOpera = Util.getUserAgent.indexOf( " Opera " ) !=
- 1 ;
// 获取一个element的offset信息，其实就是相对于Body的padding以内的绝对坐标
// 后面一个参数如果是true则获取offsetLeft，false则是offsetTop
// 关于offset、style、client等坐标的定义参考dindin的这个帖子：http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
Util.getOffset =
function (el, isLeft) {
var retValue =
0 ;
while (el !=
null ) {
retValue += el[ " offset "
+ (isLeft ?
" Left " : " Top " )];
el = el.offsetParent;
}
return retValue;
};
// 将一个function（参数中的funcName是这个fuction的名字）绑定到一个element上，并且以这个element的上下文运行，其实是一种继承，这个可以google些文章看看
Util.bindFunction =
function (el, fucName) {
return
function () {
return el[fucName].apply(el, arguments);
};
};
// 重新计算所有的可以拖拽的element的坐标，对同一个column下面的可拖拽图层重新计算它们的高度而得出新的坐标，防止遮叠
// 计算出来的坐标记录在pagePosLeft和pagePosTop两个属性里面
Util.re_calcOff =
function (el) {
for ( var i =
0 ; i < Util.dragArray.length; i ++ ) {
var ele = Util.dragArray;
ele.elm.pagePosLeft = Util.getOffset(ele.elm, true );
ele.elm.pagePosTop = Util.getOffset(ele.elm, false );
}
var nextSib = el.elm.nextSibling;
while (nextSib) {
nextSib.pagePosTop -= el.elm.offsetHeight;
nextSib = nextSib.nextSibling;
}
};

// 隐藏Google Ig中间那个table，也就是拖拽的容器，配合show一般就是刷新用，解决一些浏览器的怪癖
Util.hide =
function () {
Util.rootElement.style.display =
" none " ;
};
// 显示Google Ig中间那个table，解释同上
Util.show =
function () {
Util.rootElement.style.display =
"" ;
};

// 移动时显示的占位虚线框
ghostElement =
null ;
// 获取这个虚线框，通过dom动态生成
getGhostElement =
function () {
if ( ! ghostElement) {
ghostElement = document.createElement( " DIV " );
ghostElement.className =
" modbox " ;
ghostElement.backgroundColor =
"" ;
ghostElement.style.border =
" 2px dashed #aaa " ;
ghostElement.innerHTML =
" " ;
}
return ghostElement;
};

// 初始化可以拖拽的Element的函数，与拖拽无关的我去掉了
function draggable(el) {
// 公用的开始拖拽的函数

this ._dragStart = start_Drag;
// 公用的正在拖拽的函数

this ._drag = when_Drag;
// 公用的拖拽结束的函数

this ._dragEnd = end_Drag;
// 这个函数主要用来进行拖拽结束后的dom处理

this ._afterDrag = after_Drag;
// 是否正在被拖动，一开始当然没有被拖动

this .isDragging =
false ;
// 将这个Element的this指针注册在elm这个变量里面，方便在自己的上下文以外调用自己的函数等，很常用的方法

this .elm = el;
// 触发拖拽的Element，在这里就是这个div上显示标题的那个div

this .header = document.getElementById(el.id +
" _h " );
// 对于有iframe的element拖拽不同，这里检测一下并记录

this .hasIFrame =
this .elm.getElementsByTagName( " IFRAME " ).length >
0 ;
// 如果找到了header就绑定drag相关的event

if ( this .header) {
// 拖拽时的叉子鼠标指针

this .header.style.cursor =
" move " ;
// 将函数绑定到header和element的this上，参照那个函数的说明
Drag.init( this .header, this .elm);
// 下面三个语句将写好的三个函数绑定给这个elemnt的三个函数钩子上，也就实现了element从draggable继承可拖拽的函数

this .elm.onDragStart = Util.bindFunction( this , " _dragStart " );
this .elm.onDrag = Util.bindFunction( this , " _drag " );
this .elm.onDragEnd = Util.bindFunction( this , " _dragEnd " );
}
};

// 下面就是draggable里面用到的那4个function
// 公用的开始拖拽的函数
function start_Drag() {
// 重置坐标，实现拖拽以后自己的位置马上会被填充的效果
Util.re_calcOff( this );
// 记录原先的邻居节点，用来对比是否被移动到新的位置

this .origNextSibling =
this .elm.nextSibling;
// 获取移动的时候那个灰色的虚线框

var _ghostElement = getGhostElement();
// 获取正在移动的这个对象的高度

var offH =
this .elm.offsetHeight;
if (Util.isGecko) {
// 修正gecko引擎的怪癖吧
offH -= parseInt(_ghostElement.style.borderTopWidth) *
2 ;
}
// 获取正在移动的这个对象的宽度

var offW =
this .elm.offsetWidth;
// 获取left和top的坐标

var offLeft = Util.getOffset( this .elm, true );
var offTop = Util.getOffset( this .elm, false );
// 防止闪烁，现隐藏
Util.hide();
// 将自己的宽度记录在style属性里面

this .elm.style.width = offW +
" px " ;
// 将那个灰框设定得与正在拖动的对象一样高，比较形象
_ghostElement.style.height = offH +
" px " ;
// 把灰框放到这个对象原先的位置上

this .elm.parentNode.insertBefore(_ghostElement, this .elm.nextSibling);
// 由于要拖动必须将被拖动的对象从原先的盒子模型里面抽出来，所以设定position为absolute，这个可以参考一下css布局方面的知识

this .elm.style.position =
" absolute " ;
// 设置zIndex，让它处在最前面一层，当然其实zIndex=100是让它很靠前，如果页面里有zIndex>100的，那……

this .elm.style.zIndex =
100 ;
// 由于position=absolute了，所以left和top实现绝对坐标定位，这就是先前计算坐标的作用，不让这个模型乱跑，要从开始拖动的地方开始移动

this .elm.style.left = offLeft +
" px " ;
this .elm.style.top = offTop +
" px " ;
// 坐标设定完毕，可以显示了，这样就不会闪烁了
Util.show();
// 这里本来有个ig_d.G，没搞明白干什么用的，不过没有也可以用，谁知道麻烦告诉我一声，不好意思

// 还没有开始拖拽，这里做个记号

this .isDragging =
false ;
return
false ;
};
// 在拖拽时的相应函数，由于绑定到鼠标的move这个event上，所以会传入鼠标的坐标clientX, clientY
function when_Drag(clientX, clientY) {
// 刚开始拖拽的时候将图层变透明，并标记为正在被拖拽

if ( ! this .isDragging) {
this .elm.style.filter =
" alpha(opacity=70) " ;
this .elm.style.opacity =
0.7 ;
this .isDragging =
true ;
}
// 被拖拽到的新的column（当然也可以是原来那个）

var found =
null ;
// 最大的距离，可能是防止溢出或者什么bug

var max_distance =
100000000 ;
// 遍历所有的可拖拽的element，寻找离当前鼠标坐标最近的那个可拖拽元素，以便后面插入

for ( var i =
0 ; i < Util.dragArray.length; i ++ ) {
var ele = Util.dragArray;
// 利用勾股定理计算鼠标到遍历到的这个元素的距离

var distance = Math.sqrt(Math.pow(clientX – ele.elm.pagePosLeft, 2 ) + Math.pow(clientY – ele.elm.pagePosTop, 2 ));
// 自己已经浮动了，所以不计算自己的

if (ele ==
this ) {
continue ;
}
// 如果计算失败继续循环

if (isNaN(distance)) {
continue ;
}
// 如果更小，记录下这个距离，并将它作为found

if (distance < max_distance) {
max_distance = distance;
found = ele;
}
}
// 准备让灰框落脚

var _ghostElement = getGhostElement();
// 如果找到了另外的落脚点

if (found !=
null
&& _ghostElement.nextSibling != found.elm) {
// 找到落脚点就先把灰框插进去，这就是我们看到的那个灰框停靠的特效，有点像吸附的感觉，哈哈
found.elm.parentNode.insertBefore(_ghostElement, found.elm);
if (Util.isOpera) {
// Opera的现实问题，要隐藏/显示后才能刷新出变化
document.body.style.display =
" none " ;
document.body.style.display =
"" ;
}
}
};
// 拖拽完毕
function end_Drag() {
// 拖拽完毕后执行后面的钩子，执行after_Drag()，如果布局发生了变动了就记录到远程服务器，保存你拖拽后新的布局顺序

if ( this ._afterDrag()) {
// remote call to save the change
}
return
true ;
};
// 拖拽后的执行钩子
function after_Drag() {
var returnValue =
false ;
// 防止闪烁
Util.hide();
// 把拖拽时的position=absolute和相关的那些style都消除

this .elm.style.position =
"" ;
this .elm.style.width =
"" ;
this .elm.style.zIndex =
"" ;
this .elm.style.filter =
"" ;
this .elm.style.opacity =
"" ;
// 获取灰框

var ele = getGhostElement();
// 如果现在的邻居不是原来的邻居了

if (ele.nextSibling !=
this .origNextSibling) {
// 把被拖拽的这个节点插到灰框的前面
ele.parentNode.insertBefore( this .elm, ele.nextSibling);
// 标明被拖拽了新的地方
returnValue =
true ;
}
// 移除灰框，这是这个灰框的生命周期应该就结束了
ele.parentNode.removeChild(ele);
// 修改完毕，显示
Util.show();
if (Util.isOpera) {
// Opera的现实问题，要隐藏/显示后才能刷新出变化
document.body.style.display =
" none " ;
document.body.style.display =
"" ;
}
return returnValue;
};
// 可拖拽Element的原形，用来将event绑定到各个钩子，这部分市比较通用的，netvibes也是基本完全相同的实现
// 这部分推荐看dindin的这个，也会帮助理解，http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
var Drag = {
// 对这个element的引用，一次只能拖拽一个Element
obj: null ,
// element是被拖拽的对象的引用，elementHeader就是鼠标可以拖拽的区域
init: function (elementHeader, element) {
// 将start绑定到onmousedown事件，按下鼠标触发start
elementHeader.onmousedown = Drag.start;
// 将element存到header的obj里面，方便header拖拽的时候引用
elementHeader.obj = element;
// 初始化绝对的坐标，因为不是position=absolute所以不会起什么作用，但是防止后面onDrag的时候parse出错了

if (isNaN(parseInt(element.style.left))) {
element.style.left =
" 0px " ;
}
if (isNaN(parseInt(element.style.top))) {
element.style.top =
" 0px " ;
}
// 挂上空Function，初始化这几个成员，在Drag.init被调用后才帮定到实际的函数，可以参照draggable里面的内容
element.onDragStart =
new Function();
element.onDragEnd =
new Function();
element.onDrag =
new Function();
},
// 开始拖拽的绑定，绑定到鼠标的移动的event上
start: function (event) {
var element = Drag.obj =
this .obj;
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 看看是不是左键点击

if (event.which !=
1 ) {
// 除了左键都不起作用

return
true ;
}
// 参照这个函数的解释，挂上开始拖拽的钩子
element.onDragStart();
// 记录鼠标坐标
element.lastMouseX = event.clientX;
element.lastMouseY = event.clientY;
// 将Global的event绑定到被拖动的element上面来
document.onmouseup = Drag.end;
document.onmousemove = Drag.drag;
return
false ;
},
// Element正在被拖动的函数
drag: function (event) {
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 看看是不是左键点击

if (event.which ==
0 ) {
// 除了左键都不起作用

return Drag.end();
}
// 正在被拖动的Element

var element = Drag.obj;
// 鼠标坐标

var _clientX = event.clientY;
var _clientY = event.clientX;
// 如果鼠标没动就什么都不作

if (element.lastMouseX == _clientY && element.lastMouseY == _clientX) {
return
false ;
}
// 刚才Element的坐标

var _lastX = parseInt(element.style.top);
var _lastY = parseInt(element.style.left);
// 新的坐标

var newX, newY;
// 计算新的坐标：原先的坐标+鼠标移动的值差
newX = _lastY + _clientY – element.lastMouseX;
newY = _lastX + _clientX – element.lastMouseY;
// 修改element的显示坐标
element.style.left = newX +
" px " ;
element.style.top = newY +
" px " ;
// 记录element现在的坐标供下一次移动使用
element.lastMouseX = _clientY;
element.lastMouseY = _clientX;
// 参照这个函数的解释，挂接上Drag时的钩子
element.onDrag(newX, newY);
return
false ;
},
// Element正在被释放的函数，停止拖拽
end: function (event) {
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 解除对Global的event的绑定
document.onmousemove =
null ;
document.onmouseup =
null ;
// 先记录下onDragEnd的钩子，好移除obj

var _onDragEndFuc = Drag.obj.onDragEnd();
// 拖拽完毕，obj清空
Drag.obj =
null ;
return _onDragEndFuc;
},
// 解决不同浏览器的event模型不同的问题
fixE: function (ig_) {
if ( typeof ig_ ==
" undefined " ) {
ig_ = window.event;
}
if ( typeof ig_.layerX ==
" undefined " ) {
ig_.layerX = ig_.offsetX;
}
if ( typeof ig_.layerY ==
" undefined " ) {
ig_.layerY = ig_.offsetY;
}
if ( typeof ig_.which ==
" undefined " ) {
ig_.which = ig_.button;
}
return ig_;
}
};

// 下面是初始化的函数了，看看上面这些东西怎么被调用
var _IG_initDrag =
function (el) {
// column那个容器，在google里面就是那个table布局的tbody，netvibes用的

Util.rootElement = el;
// 这个tbody的行
Util._rows = Util.rootElement.tBodies[ 0 ].rows[ 0 ];
// 列，google是3列，其实也可以更多
Util.column = Util._rows.cells;
// 用来存取可拖拽的对象
Util.dragArray =
new Array();
var counter =
0 ;
for ( var i =
0 ; i < Util.column.length; i ++ ) {
// 搜索所有的column

var ele = Util.column;
for ( var j =
0 ; j < ele.childNodes.length; j ++ ) {
// 搜索每一column里面的所有element

var ele1 = ele.childNodes[j];
// 如果是div就把它初始化为一个draggable对象

if (ele1.tagName ==
" DIV " ) {
Util.dragArray[counter] =
new draggable(ele1);
counter ++ ;
}
}
}
};

// google的页面里可以拖动的部分的id是"t_1"
// 挂载到onload，载入完毕执行。不过实际上google没有用onload。
// 而是写在页面最下面，异曲同工吧，也许直接写在页面是种怪癖，或者也有可能是兼容性考虑。

// 请将下面两条被注释掉的代码加，到你自己下载的一个google ig页面里面，把里面的所有其余script删除，挂上这个js也可以拖拽了，哈哈
// _table=document.getElementById("t_1");
// window.onload = _IG_initDrag(_table);

// 其实看懂这些代码对学习javascript很有益，希望对大家能有帮助

得到对象以及鼠标在页面的绝对位置

江小邪 — Thu, 16 Aug 2007 20:18:34 +0000

获取页面元素的位置对我们很重要，如何获得元素位于页面的绝对位置呢？通过offsetLeft,offsetTop可以获得对象的左边距和上边距，但是不同浏览器因为对象处于的地位而会有些不同的解析，例如有些时候计算边距时没有把parent的边距计算进去，下面的函数将可以获得对象绝对的位置。

如下：
// get absolute Left position
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对左边距离
function getAbsoluteLeft( ob ){
if(!ob){return null;}
var obj = ob;
var objLeft = obj .offsetLeft;
while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
objLeft += obj .offsetParent.offsetLeft;
obj = obj .offsetParent;
}
return objLeft ;
}

// get absolute TOP position
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对上边距离
function getAbsoluteTop( ob ){
if(!ob){return null;}
var obj = ob;
var objTop = obj .offsetTop;
while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
objTop += obj .offsetParent.offsetTop;
obj = obj .offsetParent;
}
return objTop ;
}

获得页面的的宽高，左右边距有这些：
window.screen.width;
window.screen.height;
window.document.body.offsetWidth;
window.document.body.offsetHeight;
window.screen.availWidth;
window.screen.availHeight;
window.document.body.offsetWidth;
window.document.body.offsetHeight;
window.screen.availWidth;
window.screen.availHeight;
window.document.body.scrollWidth;
window.document.body.scrollHeight;
window.document.body.clientHeight;
window.document.body.clientWidth;

通过事件来获得鼠标位置主要有这些:
e.layerX;
e.layerY;
e.pageX;
e.pageY;
e.screenX;
e.screenY;
e.offsetX;
e.offsetY;
e.clientX;
e.clientY;

//获得对象相对于父级的位置
obj .offsetLeft;
obj .offsetTop;
obj .offsetWidth;
obj .offsetHeight;

——————————————————————————–

下面是各浏览器关于页面位置的全部属性,包括获得鼠标位于该位置的实时x,y坐标：getPosition.html

<div id="object" style="background-color:green;color:white" onmousemove="getPosition(this,event);" >object,请在此处移动鼠标div>

禁止刷新，回退的JS

江小邪 — Wed, 27 Dec 2006 23:37:54 +0000

Js的MessageBox

江小邪 — Wed, 27 Dec 2006 23:03:16 +0000

看到论坛上有人模仿alert　自己也写了一个。本来想模仿winapi里的MessageBox ，但可惜js 不支持　阻塞模式　，返回值只能用异步了。支持　FF ie opera ，DOCTYPE 可以申明　也可以不申明

存在问题：在opera 里图层不能透明　，对于页面内有iframe的也无法使用，在ie里无法遮住select。

CODE:
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

MessageBox演示

	普通演示
	回调演示一
	回调演示二
	回调演示三
	自定义演示

过滤HTML代码的函数包括过滤CSS和JS

江小邪 — Fri, 22 Dec 2006 01:10:32 +0000

'过滤HTML代码的函数包括过滤CSS和JS
Function RemoveHTML(strHTML) '过滤HTML代码的函数包括过滤CSS和JS
StrHtml = Replace(StrHtml,vbCrLf,"")
StrHtml = Replace(StrHtml,Chr(13)&Chr(10),"")
StrHtml = Replace(StrHtml,Chr(13),"")
StrHtml = Replace(StrHtml,Chr(10),"")
StrHtml = Replace(StrHtml," ","")
StrHtml = Replace(StrHtml," ","")
Dim objRegExp, Match, Matches
Set objRegExp = New Regexp
objRegExp.IgnoreCase = True
objRegExp.Global = True
'取闭合的<>
objRegExp.Pattern = ""
'进行匹配
Set Matches = objRegExp.Execute(strHTML)
' 遍历匹配集合，并替换掉匹配的项目
For Each Match in Matches
strHtml=Replace(strHTML,Match.Value,"")
Next
'取闭合的<>
objRegExp.Pattern = ""
'进行匹配
Set Matches = objRegExp.Execute(strHTML)
' 遍历匹配集合，并替换掉匹配的项目
For Each Match in Matches
strHtml=Replace(strHTML,Match.Value,"")
Next
'取闭合的<>
objRegExp.Pattern = "<.+?>"
'进行匹配
Set Matches = objRegExp.Execute(strHTML)
' 遍历匹配集合，并替换掉匹配的项目
For Each Match in Matches
strHtml=Replace(strHTML,Match.Value,"")
Next
RemoveHTML=strHTML
Set objRegExp = Nothing
End Function

动态CSS，换肤技术

江小邪 — Fri, 08 Dec 2006 20:00:15 +0000

常见的例子就是：一个站点上有多个页面样式提供浏览者选择。

同时，在选择了某样式后，再次打开该页面时，将仍然保持该样式。

自然会想到了Cookie技术

下面是HTML代码部分（另外再加需要的CSS文件就可以使用了）：

<HTML>

css">
换肤技术

请选择下面的下拉菜单测试换肤效果

css.css
css1.css
css2.css
css3.css

无风的港湾 » js

ASP防注入新方式，希望对大家是有用的

相关博文

AJAX的各种控件和类库

相关博文

innerHTML、innerText和outerHTML的用法

相关博文

XMLHTTP对象封装技术

相关博文

ajax基础知识:js事件触发大全

相关博文

ajax的缺点

相关博文

基于JSON的高级AJAX开发技术

相关博文

PHP封装常用Javascript为JS类以便快速调用

相关博文

JS实现全景图效果360度旋转

相关博文

nginx的rewrite规则

相关博文

《高性能网站建设指南》读书笔记

相关博文

js表单输入判断

相关博文

JS扩展函数集合

相关博文

js取得网页中的选中文字

相关博文

google个性主页的拖拽效果的js的完整注释

相关博文

得到对象以及鼠标在页面的绝对位置

相关博文

禁止刷新，回退的JS

相关博文

Js的MessageBox

相关博文

过滤HTML代码的函数包括过滤CSS和JS

相关博文

动态CSS，换肤技术

相关博文