简明现代魔法 -> JQuery -> JQuery jsonp使用小记

JQuery jsonp使用小记

2011-04-21

在一个不支持PHP的主机上,需要对某些页面做访问统计。我的方案是在静态的HTML页面上,用JSONP向能够执行PHP的主机进行跨域请求,从而使用PHP解决这个访问量统计问题。

在服务器端,PHP页面返回的JSONP格式应该是这样的:

<?php
	echo $_GET["callback"].'
	(
    {
        title: "The Principles of Beautiful Web Design, 2nd Edition",
        url: "http://www.sitepoint.com/books/design2/",
        author: "Jason Beaird",
        publisher: "SitePoint",
        price: {
            currency: "USD",
            amount: 39.95
         }
	}
	);
	'
?>

而静态HTML发起请求的代码可以参考下面:

<script language="javascript" src="http://www.nowamagic.net/zt/access_count/js/jquery-1.4.2.min.js"></script>
<script language="javascript" src="http://www.nowamagic.net/zt/access_count/js/jquery.jsonp-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	insert_vote();
})

function insert_vote(){
	var j = null;
	$.ajax({
		type:'get',
		url:'http://www.nowamagic.net/zt/access_count/jsonp.php',
		dataType:'jsonp',
		jsonp:"callback",
		data:{"a":"insert", "type":"aa", "time":"bb", "id":"dd", "allowVote":"cc"},
		async: false,
		success:function(data){ 
			j = data; 
			//alert("1");
			alert(j.title);
		}
	})	
}
	
function init(){
	$.ajax({
  		dataType: 'jsonp',
  		data: 'id=10',
  		jsonp: 'jsonp_callback',
  		url: 'http://www.nowamagic.net/zt/access_count/jsonp.php',
  		success: function () 
    	{
    		// do stuff
			alert(jsonp.respond);
  		},
	});
}

function init2(){
	$.ajax({    
		async:false,    
 		url: 'http://www.nowamagic.net/zt/access_count/jsonp.php',  // 跨域URL   
    	type: 'GET',    
     	dataType: 'jsonp',    
    	jsonp: 'jsoncallback', //默认callback   
    	data: 'id=10', //请求数据   
     	timeout: 5000,    
   		beforeSend: function(){  
			//jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了   
     	},   
    	success: function(json) { 
			//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
			alert(json.respond.title);    
     		if(json.actionErrors.length!=0)
			{    
        		alert(json.actionErrors);    
       		}    
		},    
		complete: function(XMLHttpRequest, textStatus){    
                 
		},    
		error: function(xhr){    
               //jsonp 方式此方法不被触发   
               //请求出错处理    
			alert("请求出错(请检查相关度网络状况.)");    
		}    
	});  
}
</script>

通用方法:

	// 初始化数据,同一个cookie一分钟的访问量都算一次
	function init_count(pageType, id){
		var j = null;
		$.ajax({  
        	type: "get",		//使用get方法访问后台  
        	dataType: "jsonp",	//返回json格式的数据  
			jsonp:"callback",
        	url: "http://app2.zhnews.net/zt/access_count/manage.php",	//要访问的后台地址  
			data:{"opp":"main", "pageType":pageType, "id":id},
			async: false,
        	success: function(data){  
        		//alert(data.total);
				//$('#pc_1').html(msg.total);
				$.each(data, function(i, v){
					var tmp = v.record.split(":");
					var month_view = tmp[tmp.length - 1];
					$("label[id=pc_"+v.page_id+"]").html(v.total);
					$("label[id=pcm_"+v.page_id+"]").html(v.week);
				})	
        	}  
    	})  
	}

大概就这样,使用起来也是很简单的。

下面再介绍PHP常用的方法,将数组转换为JSONP格式的输出:

function arrayRecursive(&$array, $function, $apply_to_keys_also = false)
{
    static $recursive_counter = 0;
    if (++$recursive_counter > 1000) {
        die('possible deep recursion attack');
    }
    foreach ($array as $key => $value) {
        if (is_array($value)) {
            arrayRecursive($array[$key], $function, $apply_to_keys_also);
        } else {
            $array[$key] = $function($value);
        }
 
        if ($apply_to_keys_also && is_string($key)) {
            $new_key = $function($key);
            if ($new_key != $key) {
                $array[$new_key] = $array[$key];
                unset($array[$key]);
            }
        }
    }
    $recursive_counter--;
}

function JSON($array) {
	arrayRecursive($array, 'urlencode', true);
	$json = json_encode($array);
	return urldecode($json);
}

	$array = array
    (
		'total' => $total,
   		'current' => $current
  	);
	
	echo $_GET["callback"].'('.JSON($array).')';
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们