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
JQuery jsonp使用小记的更多相关文章
- jquery jsonp请求错误处理
jQuery将ajax方法进行了封装,jsonp可以轻松实现跨域请求. $.ajax({type: 'GET', url: "<%= SysUtils::TASK_CENTER_URL ...
- jQuery jsonp跨域请求
跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...
- jquery jsonp实现跨域
html代码: $("#testJsonp").click(function(){ $.ajax({ url: "http://www.test.cc/1.php&quo ...
- 【javascript】jquery jsonp跨越请求
<html> <head> <meta charset="utf-8"> <title></title> <scr ...
- 跨域Ajax请求(jQuery JSONP MVC)
通过jQuery的$.ajax方法发送JSONP请求 js代码 <script type="text/javascript"> function jsonptest2( ...
- jQuery jsonp跨域请求详解
跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...
- jQuery JSONP
同源策略 浏览器不允许跨域发送Ajax请求,如你在http://127.0.0.1:8000/下发送一个Ajax请求去获取http://127.0.0.1:9000/的资源. 如何解决这个问题?其实j ...
- jquery Jsonp 跨域访问
$(function () { $.ajax({ url: 'http://ihisuns.vicp.cc:8765/PcClient.aspx', data: { "ModuleName& ...
- JQuery Jsonp 跨域
需求:两个不同域的网站想利用ajax交互数据 客户端:ajax的dataType参数设置成jsonp,然后设置一个回调函数(jsonCallBack) 服务器端:返回callfunName([{a:& ...
随机推荐
- linux0.12 编译过程
感谢这篇文章的作者: http://www.cnblogs.com/strugglesometimes/p/4231359.html 编译是个很蛋疼的事情,本想把linux0.12在bochs上 ...
- Google桌面搜索引擎
本博文的主要内容有 .Google桌面搜索引擎的下载 .Google桌面搜索引擎的安装 .Google桌面搜索引擎的使用 1.Google桌面搜索引擎的下载 http://download.csd ...
- [每日一题] OCP1z0-047 :2013-08-02 权限―――分配系统权限
这题是考权限的知识点,权限分为两大类,系统权限和对象权限,这题主要讲系统权限,我们先来了解什么是系统权,什么是对象权限吧. 1.系统权限:允许用户在数据库中执行特定的操作 A.SYSDBA/SYSOP ...
- 安装MongoDB -- Windows平台
1. 安装MongoDB 2. 添加环境变量 将安装后的bin目录,添加至系统的Path环境变量中,例如我的安装路径为"C:\Program Files\MongoDB\Server\3.2 ...
- cmd的copy命令合并多个文件
1.1个a.jpg文件:1个b.php文件(一句话木马)
- mysql中group_concat函数用法
该函数返回带有来自一个组的连接的非NULL值的字符串结果.该函数是一个增强的Sybase SQL Anywhere支持的基本LIST()函数. 语法结构: GROUP_CONCAT([DISTINCT ...
- J2EE ssm框架-服务启动项内存加载数据及读取。
1.首先在 Web工程 WEB-INF目录下web.xml中添加 listener: <listener> <listener-class>com.founder.frame. ...
- 树莓派(raspberry)启用root账户 分类: 服务器搭建 Raspberry Pi 2015-04-12 18:45 95人阅读 评论(0) 收藏
树莓派使用的linux是debian系统,所以树莓派启用root和debian是相同的. debian里root账户默认没有密码,但账户锁定. 当需要root权限时,由默认账户经由sudo执行,Ras ...
- [AngularJS] Sane, scalable Angular apps are tricky, but not impossible.
Read fromhttps://medium.com/@bluepnume/sane-scalable-angular-apps-are-tricky-but-not-impossible-less ...
- springmvc 例
1.结构 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRscWk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCM ...