jquery中使用jsonp
1 .关于jsonp的原理等,请看下面的文章,说的很明白.
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html#top
以及
http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html
2 .本文主要探讨在jquery中如何快速的使用jsonp
服务器端脚本: json_r01.php
<?php $callback = $_REQUEST['callback']; $arr = array();
$arr['newYear'] = $_REQUEST['year'] + 6;
$arr['msg'] = $_REQUEST['name'] . '测试信息'; //json编码
$json = json_encode($arr); //返回一个调用函数的字符串: 例如 test({'name': 'lucy'}) echo $callback . '(' . $json . ')';
01-通过 第3行代码 可以获取 我们约定的 服务器返回的 调用客户端js函数的函数名(具体可以看上面的链接)
02-第14行输出的 是一个 类似 test({'name' : 'lucy'}) 的字符串.
因为jsonp 是通过 script标签的src属性的跨域性实现的 . 相当于通过script标签的src属性请求一个js文件.
这个js文件 的内容 就是 test({'name' : 'lucy'}).
如果此时我们本地定义了一个函数 test() .
那么但我们通过script的src属性请求一个远程的js文件时, 这个js文件的内容是 test({'name':'lucy'}) , 那么就会调用这个本地的test()函数
3. $.post()方法实现
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var param = new Object();
param.year = 2010;
param.name = '李刚'; $.post('json_r01.php?callback=?', param, function(data, textStatus, xhr) {
console.log(data);
console.log(data.newYear);
console.log(data.msg);
},'jsonp'); </script>
结果: 图片01
注意:
01 .使用$.post() ,需要
1) 在url地址后面加上 ?callback=?
这里callback的值是? 是因为 jquery会随机给callback赋值 ; 通常情况下 不需要给callback指定一个值.
从图片01 中可以看出 callback已经有一个随机的值是jQuery19106356678668554155_1470797830605
服务器端 响应的函数 的 函数名也是
jQuery19106356678668554155_1470797830605({"newYear":2016,"msg":"\u674e\u521a\u6d4b\u8bd5\u4fe1\u606f"
})
2) 要求返回的数据格式写上 'jsonp'
02 .使用jquery后 简化了我们的工作
1)不需创建一个访问远程文件的script标签
2)不需要在本地创建一个以callback 的值为 名字的 本地js函数 .
我们直接在 $.post()方法的 回调函数中 就可以使用 返回来的 字符串 test({'name' : 'lucy'}) 中的json数据
--------------
如果我们设置了 callback的值是 test01
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var param = new Object();
param.year = 2010;
param.name = '李刚'; $.post('json_r01.php?callback=test01', param, function(data, textStatus, xhr) {
console.log(data);
console.log(data.newYear);
console.log(data.msg);
},'jsonp'); </script>
结果:图片02
即使我们设置了 callback = test01 . jquery仍然是 用随机的代替了.
所以至少在 $.post()方法中, 给 url中的添加查询字符串 ?callback=? 就可以了.
4. $.getJson()的实现
客户端代码:
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var param = new Object();
param.year = 2010;
param.name = '李刚'; $.getJSON('json_r01.php?callback=?', param, function(data, textStatus, xhr) {
console.log(data);
console.log(data.newYear);
console.log(data.msg);
}); </script>
结果: 图片03
注意:使用 $.getJSON()方法
01 . 只需要在 url地址后面加上一个请求字符串 ?callback=? 就可以了.
02 .从图片03中可以看出 返回的函数名也是随机生成的 .
03 .$.getJSON()是通过get的方式传值, 可以看到name 和 year 也是以请求字符串的形式 附在 url地址尾部.
-----------------
如果我们给 callback设置一个具体的值 . 如 callback=test01
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var param = new Object();
param.year = 2010;
param.name = '李刚'; $.getJSON('json_r01.php?callback=test01', param, function(data, textStatus, xhr) {
console.log(data);
console.log(data.newYear);
console.log(data.msg);
}); </script>
结果:图片04
注意:
01:此时classback = test01 . 被传递到服务器端, 服务器端 返回的函数名也是 test01()
02: 但是 $.getJSON()的回调函数无法识别. 在回调函数中无法说使用 data.msg输出信息.
--------------------------------------------
总结:
在$.getJSON()中只需要在 url中加上一个请求字符串 ?callback = ? 就可以了. 且 callback的值只能是?
5. $.ajax()方法实现
前台代码:
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var param = new Object();
param.year = 2010;
param.name = '李刚'; $.ajax({
url: 'json_r01.php',
type: 'POST',
dataType: 'jsonp',
data: param,
jsonp: 'callback',
success: function(data){
console.log(data);
console.log(data.newYear);
console.log(data.msg);
}
}) </script>
结果:图片05
注意:
01 --url中不需要设置请求字符串
02--dataType: 'jsonp',
03--jsonp: 'callback'
04--不需要设置callback的值, jquery自动有了一个随机的值.
-----------------------------------------------------
自己设置callback的值
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var param = new Object();
param.year = 2010;
param.name = '李刚'; $.ajax({
url: 'json_r01.php',
type: 'POST',
dataType: 'jsonp',
data: param,
jsonp: 'callback',
jsonpCallback:'test01',
success: function(data){
console.log(data);
console.log(data.newYear);
console.log(data.msg);
}
}) </script>
结果:图片06
注意:
01-这里只是多设置了一个jsonpCallback:'test01',
此时图片06中的 返回的函数名是 test01()
6. 最新的测试用例模拟:
请求端:
---------
接收端:
--------------
可见请求端 和 接收端 是跨域的.
6-1: 一般的ajax请求: 因为跨域,无法访问.
因为ajax无法跨域请求.
----------
noJsonp.php :请求端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var param = new Object();
param.year = 2010;
param.name = '李刚'; $.ajax({
url: 'http://www.a.com/nojson_return.php',
type: 'POST',
dataType: 'json',
data: param,
success: function(data){
console.log(data);
console.log(data.newYear);
console.log(data.msg);
}
}) </script>
</head>
<body> </body>
</html>
-------------
接收端: nojson_return.php
<?php $arr = array();
$arr['newYear'] = $_REQUEST['year'] + 6;
$arr['msg'] = $_REQUEST['name'] . '测试信息'; //json编码
$json = json_encode($arr); echo $json; ?>
-----------
访问的结果:
跨域没有数据.
可见,ajax 无法跨域访问数据.
但是. http访问 是可以的.
例如:
---
6-2:通过jsonp , ajax获取数据.
----
请求端: jsonp.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var param = new Object();
param.year = 2010;
param.name = '李刚'; $.ajax({
url: 'http://www.a.com/jsonp_return.php',
type: 'POST',
dataType: 'jsonp',
data: param,
jsonp: 'callback',
success: function(data){
console.log(data);
console.log(data.newYear);
console.log(data.msg);
}
}) </script>
</head>
<body> </body>
</html>
-----------
接收端: jsonp_return.php
<?php $callback = $_REQUEST['callback']; $arr = array();
$arr['newYear'] = $_REQUEST['year'] + 6;
$arr['msg'] = $_REQUEST['name'] . '测试信息'; //json编码
$json = json_encode($arr); //返回一个调用函数的字符串: 例如 test({'name': 'lucy'}) echo $callback . '(' . $json . ')'; ?>
---------------
访问结果:
jquery中使用jsonp的更多相关文章
- jQuery中利用JSONP解决AJAX跨域问题
写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...
- jQuery中通过JSONP来跨域获取数据的三种方式
第一种方法是在ajax函数中设置dataType为'jsonp' $.ajax({ dataType: 'jsonp', url: 'http://www.a.com/user?id=123', su ...
- jquery中的jsonp跨域调用
jquery jsonp跨域调用接口
- jquery中的jsonp跨域调用(接口)
jquery jsonp跨域调用接口
- jquery中的jsonp和js中的jsonp还有配合php实现的jsonp。
最近在做一个自己的网站,才知道一个前端需要学习的东西到底有多少. 来吧~步入正题,我的网站空间很小.所以在资源上,就有点吼不住了.跨域拿数据肯定是不可避免的了. 一.原生js: 我们知道他的原理,就是 ...
- JSONP原理及jQuery中的使用
JSONP原理 JSON和JSONP JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息. JSONP(JSON ...
- jquery 中jsonp的实现原理
在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的 ajax是不能进行跨域请求的.但 img.iframe .script等标签是个例外,这些标签可以通过 src属性请求到其 ...
- jQuery中jsonp函数实现
由于浏览器中的同源策略,不同的域名,不同的协议,甚至不同的端口都无法请求数据.因此出现了浏览器跨域请求数据问题. Jsonp是解决跨域问题的一个非常流行的方法. JSONP(JSON with Pad ...
- [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
随机推荐
- StringUtils类常用的方法讲解
StringUtils 方法的操作对象是 Java.lang.String 类型的对象,是 JDK 提供的 String 类型操作方法的补充,并且是 null 安全的(即如果输入参数 String 为 ...
- HDU 1248 寒冰王座(完全背包)
http://acm.hdu.edu.cn/showproblem.php?pid=1248 题意: 商店里只有三种物品,价格分别为150,200,350.输入钱并计算浪费的钱的最小值,商店不找零. ...
- google nmt 实验踩坑记录
最近因为要做一个title压缩的任务,所以调研了一些text summary的方法. text summary 一般分为抽取式和生成式两种.前者一般是从原始的文本中抽取出重要的word o ...
- python中sys.stdout、sys.stdin
如果需要更好的控制输出,而print不能满足需求,sys.stdout,sys.stdin,sys.stderr就是你需要的. 1. sys.stdout与print: 在python中调用print ...
- thinkphp5开发的网站出现”No input file specified”(php版本5.6.27)
thinkphp5开发的网站出现”No input file specified”(php版本5.6.27) 一.总结 一句话总结:搜索引擎一定要用google,比百度节约时间一万倍,google啊, ...
- English trip -- 国际音标表
26个字母音标表 A a [ei] B b [bi:] C c [si:] D d [di:] E e [i:] F f [ef] G g [dʒi:] H h [eit∫] I i [ai] J j ...
- Vue.js教程--基础(实例 模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)
官网:https://cn.vuejs.org/v2/guide/index.html Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. 视频教程:https: ...
- Confluence 6 使用 LDAP 授权连接一个内部目录 - 高级设置
ted Groups 为嵌套组启用或禁用支持. 一些目录服务器能够允许你在一个组中定义另外一个组.在这种结构下的用户组称为用户组嵌套.嵌套组的配置能够让子用户组继承上级用户组的权限,是系统的权限配置变 ...
- 27 网络通信协议 tcp udp subprocess
1.模块subprocess import subprocess cmd_str = input('请输入指令>>>') sub_obj = subprocess.Popen( cm ...
- HDU-3506 Monkey Party (环形石子合并)
题目大意:n堆石子围成一圈,每堆石子的块数已知,每次可以将相邻的两堆合并到一堆,块数变为两堆之和,代价也为两堆石子块数之和.求合并到一堆的最小代价. 题目分析:先通过将前n-1依次个移到第n个后面,将 ...