TSOST - Blog of AlloVince

出于浏览器安全考虑，javascript是不能跨域访问的，即是说js使用XMLHTTPRequest的访问对象只限于同一域名，统一端口，统一协议下的数据。如果未加任何处理，js会报错nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)"。

但事实上大型系统往往需要跨越多台服务器传递数据，那么如何解决这一问题，时下有如下的若干解决方法：

1. 隐蔽iFrame
   实现成本：低
   被访问端控制权限：不需要
   实现方法：在页面上创建一个不可见的iframe，将所要访问的页面包含进来，然后通过操作iframe来获得所需数据。实际上这种解决方法已经和钓鱼网站没什么区别了，只不过是非恶意的而已。除非是做数据采集，否则不推荐。
2. document.domain
   实现成本：中
   被访问端控制权限：不需要
   实现方法：假如要访问ave7.net的数据，在代码开始时加入一行
   document.domain = 'ave7.net';
   即可。这大概是js本身提供的解决方案，但实用性并不高，尤其是多浏览器对document.domain的支持参差不齐，至今也没有一个像样的案例出现，不推荐。
3. 包含远程文件
   实现成本：中
   被访问端控制权限：需要
   实现方法：假如要访问ave7.net的数据，编写相应xxx.js文 件上传至ave7.net，在本地使用<script type="text/javascript" src="http://ave7.net/xxx.js"></script>将访问对象包含进来即可。这样等于完全绕开了ajax 访问，是一个较为实用的解决方案。缺点也很明显，需要两端都有控制权限，代码被迫分离给维护带来了不便，另外无法像Ajax一样判断程序执行到那个阶段， 如果远程服务器暂时无法访问，则可能产生致命性错误。
4. JSONP
   实现成本：高
   被访问端控制权限：需要

JSONP是JSON的一个子集，目前还是非官方的协议。形如
callback({jsondata});
即是把json数据用一对圆括号括住，前面加上回调函数实现，目前像jquery,dojo等js库都提供了jsonp的支持。

JSONP虽然是简单的通讯协议，但已经实现了很好的接口定义，虽然被访问段需要重新编写接口，但如果是比较复杂的程序应用，就显得十分有必要了。

以我的Blog动态调用vBulletin论坛信息实现简单单点登录为例。通信过程如下，括号内为传递的值：
Blog发起AJAX请求(session)->vBulletin接受请求(用户信息)->JSONP将用户信息与传入的session通过加密算法生成一个hash值(用户信息，hash)->Blog将接受到的用户信息以及session通过同样的加密算法计算hash值，如果和传入的hash值相同，则作为用户登录。

 

Read More

JQuery TagClouds Plugin Ver0.1

功能：将一个元素内的所有链接转换为Tag Clouds（标签云）形式，字体大小和颜色同时渐变。

Demo：见首页

Sample：

$(".tag_clouds").tagClouds();

更复杂一点的例子：

var option = {
	fontmax:22, //可选 默认值为22, TagCloud的最大fontsize(单位px)
	fontmax:11, //可选 默认值为11, TagCloud的最小fontsize(单位px)
	colorfrom:"#CACAFF", //可选 默认值为"#CACAFF", TagCloud的渐变颜色1(要突出显示的颜色)
	colorto:"#F8B3D0", //可选 默认值为"#F8B3D0", TagCloud的渐变颜色2
	patrn:/\(\d+\)$/ //可选 将Tag权值从链接中分离的正则表达式,默认形式为 标签(10)
}
$(".tag_clouds").tagClouds(option);

Plugin Source

