• JQuery jsonp使用小记


    在一个不支持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).')';
    

     原文地址:http://www.nowamagic.net/jquery/jquery_JsonpUseMark.php

  • 相关阅读:
    台州 OJ 3847 Mowing the Lawn 线性DP 单调队列
    洛谷 OJ P1417 烹调方案 01背包
    快速幂取模
    台州 OJ 2649 More is better 并查集
    UVa 1640
    UVa 11971
    UVa 10900
    UVa 11346
    UVa 10288
    UVa 1639
  • 原文地址:https://www.cnblogs.com/kt520/p/3651909.html
Copyright © 2020-2023  润新知