月度归档:2014年10月

PHP 检测是否 Ajax 请求

PHP如何判断ajax请求。这个问题要解决有一个先决条件,那就是你使用ajax请求网页内容时,它会向服务器传递一个 HTTP_X_REQUESTED_WITH 的参数,你可以利用如下方法判断某个请 求是ajax请求

1
1 $ajax = false;
2	 
3	if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
4	    strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) =='xmlhttprequest') {
5	    $ajax = true;
6	}

利用这个来进行判断操作,可以使网页端的URL保持一致,同时能够对两种不同的请求得到不同内容的网页。即实现了用户操作优化,又不影响搜索引擎收录,我觉得是一个很棒的解决方案!

这里有一个另外需要注意的问题,就是如果你的jquery请求是通过iframe打开网页的,那么HTTP_X_REQUESTED_WITH参数不会被传递,也就是说你没有办法判断请求的类型。

谈谈$_SERVER

$_SERVER是一个包含诸如头信息(header),路径(path)和脚本位置(script locations)的数组.这是PHP手册的原话.

有一些头信息是系统本身就存在的,且不能更改,比如说HOST, USER_AGENT等等,注意我们常用到的是$_SERVER[‘HTTP_HOST’], $_SERVER[‘HTTP_USER_AGENT’],这里面都有HTTP前缀,实现上在 header信息里面是没有HTTP前缀的,信息名称只是HOST之类的,$_SERVER自动的为他们加上HTTP前缀。为了是:

防止与本身的其它信息相冲突
是为了表示他们是header头部的信息

所以$_SERVER中的变量凡是带有HTTP前缀的均是header信息,没有的则不是, 如:$_SERVER[‘QUERY_STRING’], $_SERVER[‘PHP_SELF’]等.

自定义header头部信息

用户可以创建自定义的header头部信息,并把这些信息发送给服务器端, 服务器端就会记录这些header信息,并把他们存储到$_SERVER变量中,当然实现的变量名称变成了”HTTP_”连上用户的变量名称.比如上面的判断ajax请求.实际上是在向服务器发送异步请求之前,向header中加入一条header信息,实际的语句应该是:HttpRequest 对象.

setRequestHeader(  "X_REQUESTED_WITH"  ,  "任意字符串"  ); 

服务器端通过$_SERVER[‘HTTP_X_REQUESTED_WITH’]这个变量是否存在,或具体的值来判断是否是ajax请求或具体是哪一条ajax请求. 所以利用这个不但可以验证请求是否是ajax请求,还可以获取更多的信息.

同样我们可以在header中任意设置其它的信息,用于跟服务器端进行数据交流.

比如:

xmlHttpRequest.setRequestHeader(  "test"  ,  "just a test"  ); 

那么被请求的服务器页面中的变量$_SERVER[‘HTTP_TEST’]的值就是”just a test”; 注意这里面前面的test不固定大小写.后面的$_SERVER[‘HTTP_TEST’]必须是大写.




PHP加密解密函数实例教程

PHP加密解密函数分享,一个是 Discuz! 的 authcode 加密函数,一个是encrypt()函数。

需要使用PHP将特定的信息进行加密,也就是通过加密算法生成一个加密字符串,这个加密后的字符串可以通过解密算法进行解密,便于程序对解密后的信息进行处理。

最常见的应用在用户登录以及一些API数据交换的场景。

加密解密原理一般都是通过一定的加密解密算法,将密钥加入到算法中,最终得到加密解密结果。

1、非常给力的authcode加密函数,Discuz!经典代码(带详解):