/*
 * jQuery TagClouds Plugin
 * version: 0.1
 * @requires jQuery v1.2.2 or later
 *
 * Copyright (c) 2008 AlloVince
 * Examples at: http://allo.ave7.net/JQuery_TagClouds_Plugin
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 */
if(jQuery) (function($){

$.fn.tagClouds = function(option) {
	var fontmax = 21;
	var fontmin = 11;
	var colorfrom = "#CACAFF";
	var colorto = "#F8B3D0";
	var patrn=/\(\d+\)$/;
	if(option) {
		fontmax = option.fontmax ? option.fontmax : fontmax;
		fontmin = option.fontmin ? option.fontmin : fontmin;
		colorfrom = option.colorfrom ? option.colorfrom : colorfrom;
		colorto = option.colorto ? option.colorto : colorto;
		patrn = option.patrn ? option.patrn : colorto;
	}
	
	var tags = Array();
	var fontsize = Array(),fontcolor = Array();
	var i = 0;
	$(' > a',this).each(function(){
		var tag_count = patrn.exec($(this).text());
		var num=/\d+/;
		tags[i] = num.exec(tag_count);
		i++;
	});
	//数组复制
	var tmp = tags.slice(0);
	tmp.sort(function(a, b) {return b - a;});
	var max = tmp[0];
	var min = tmp[tmp.length-1];
	for(i = 0; i < tags.length ; i++) {
		if(tags[i] == max) {
			fontsize[i] = fontmax;
		}
		else if(tags[i] == min) {
			fontsize[i] = fontmin;
		}
		else {
			fontsize[i] = parseInt( (fontmax - fontmin)*(tags[i] - min)/(max - min) + fontmin);
		}
		fontcolor[i] = color(colorfrom,colorto,max - min + 1,tags[i] - min + 1);
	}

	i = 0;
	$(' > a',this).each(function(){
		
		$(this).css("font-size",fontsize[i] + "px");
		
		$(this).css("color",fontcolor[i]);
		
		$(this).mouseover(function(){
			$(this).animate({
				fontSize: fontmax + "px"
			}, 500);
		});
		
		i++;
		
	});

	
	// 颜色#FF00FF格式转为Array(255,0,255)
	function color2rgb(color){
		var r = parseInt(color.substr(1, 2), 16);
		var g = parseInt(color.substr(3, 2), 16);
		var b = parseInt(color.substr(5, 2), 16);
		return new Array(r, g, b);
	}
	// 颜色Array(255,0,255)格式转为#FF00FF
	function rgb2color(rgb) {
		var s = "#";
		for (var i = 0; i < 3; i++) {
			var c = Math.round(rgb[i]).toString(16);
			if (c.length == 1)
			c = '0' + c;
			s += c;
		}
		return s.toUpperCase();
	}
	
	function color(from,to,all,step){
		var Gradient = new Array(3);
		var A = color2rgb(from);
		var B = color2rgb(to);
		for (var i = 0; i < 3; i++) {
			Gradient[i] = A[i] + (B[i]-A[i]) / all * step;
		}
		return rgb2color(Gradient);
	}
}

})(jQuery);

---code end---

Read More

