XSS Cheet Sheet
XSS (Cross Site Scripting) Cheat Sheet 给出很多示例代码用于 XSS 攻击测试，而且标识出所支持的浏览器（版本）。用这里边的代码做了一些测试，效果相当好 
Comments (1)
AJAX in Zend Framework
Zend Framework 1.5 已经对 AJAX 有了不错的支持，使用上也很简单。主要涉及到的类是 Zend_Controller_Action_Helper_AjaxContext，这个类中的方法 initContext() 中通过判断 XHR 头来确定是否是 AJAX 调用：
<?php
/**
* Initialize AJAX context switching
*
* Checks for XHR requests; if detected, attempts to perform context switch.
*
* @param string $format
* @return void
*/
public function initContext($format = null)
{
$this->_currentContext = null;
if (!$this->getRequest()->isXmlHttpRequest()) {
return;
}
return parent::initContext($format);
}
?>
可以使用 ZF 默认的目录部署来写一个简单示例，目录结构如下：
application/
controllers/
IndexController.php
models/
views/
scripts/
index/
index.phtml
demo.ajax.phtml
helpers/
filters/
html/
.htaccess
index.php
js/
jquery.js
JavaScript 库使用 jQuery。需要写代码的文件是 IndexController.php、index.phtml 和 demo.ajax.phtml。IndexController.php 包含了 2 个 actions，一个是 index，一个是 demo。index 中有个按钮用于测试 AJAX 请求，而请求的目标则是 demo action。demo 对应的视图名字后缀使用了 .ajax.phtml，这是默认的设置。Front controller 的调用很简单：
<?php
require_once 'Zend/Controller/Front.php';
Zend_Controller_Front::getInstance()
->setParam('useDefaultControllerAlways', true)
->setControllerDirectory('../application/controllers')
->dispatch();
?>
IndexController.php 在初始化的时候，需要初始化 AjaxContext Helper：
<?php
class IndexController extends Zend_Controller_Action
{
public function init()
{
$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('demo', 'html')
->initContext();
}
public function indexAction()
{
}
public function demoAction()
{
$this->view->hello = 'Hello, world! ('.date('H:i:s').')';
}
}
addActionContext('demo', 'html') 表明 demoAction 为 AJAX 调用的 action，格式为 html。除了 html 之外，还支持 xml、json 等。AJAX 请求时需要给请求的 url 加上 format=html 的 GET 参数。indexAction 对应的视图 index.phtml 代码如下：
<html>
<head>
<title>AJAX DEMO</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="<?=$this->url()?>js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ajax_button').click(function(){ //#ajax_button 的 onclick 事件触发
var url = '<?=$this->url(array('controller'=>'index','action'=>'demo'))?>'; //AJAX 请求的目标 URL
$.get(url, {'format':'html'}, function(data){ //这里传递了 format=html 的 GET 参数
$('#hello_message').html(data); //将 AJAX 返回的内容显示在 #hello_message 里边
});
});
});
</script>
</head>
<body>
<p><input type="button" id="ajax_button" value="AJAX Call" />
<p id="hello_message"><p>
</body>
</html>
demoAction 对应的视图 demo.ajax.phtml 内容很简单，只是输出 $hello：
<?=$this->hello?>
这就是一个完整的 AJAX 过程。使用 Zend Framework 写出来的代码其实很简单。如果想更加简单一些，可以写个 jQuery AJAX 的 view helper，封装 jQuery 的 JavaScript 代码。
Zend Framework 还提供了 autocomplete（自动完成）AJAX 的 action helper：Zend_Controller_Action_Helper_AutoCompleteScriptaculous 和 Zend_Controller_Action_Helper_AutoCompleteDojo，一个是 for Scriptaculous 的，另一个是 for Dojo 的。
Class Query
Class Query 是在 jQuery 之上开发的一个以 class 为主的 JavaScript 库。众所周知，jQuery 语法简单，应用方便，但却由于过于简单，没能提供更加强大的功能，比如 class/object 的扩展，这些对于协调开发都是不可或缺的。在这方面 prototype，mootools 做的都比较好。Class Query 正是出于此目的出现的。
看看这段代码：
<script src="jquery.js"></script>
<script src="classy.js"></script>
<script>
jQuery.Events.addEventListener(document, "ready", function(){
jQuery.querySelectorAll("div").forEach(function(elem){
jQuery.DOM.append(elem, " <b>More...</b>");
});
jQuery.querySelectorAll("div b").forEach(function(elem){
jQuery.Events.addEventListener(elem, "click", function(elem, event){
var next = jQuery.Traversal.nextSibling(elem);
var animation = jQuery.Effects.buildAnimation( next, {height: "toggle"});
amimation.start();
});
});
});
</script>
class/object 可以扩展：
jQuery.DOM.boldWrapInner = jQuery.DOM.wrapInner.extend({
attach: function(elem){
this._super(elem, "<b></b>");
}
});
Happy April Fools Day 2008 
JavaScript Image Cropper UI
JavaScript Image Cropper UI，一个用 JavaScript 实现的超酷的图片裁剪器，基于 Prototype 和 script.aculo.us 实现的，效果很不错，也很使用。看看 DEMO 吧，呵呵。
Features:
- Un-obtrusive
- Based on Prototype and script.aculo.us
- Image editing package styling & functionality, the crop area functions and looks like those found in popular image editing software
- Dynamic inclusion of required styles
- Drag to draw areas
- Shift drag to draw/resize areas as squares
- Selection area can be moved
- Selection area can be resized using resize handles
- Allows dimension ratio limited crop areas
- Allows minimum dimension crop areas
- Allows maximum dimensions crop areas, if both min & max set as the same value then we'll get a fixed cropper size on the axes as appropriate and the resize handles will not be displayed as appropriate
- Allows dynamic preview of resultant crop (if minimum width & height are provided), this is implemented as a subclass so can be removed if not required
- Movement of selection area by arrow keys (shift + arrow key will move selection area by 10 pixels)
- All operations stay within bounds of image
- All functionality & display compatible with most popular browsers supported by Prototype, tested in:
- PC: IE 6 & 5.5, Firefox 1.5, Opera 8.5 (see known issues) & 9.0b
- MAC: Camino 1.0, Firefox 1.5, Safari 2.0
Prototype & script.aculo.us 参考文档（CHM 格式）
Kjell Bublitz 发布了 Prototype 的 CHM API 文档 和 script.aculo.us 的参考文档（包括 CHM、PDF 格式）。下载下来看了一下，还是很不错的，强力推荐，文档中还带有详细用法说明及代码实例。对于 Mac 下的用户，可以使用 Chmox 来浏览 CHM 格式的文档。