function authcode($string, $operation = 'DECODE', $key = '', $expiry = 0) {
	// 动态密匙长度,相同的明文会生成不同密文就是依靠动态密匙 
	$ckey_length = 4; 
	// 密匙 
	$key = md5($key ? $key : $GLOBALS['discuz_auth_key']); 
	// 密匙a会参与加解密 
	$keya = md5(substr($key, 0, 16)); 
	// 密匙b会用来做数据完整性验证 
	$keyb = md5(substr($key, 16, 16)); 
	// 密匙c用于变化生成的密文 
	$keyc = $ckey_length ? ($operation == 'DECODE' ? substr($string, 0, $ckey_length): 
	substr(md5(microtime()), -$ckey_length)) : ''; 
	// 参与运算的密匙 
	$cryptkey = $keya.md5($keya.$keyc); 
	$key_length = strlen($cryptkey); 
	// 明文,前10位用来保存时间戳,解密时验证数据有效性,10到26位用来保存$keyb(密匙b), 
	//解密时会通过这个密匙验证数据完整性 
	// 如果是解码的话,会从第$ckey_length位开始,因为密文前$ckey_length位保存 动态密匙,以保证解密正确 
	$string = $operation == 'DECODE' ? base64_decode(substr($string, $ckey_length)) : sprintf('%010d', $expiry ? $expiry + time() : 0).substr(md5($string.$keyb), 0, 16).$string; 
	$string_length = strlen($string); 
	$result = ''; 
	$box = range(0, 255); 
	$rndkey = array(); 
	// 产生密匙簿 
	for($i = 0; $i <= 255; $i++) {
		$rndkey[$i] = ord($cryptkey[$i % $key_length]); 
	}
	// 用固定的算法,打乱密匙簿,增加随机性,好像很复杂,实际上对并不会增加密文的强度 
	for($j = $i = 0; $i < 256; $i++) {
		$j = ($j + $box[$i] + $rndkey[$i]) % 256; 
		$tmp = $box[$i]; 
		$box[$i] = $box[$j]; 
		$box[$j] = $tmp; 
	}
	// 核心加解密部分 
	for($a = $j = $i = 0; $i < $string_length; $i++) {
		$a = ($a + 1) % 256; 
		$j = ($j + $box[$a]) % 256; 
		$tmp = $box[$a]; 
		$box[$a] = $box[$j]; 
		$box[$j] = $tmp; 
		// 从密匙簿得出密匙进行异或,再转成字符 
		$result .= chr(ord($string[$i]) ^ ($box[($box[$a] + $box[$j]) % 256])); 
	}
	if($operation == 'DECODE') {
		// 验证数据有效性,请看未加密明文的格式 
		if((substr($result, 0, 10) == 0 || substr($result, 0, 10) - time() > 0) && 
			substr($result, 10, 16) == substr(md5(substr($result, 26).$keyb), 0, 16)) {
			return substr($result, 26); 
		} else {
			return ''; 
		}
	} else {
		// 把动态密匙保存在密文里,这也是为什么同样的明文,生产不同密文后能解密的原因 
		// 因为加密后的密文可能是一些特殊字符,复制过程可能会丢失,所以用base64编码 
		return $keyc.str_replace('=', '', base64_encode($result)); 
	}
}

函数 authcode($string, $operation, $key, $expiry)中的$string:字符串,明文或密文;$operation:DECODE表示解密,其它表示加密;$key:密匙;$expiry:密文有效期。

用法:

$str = 'yangjunwei.com'; 
$key = 'yangjunwei'; 
echo authcode($str,'ENCODE',$key,0)."<br>"; //加密 
$str = '4d23H0IN8iczYa1KporUtOdgnBwuEFYM0RXgA+HQh/eXfxjZurkcepuGAw'; 
echo authcode($str,'DECODE',$key,0)."<br>"; //解密

2、加解密函数encrypt()

function encrypt($string,$operation,$key=''){
	$key=md5($key); 
	$key_length=strlen($key); 
	$string=$operation=='D'?base64_decode($string):substr(md5($string.$key),0,8).$string; 
	$string_length=strlen($string); 
	$rndkey=$box=array(); 
	$result=''; 
	for($i=0;$i<=255;$i++){
		$rndkey[$i]=ord($key[$i%$key_length]); 
		$box[$i]=$i; 
	}
	for($j=$i=0;$i<256;$i++){
		$j=($j+$box[$i]+$rndkey[$i])%256; 
		$tmp=$box[$i]; 
		$box[$i]=$box[$j]; 
		$box[$j]=$tmp; 
	}
	for($a=$j=$i=0;$i<$string_length;$i++){
		$a=($a+1)%256; 
		$j=($j+$box[$a])%256; 
		$tmp=$box[$a]; 
		$box[$a]=$box[$j]; 
		$box[$j]=$tmp; 
		$result.=chr(ord($string[$i])^($box[($box[$a]+$box[$j])%256])); 
	}
	if($operation=='D'){
		if(substr($result,0,8)==substr(md5(substr($result,8).$key),0,8)){
			return substr($result,8); 
		}else{
			return''; 
		}
	}else{
		return str_replace('=','',base64_encode($result)); 
	}
}

函数encrypt($string,$operation,$key)中$string:需要加密解密的字符串;$operation:判断是加密还是解密,E表示加密,D表示解密;$key:密匙。

用法:

$str = 'yangjunwei.com';
$key = 'yangjunwei';
$token = encrypt($str, 'E', $key); //加密 
echo $token."<br>";
echo encrypt($token, 'D', $key)."<br>"; //解密

前端优化之图片小述

<img src="small.jpg" data-fullsrc="large.jpg">

Date-fullsrc是html5中的一个定义文件的属性,宽度超过480px的屏幕,就会加载较大分辨率的图片(large.jpg),小屏幕分辨率的就会加载较小的图片(small.jpg)。

提升页面大小的效率,不仅仅是取决于使用精灵或是压缩代码,给定页面的请求数量在前端性能中也占有了很不小的重量。减少请求可以让你的网站加载更快,而其中一种减少页面请求的方法就是用Data URI代替图片的src属性:

<!-- 以前的写法 -->
<img src="http://images.cnblogs.com/logo.png" />

<!-- 使用data URI的写法 -->
<img src="data: image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fH ...." />

<-- 范例:  http://davidwalsh.name/demo/data-uri-php.php -->

当然页面大小会增加(如果你的服务器使用适当的gzip内容,这个增加会很小),但是你减少了潜在的请求,同时也在过程中减少了服务器请求的数量。现在大多数浏览器都支持Data URI,在CSS中的背景骨片也可以使用Data URI,因此这个策略现在已经可以在应用层级,广泛应用。

根据屏幕宽度自动缩放图片大小

在开发中,我们经常遇到需要适配屏幕宽度的应用,比如图片自动缩放到适合尺寸。

<script>
    window.onload = function () {
        ReImgSize();
    }
</script>
<script type="text/javascript" defer>
    function ReImgSize() {
        var clientWidth = document.body.clientWidth;// window.innerWidth; //
        //首页主体背景
        var indexH = 747 * clientWidth / 640;   
		$(".default img").css("width", clientWidth * changeTwoDecimal(600 / 640));		
    }

    function getElementsByClassName(classname) {
        var children = document.all; 
        var elements = new Array(); 
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            var classNames = child.className.split(' ');
            for (var j = 0; j < classNames.length; j++) {
                if (classNames[j] == classname) {
                    elements.push(child);
                    break;
                }
            }
        }
        return elements;
    }

    function changeTwoDecimal(x) {
        var f_x = parseFloat(x);
        if (isNaN(f_x)) {
            alert('function:changeTwoDecimal->parameter error');
            return false;
        }
        var f_x = Math.round(x * 100) / 100;
        return f_x;
    }
</script>

在网页中嵌入任意字体以及解决访问速度慢的方案—google在线字体库应用

字体使用是网页设计中不可或缺的一部分。经常地,我们希望在网页中使用某一特定的字体, 但是该字体并非主流操作系统的内置字体,我们常用的方法就是把特殊字体处理成图片,这样做有很多缺陷, 但是谷歌发布了Google在线字体库,这样在网站设计的时候只要调用Google在线字体库就可以让网页在客户端很好的显示,而不用只用枯版的字体了,实现字体多样化。

特殊字体处理成图片弊端

1、不可能大范围使用
2、不易修改
3、不利于seo优化
利用google在线的字体库优势
1、可继续使用html文本比起自己自做字体库上传到自己的服务器可以减轻服务器负担
2、兼用性好,不需担心像各个浏览器对 CSS 解析不同导致这样那样的 bug、HACK。
3、无需引用js
但是也存在一定的弊端,
1、只能引进应为的字体库,中中文不支持
2、随时有被墙外的可能性
 
虽然有一定的缺陷,但是google在线字体库的有时还是很明显的,下面就介绍下具体的使用方法:
header部分引用要用的字体

<link rel=’stylesheet’ type=’text/css’ href=’http://fonts.googleapis.com/css?family=Font name’ >

在css中使用

css selector{
   Font-family: “font name”, serif;
}

就是这么简单

在引用时注意一定要始终有个字体的备份方案,上面的代码你可能也发现了我使用了serif 来作为后备的字体,这样做是为了以防万一

如果你想一次行载入多个字体

http://fonts.googleapis.com/css?family=Vollkorn|Yanone|Droid+Sans

字体名称之间用 | 隔开,并且不留空格,还要注意Droid Sans字体的使用,对于字体名称中有空格的,需用 + 符号来代替空格

 Google在线字体库更多字体: http://code.google.com/webfonts

现在谷歌被封禁,访问速度很慢,我们可以使用360网站卫代理访问Google免费字体,在html中加入即可。

<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet'>