10 月 2014

js自动给url加入新参数

前阵子做了个项目,客户要求用户手机登陆时分享链接给好友可以带上自己的uid,并且所有的页面都要带上自己的ID,原程序猿的写法是将所有要跳转的页面href中都加入全局变量用户ID,发现问题颇多还比较麻烦,所以找到了这个JS来解决问题,它可以自动判断加的参数之前是?还是&,十分实用。

function UrlUpdateParams(url, name, value) {
var r = url;
if (r != null && r != ‘undefined’ && r != “”) {
value = encodeURIComponent(value);
var reg = new RegExp(“(^|)” + name + “=([^&]*)(|$)”);
var tmp = name + “=” + value;
if (url.match(reg) != null) {
r = url.replace(reg, tmp);
}
else {
if (url.match(“[?]“)) {
r = url + “&” + tmp;
} else {
r = url + “?” + tmp;
}
}
}
return r;
}
var uid = “{$smarty.session.user_id}”;
var ouid = “{$smarty.get.u}”
if(uid!=” && ouid == ”){
window.location.href = UrlUpdateParams(window.location.href, “u”, uid);
}

用chrome模拟微信浏览器访问需要OAuth2.0网页授权的页面

现在很流行微信网页小游戏,用html5制作的小游戏移过来,可以放到微信浏览器中打开,关键是可以做成微信分享朋友圈的形式,大大提高游戏的传播,增强好友的游戏互动。

微信浏览器中打开网页游戏效果还不错,对手机要求不高,而且微信网页游戏不用考虑手机兼容性问题,采用html5,而且大部分手机浏览器,特别是微信浏览器对html5的支持很高。

怎么把别人的微信网页游戏移植到自己的网站上并分享给好友呢?

许多网站的微信网页游戏都设置了判断浏览器,只有使用微信浏览器打开才能访问,这使我们在电脑上打开网址找不到源代码。方法很简单,我们可以伪造微信浏览器HTTP_USER_AGENT,从而在pc上可以访问,这样就可以获取你想要的css,js,html等资源,移植到自己的网站上。

如何伪造微信浏览器HTTP_USER_AGENT

使用谷歌浏览器非常方便伪造微信浏览器HTTP_USER_AGENT,打开你需要伪造HTTP_USER_AGENT的网页,按F12,进入开发者模式,下面默认是显示css调试的工具,你找到下面一排,有个图片所示的地方:

用谷歌浏览器如何伪造微信浏览器HTTP_USER_AGENT

用谷歌浏览器伪造微信浏览器HTTP_USER_AGENT

这里有一个模拟器,既可以设置模拟很多型号的手机设备,也可以伪造你想要的HTTP_USER_AGENT。选择USER_AGENT,选other,微信的HTTP_USER_AGENT是:

在iPhone下,返回

Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B176 MicroMessenger/4.3.2

在Android下,返回

Mozilla/5.0 (Linux; U; Android 2.3.6; zh-cn; GT-S5660 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 MicroMessenger/4.5.255

经过这样的设置之后,你刷新就可以访问之前不能访问的网页了,现在你就是伪装成微信浏览器访问,同时你使用谷歌浏览器查看源代码,就可以找到资源的路径了。

php 异步发送邮件

在某系统里,上传完一个产品的补丁文件或发布产品的更新信息,需要给使用该产品的用户(用户数量较多)发送一封电子邮件,发送后提示发送完毕!

我们常用的PHP代码写法如下:

<?php
// ……
//查找出所有使用该产品的用户email地址,假设存放在$email数组中
for($i=0;$i<count($email);$i++){
sendemail();
}
function sendemail(){
//发送邮件代码
}
//……

假设该次发送100封邮件。本次操作会出现什么结果呢?

用户体验:用户等待->发送邮件完毕->返回信息(这期间极有可能,脚本执行超时)

本次操作由于需要发送大量的邮件,导致php执行时间过长,用户烦躁的等待。当apache或者nginx等待超过允许执行时间,将返回超时错误。这个时候用户不明确本次操作到底成功与否,到底发出了几封邮件。

由此我们可以看出以上代码用户体验极差,并且不能够顺利完成任务。

那么如何解决这个用户体验较差的问题呢?

这里提到一个概念,异步执行

用户体验:用户等待->发送完毕

朋友们就会问,怎么缺少发信环节?

OK,发信环节就在用户提交请求的时候,把发信任务转给了一个单独处理发信的php程序处理了,当用户看见“发送完毕”的时候其实信还没发送完,这个时候,发信程序正在后台努力的工作着,一封一封的向外发送。

<?php
$domain=”www.phpernote.com”;
$url=”/sendEmail.php”;
$par=”email=1@163.com,2@163.com,3@163.com&time=”.time();
$header=”POST $url HTTP/1.0rn”;
$header.=”Content-Type: application/x-www-form-urlencodedrn”;
$header.=”Content-Length: “.strlen($par).”rnrn”;
$fp=@fsockopen ($domain,80,$errno,$errstr,30);
fputs($fp,$header.$par);
fclose($fp);
echo ‘发送完毕’;

PHP中file_get_contents与curl比较

最近做接口项目,总是会用到这两个PHP方法,也查阅了相关的文章,收集了以下这些比对

(1)fopen/file_get_contents 每次请求远程URL中的数据都会重新做DNS查询,并不对DNS信息进行缓存。但是CURL会自动对DNS信息进行缓存。对同一域名下的网页或者图片的请求只需要一次DNS 查询。这大大减少了DNS查询的次数。所以CURL的性能比fopen/file_get_contents 好很多。

(2)fopen/file_get_contents在请求HTTP时,使用的是http_fopen_wrapper,不会keeplive。而curl却可以。这样在多次请求多个链接时,curl效率会好一些。(设置header头应该可以)

(3)fopen/file_get_contents函数会受到php.ini文件中allow_url_open选项配置的影响。如果该配置关闭了,则该函数也就失效了。而curl不受该配置的影响。

(4)curl可以模拟多种请求,例如:POST数据,表单提交等,用户可以按照自己的需求来定制请求。而fopen/file_get_contents只能使用get方式获取数据。

(5)fopen/file_get_contents 不能正确下载二进制文件。

(6)fopen/file_get_contents 不能正确处理ssl请求。

(7)curl 可以利用多线程。

(8)使用 file_get_contents 的时候如果 网络出现问题, 很容易堆积一些进程在这里。

(9)如果是要打一个持续连接,多次请求多个页面。那么file_get_contents就会出问题。取得的内容也可能会不对。所以做一些类似采集工作的时候,用curl做替代是一个比较正确的选择。

总体比较下来,curl请求优化性比file_get_contents是仁者见仁智者见智,不过在对应的环境中还是要选择合适的请求方法最佳。

利用@media screen实现网页布局的自适应

经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,

优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小

只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值

@media screen and (min-width:1200px){
	#page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px}
}

@media screen and (min-width: 960px) and (max-width: 1199px) {
	#page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px}
}
@media screen and (min-width: 768px) and (max-width: 959px) {
	#page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px}
}
@media only screen and (min-width: 480px) and (max-width: 767px){
	#page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none}
}
@media only screen and (max-width: 479px) {
	#page{ width: 300px; }#content,.div1{width: 300px;}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px}
}

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'>