Zend Studio » ajax http://www.zendstudio.net 提供zend studio教程、zend studio下载等相关资源的公益性站点。 Fri, 30 Jul 2010 06:05:16 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 非背景中图片的css sprites应用，来自google http://www.zendstudio.net/archives/css-sprites-from-google-inc/ http://www.zendstudio.net/archives/css-sprites-from-google-inc/#comments Sat, 09 May 2009 16:18:20 +0000 gently http://www.zendstudio.net/?p=680 不常更新博客是可耻的，我常这样想。趁晚饭还没有准备完成的时候，写一下前些天注意到google的一个css sprites，页面是在google的搜索结果页面，例如在google搜索zend studio，就在这个页面，初看左上角的logo并无任何特别，当我准备将其另存为，我发现，这整张图片是这样的:

google logo

因为在背景中我是常用到或者看到css sprites，而这张图片是“前景”，看了下代码，还是很巧妙的。原理是这样的：父元素相对定位，定义宽和高，然后overflow:hidden,img用绝对定位，然后top和left来控制位置，就让多余的部分hidden了。

看代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			body{background:#ccc}
			h1{padding:0;margin:0;font-size:small;}
			a#logo{position:relative;margin:14px 0 7px;width:150px;height:52px;overflow:hidden;display:block;}
			a#logo img{position:absolute;top:-26px;left:0;border:0;}
		</style>
	</head>
	<body>
		<h1>
			<a id="logo" title="google 主页" href="http://www.google.cn/webhp?hl=zh-cn">google<img alt="" src="http://www.google.cn/images/nav_logo4.png" width=168 height=119></a>
		</h1>
		<img alt="" src="http://www.google.cn/images/nav_logo4.png" width=168 height=119>
	</body>
</html>

就是这样的“前景” css sprites，而背景的应用似乎更为简单，就是background-position了，吃饭！

相关日志

]]> http://www.zendstudio.net/archives/css-sprites-from-google-inc/feed/ 5 仿芒果网机票预定智能输入提示，基于jquery http://www.zendstudio.net/archives/jquery-suggest-plugin-revised/ http://www.zendstudio.net/archives/jquery-suggest-plugin-revised/#comments Sat, 09 May 2009 04:39:16 +0000 gently http://www.zendstudio.net/?p=677 这是一个完整的jquery插件，实际上是基于jquery的suggest插件修改的。

具体的功能如下：

  1. 点击输入框，自动列出热门出行城市；
  2. 支持中文/拼音/3字码 输入的智能提示；
  3. 支持键盘方向键选择、回车键确定；
  4. 支持选择后自定义callback函数；
  5. 支持IE6、IE7、IE8、Firefox

呃，实际上上面的很多都是原suggest插件中自有的，我只是去掉了其ajax获取数据的功能，因为这延迟稍微有些烦人。

看demo：仿芒果网机票预定智能输入提示demo

仿芒果网机票预定智能输入提示demo完整包下载

PS：3字码是航空系统中很常见的为每个城市定义的不重复的特殊3位字符串，比如pek代表北京，sha代表上海等等。

相关日志

]]> http://www.zendstudio.net/archives/jquery-suggest-plugin-revised/feed/ 15 某网站AJAX的加密压缩传输算法的一点研究 http://www.zendstudio.net/archives/js-zip-inflate/ http://www.zendstudio.net/archives/js-zip-inflate/#comments Tue, 24 Feb 2009 11:27:24 +0000 gently http://www.zendstudio.net/?p=176 AJAX还是比较强大的！（显然，这是一句废话），最近在研究一个网站的AJAX应用中发现其中的“拓展视野”部分频频被挖掘出来（也由此可见，平时本人的视野有多么的狭窄了），首先是全站的JS全部使用packed进行了压缩，呃！也不知道这种称法是否正确，就是用eval(function(p,a,c,k,e,d){})的那种世界各地都很流行的压缩方法吧，在实际的观察中，一个压缩后仅为6K，在我将其转化为“肉眼能看清楚的代码”之后，足足有20K，可见其效果还是相当明显的；此外，用HttpWatch弄到了传输数据后，居然是加密的。。。形如下面这段：
q1YqT81MzyhRsqpWys3MU7Iy0FHKTaxQsjLWUUrLL8pNBMooqeoZpSnV6igVFGUmp2KoVDIzMrIwNdAzMFBC1pOiVFsLAA==

任何一个有些许密码学经验的同志都容易很看出来，这是base64编码(我实在不喜欢称这个为“加密”)，没错，和各位看官一样，我很快就用php自带的base64_decode函数对其进行了解密，如果您觉得问题到此为止，那就错了！这时我才稍稍感到了有些震撼，解密出来的数据

呃！一堆乱码，其实应该是二进制数据，加密了（后来知道是压缩了），可是用户是看不懂这些的，客户端是肯定要进行解密的！用什么？AJAX的当然用JS解密了，挖解密函数啊，挖解密函数，看到了如下的精彩代码：

1

var filterList=eval('('+utf8to16(zip_depress(base64decode(g_pgFilterList)))+')');

utf8to16()和base64decode()都好理解，也再一次证明加密的最后是用base64编码输出的，关键就是这个zip_depress()，zip解压？
是的，千真万确，用JS实现了zip的解压算法！！！到这里我深深的感到了震撼，原来，我知道的真的太少了啊！虽然之前知晓有md5.js，知道JS在运算方面是没有问题的。不会是这家伙自己写的压缩算法吧？经过搜索，我找到了这个算法（Zip inflate）的原版，原来该网站的制作人员修改了函数名，难怪我直接google不到呢？
什么是inflate算法？—

inflate是GZip, PNG等广泛使用的解压算法,linux也使用inflate对内核进行解压.inflate的解压算法使用的第3种快速解压法的一个子集,它不考虑LONG_CODE,同时把SAME_LENGTH合并到MEDIUM_CODE。而对于规则的SAME_LENGTH编码，比如length和distance编码，inflate则使用额外的base和extra表示。这是因为在构造一般的查找表时，虽然对于SAME_LENGTH前缀可以不构造副表，但我们需要另外一个表格来保存符号的顺序，而这个表格的空间可能更大。但对于length和distance编码，他们的顺序是递增的，所以无需额外的表格来保存符号的顺序。

inflate使用root表示上述的b,查找表的数据结构为code.主表和副同时保存在inflate_state结构中的大数组codes[ENOUGH]中.表的构造函数位于inftrees.c文件的inflate_table中.

令人感到欣喜若狂的是，PHP竟然已经提供的现成函数来解压和压缩inflate,它们是gzinflate()和gzdeflate()，哈哈哈！我不禁仰天狂笑的一番，用gzinflate()成功的将上文数据解密，内容是这样的

{"weight":{"min":0,"max":3,"format":"%.2f"},"price":{"min":0,"max":"622850.00","format":"%d"}}

标准的JSON数据啦，不错！这就为以后的AJAX的传输上多了一个选择，虽然还不确定这种方法能否节省流量（因为base64算法会将原始数据“稍稍”增大），但客户端有了解压算法，服务端的php压缩函数又是现成的，大不了在base64这个环节上大概需要改进下，我想对于大流量的数据应该还是有确切效果的。嗯，我很满意。

相关日志

]]> http://www.zendstudio.net/archives/js-zip-inflate/feed/ 8