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

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

<?phpecho $_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

转载于:https://www.cnblogs.com/kt520/p/3651909.html

JQuery jsonp使用小记相关推荐

  1. 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据

    原文:  http://blog.csdn.net/polarissky/article/details/6429554 1.新建数据源项目CrossDomain 主要文件如下: 1.Handler. ...

  2. jQuery jsonp跨域请求

    当前端和后端不属于同源策略就会访问不到数据 同源策略就是相同的协议,域名,端口.如果前后端不属于同源策略又想获得后端的数据我们就可以通过跨域开获得数据 跨域的安全限制都是对浏览器端来说的,服务器端是不 ...

  3. java jquery jsonp 跨域_Jquery跨域调用(JSONP)遇到error问题的解决

    之前Jquery的跨域调用一直没有解决,不知道为什么老是执行error里的语句,今天花了点时间研究了一下,终于把问题解决了. 关键的地方是返回的字符串,返回的字符串必须包含jsonp的回调函数名称,而 ...

  4. jquery java jsonp_JSONP原理及JQUERY JSONP的使用

    JSONP原理 JSON和JSONP JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.or ...

  5. Jquery eq方法小记

    今天在编程时遇到了一个问题:取出ol中指定的li进行操作,一开始想的是用数组保存,再用for循环重新赋值回去,但是发现了Jquery的eq()方法可以轻松的搞定: .eq(参数):获取当前链式操作中的 ...

  6. jquery ajax中使用jsonp的限制[转]

    转自: http://www.cnblogs.com/dudu/archive/2012/12/04/jquery_ajax_jsonp.html jsonp 解决的是跨域 ajax 调用的问题.为什 ...

  7. JSONP跨域原理和jQuery.getJSON用法

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式).本文主要介绍JS ...

  8. jquery jsonp_结合JSONP和jQuery快速构建功能强大的混搭

    jquery jsonp 异步JavaScript和XML(Ajax)是驱动新一代网站(通常称为Web 2.0站点)的关键技术. Ajax允许在后台进行数据检索,而不会影响Web应用程序的显示和行为. ...

  9. JQuery 的跨域方法 可跨任意网站

    JS的跨域问题,很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQUERY,一个GETJSON方法就搞定了,而且是一行代码搞定. 下面开始贴出方法 ...

最新文章

  1. Go 分布式学习利器(4)-- 条件和循环
  2. Leetcode 147.对链表进行排序
  3. ThinkPad X220i 刷白名单BIOS,改装第三方无线网卡
  4. java运行构建期间出错_构建和运行Java 8支持
  5. vos3000落地网关对接教学_跨国合作:Serverless Components 在腾讯云的落地和实践
  6. c语言结构体在内存中的存储,C语言结构体在内存中的存储情况探究------内存对齐...
  7. 企业分布式微服务云SpringCloud SpringBoot mybatis (八)消息总线(Spring Cloud Bus)
  8. L1-019 谁先倒 (15 分)
  9. linux系统打开m3u8文件,Linux下载m3u8流视频并合并ts文件
  10. Unity文件、META文件、Prefab文件
  11. 浏览器的历史浏览记录_如何在任何浏览器中清除历史记录
  12. south的使用总结
  13. FlinkX数据同步
  14. c语言共阴极数码管数字6,用51单片机C语言编写程序实现6位共阴极数码管循环显示0123456789ABCDEF,六个数码管是连续不同的六个数?...
  15. NSSCTF web刷题
  16. Android发送彩信(带图片附件)
  17. 统计基础(五)假设检验中的检验方法
  18. FileProvider
  19. CentOS下mysql 8.0.16 安装完整版教程
  20. ipod video 乔布斯的三个故事

热门文章

  1. 活的通透的人,会是一个什么样的人?
  2. 利润最高的6个产品都能创造富豪
  3. 回顾我个人的创业经历
  4. 读书和不读书有什么区别呢?
  5. Elasticsearch查询速度为什么这么快?
  6. 32位和64位操作系统,二者有何区别?是否64位更快?
  7. In the beginning, many people on Wall Street did
  8. azure 入门_Azure Function应用程序入门
  9. azure批量创建虚拟机_如何将数据库迁移到Azure虚拟机
  10. 使用和执行SQL Server Integration Services包的方法