[http://code.google.com/p/syntaxhighlighter/|SyntaxHighlighter]是一个出色的语法高亮库，但实际使用，尤其是大量Js文件的包含，仍有不便之处。另外在W3C规范中，Pre元素是不能使用name属性的。这里通过JQuery动态加载所需的SyntaxHighlighter文件，将使用过程最简化。 ====Features==== Load js files automatic,Simple to use SyntaxHighlighter. You can use this plugin with only 1 line code :

$.SyntaxHighlighter('./SyntaxHighlighter/');

to instead of this :

<script language="javascript" src="SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCpp.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushDelphi.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushPython.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushRuby.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushSql.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushVb.js"></script>

dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');

====Demo==== Here is the [lab:/highlighter/demo.html|Demo link], compare to the [lab:/highlighter/without_plugin.html|page without plugin]. ====Useage====

$.SyntaxHighlighter('./SyntaxHighlighter/'); //the path of SyntaxHighlighter files

<pre class="js">
... some code here ...
</pre>

Advance Options,and the [lab:/highlighter/advance_demo.html|Advance Demo].

	var option = {
		dir:'./SyntaxHighlighter/', //required. path of SyntaxHighlighter
		/**
		 * Set SyntaxHighlighter default options on this page
		 * You can get more info at : 
		 * http://code.google.com/p/syntaxhighlighter/wiki/HighlightAll
		*/
		name:"SyntaxHighlighter", //optional, default:"SyntaxHighlighter"
		showGutter:true, //optional, default:true
		showControls: false, //optional, default:false
		collapseAll:false, //optional, default:false
		firstLine : 1, //optional, default:false
		showColumns:false, //optional, default:false
		/**
		 * Options of this Plugin
		*/
		apptoall:false, //optional, default:true. enable default options to all elements instead of elements self option.
		autofind:false, //optional, default:true. 
		//auto enable highlighter to <pre> and <textarea> elements with 'class' attribute on this page whether with 'name'.
		jspath:'./SyntaxHighlighter/Scripts/', //optional, default:dir + 'Scripts/'. path of SyntaxHighlighter Js files
		csspath:'./SyntaxHighlighter/Styles/', //optional, default:dir + 'Styles/'. path of SyntaxHighlighter Css files
		swfpath:'./SyntaxHighlighter/Scripts/' //optional, default:dir + 'Scripts/' path of SyntaxHighlighter clipboard.swf file
	};
	$.SyntaxHighlighter(option);

====Downloads==== [http://cid-01e48df64f8bd957.skydrive.live.com/embedrowdetail.aspx/Source/highlighter.7z|Download Link] Or get this plugin in [http://plugins.jquery.com/project/Jlighter|JQuery Plugin Site] Read More

人は人を恨み、怒り、裁いて 罰を与えようとする。 怒りに身を委ね、行動することは 実はそれほど困難な事ではないのだ。 人憎恨别人、发怒、给予他人惩罚。 其实置身于愤怒中作出这种种行为，并不是多么困难的事情。 人間にとって、最も困難な事… それは、他者を、 そして自分を許す事なのだ。 作为一个人，最困难的， 是原谅别人 并且原谅自己。 その先にこそ 調和がある事を知りながらも、 人は許す事をなかなかできない。 所以尽管知道人的关系可以调和。 但是人还是很难做到宽恕。 …誰もが、 その内側に黒い物を抱えている。 誰かを傷つける事もある。 罪を犯すことも、 哀しみに打ちひしがれる事もあるだろう。 无论是谁 内心都有黑暗的一面。 也会做出伤害别人的事情。 或许还会犯下罪行， 甚至因为悲伤而一蹶不振。 だが、 その同じ人間が 純粋に愛を求める事がある。 但是 即便是这样的人 也会有一心一意追求爱的时候。 本当の愛を手に入れたいのならば 許す事を知りなさい。 想获得真正的爱的话 请先懂得什么是宽恕吧 他者を、 そして…自らを 对别人 也对自己 ——from 「あしたの喜多善男」 Read More

//NOTOC 虽然仍显仓促，虽然仍有无数的BUG和不足，但终于还是等不到开发进度100%了。 现在在你眼前的，是一个基于未完成的Framework构筑的未完成的Blog程序。框架的开发进度不过60%，blog也只能算是半成品，最终能够发布的版本尚遥遥无期，可能一个人去写Framework是超出我现在能力范围的，但自由的想象发挥却是非常愉快的开发过程。 所以在成熟的Wordpress面前，我还是固执的改用了自己的Blog。希望不要出现太多奇奇怪怪的问题。 Hello, My Blog! ====这个Blog有什么不同==== * 基于自己编写的PHP MVC Framework * 设计、架构、程序、美工均个人独立完成 * 核心代码仅450行 * 通过目前最严格的[http://validator.w3.org/check?uri=referer|W3C Strict] 校验 * 通过[http://jigsaw.w3.org/css-validator/validator?uri=http://allo.ave7.net/skins/tsost.css|W3C Css2.1]校验 * 关闭所有Javascript，系统仍然能正常运作 * 通过Apache [http://httpd.apache.org/docs/1.3/mod/mod_rewrite.html|Mod_rewrite]的URL规整化及简单Rest方案 * 所有表单通过分析数据库结构自动生成 * 所有Js作为[http://jquery.com/|JQuery]插件模块化运作 * 全基于View层的简洁Ajax实现及友好的浏览器回退问题解决策略 * 经过改进的综合Wikipedia和Puki wiki的Wiki语法解析 * 基于[http://code.google.com/p/syntaxhighlighter/|Syntaxhighlighter]的语法高亮 * 基于[http://tinymce.moxiecode.com/|Tinymce]的富文本编辑器 * 与[http://www.vbulletin.com/|vBulletin]论坛交互实现单点登录 * 与[http://picasa.google.com/|Picasa]交互实现的图片Rest构架 * Google Sitemaps自动生成 Read More

====功能==== 自动抓取hi.baidu（百度空间）的日志转换为wordpress可以导入的xml文件（包括所有的日志，评论，分类。图片暂不支持） ====对应Wordpress版本==== 2.5，其余版本未测试 ====运行环境==== PHP5 + icov模块，php4未测试 ====使用方法==== 对文件做简单配置后运行即可 需要手动配置部分如下

$start_page = 1; //起始页
$end_page = 17; //结束页，即blog的总页数 在blog点击 更多文章>>，再点击尾页，在这里填写尾页的页码
$baiduId = 'tsost'; //你的baidu空间名 例：我的空间url是http://hi.baidu.com/tsost，这里值就为tsost

====注意==== 尽管使用了自动刷新防止超时，但视网络情况仍然有可能发生超时，此时手动刷新即可。 程序运行会产生大量临时文件，建议单独放置一个文件夹 程序运行完毕会显示Baidu has been OOXX，运行结果为同目录下的export.xml 随便写的，没有严格按wp标准生成，在wp2.5下导入成功。当然也可以委托我负责转换，只需花费七街论坛1000RP，详见[http://forum.ave7.net/showthread.php?t=18628|这里] [http://cid-01e48df64f8bd957.skydrive.live.com/embedrowdetail.aspx/Source/ooxxbaidu.7z|猛击我]下载 Read More