JS跨域交互(jQuery+php)之jsonp使用心得


Posted in Javascript onJuly 01, 2016

什么是jsonp?

说到jsonp,你可能最先想到JSON;它还真和JSON有关系;

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

JSONP(JSON with Padding),我更倾向于把最后一个字母P理解为 protocol(协议,约定);

JS跨域交互(jQuery+php)之jsonp使用心得

JSON的优点:

1、基于纯文本,跨平台传递极其简单;

2、Javascript原生支持,后台语言几乎全部支持;

3、轻量级数据格式,占用字符数量极少,特别适合互联网传递;

4、可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的;

5、容易编写和解析,当然前提是你要知道数据结构;

JSON的缺点当然也有,但在作者看来实在是无关紧要的东西,所以不再单独说明。

有这么一个故事:

A男和B女居住在不同的国家A国和B国,在一次去C国旅行的途中相遇了,双方聊的比较Happy,旅行结束都回国了;但A男总是会想B女,想联系上B女,无奈当时没有留下B女的电话、邮箱、微信、QQ号码这些可以更加即时的联系方式,只是闲聊间知道B女地址,那就只能写信吧去C国也不太现实;于是就写信把自己的各种即时联系方式都写进去了,一封信寄出去了过了一段时间没有回音又写一封,就是没有收到C友的电话等任何回音;对方收到了没有呢,确定是收到了也看了。
这是为什么呢?C女不想搭理他呗(没有按A男指定的方式回调)!

JSONP就是这么一回事,你知道对方的调用地址,告诉对方你的回调函数名称是什么,但对方如果不配合,就是不调用你约定的回调函数名称,你调用多少次也没用,所以JSONP的关键还是要对方配合你才行。

js跨域交互实现原理

HTML <script> 标签,对就是它,世界因它而美好!

你可以使用这个标签加载任何其它可访问到的网站的js文件试试,我就不多说了;

跨域交互一:jQuery.getScript

这个例子比较简单易懂,使用固定的回调函数名称:fncallback

调用端,也可以说是客户端:

我是在本地测试,跑了多个Web服务,本地页面访问地址:http://localhost:88/

网页中的JS代码如下:

<script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
//定义名称为“fncallback”的回调函数,参数接收JSON对象; 
function fncallback(data){ 
$(document.body).append("<hr />getScript ok!" + data.reqUrl); 
} 
//注册页面加载完成回调函数(匿名) 
$(document).ready(function(){ 
//使用getScript方法调用跨域脚本; 
$.getScript("http://localhost/test2.php"); 

}); 
</script>

效果:在页面尾部增加一条线,以及:getScript ok! ,后面紧跟被调用端返回的它接收到的请求地址:

getScript ok!/test2.php?_=1467261287339

后面为什么会多了个“?_=1467261287339”呢?

这是防止浏览器从缓存去加载这个URL地址的内容的!由jQuery自动添加;

被调用端,也可以说是服务端

服务端后台语言是PHP,通过Nginx代理的,端口为:80,所以访问地址是:http://localhost/test2.php

test2.php 文件的内容:

<?php 
echo "var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";"; 
echo "fncallback({\"reqUrl\": reqUrl });";

浏览器访问:

通过浏览器访问,自然没有后面的参数,除非你自己手动加上;

跨域交互二:jQuery.getJSON

调用端:

<script type="text/javascript"> 
//注册页面加载完成回调函数(匿名) 
$(document).ready(function(){ 
//使用getJSON方法调用跨域脚本;注册匿名回调函数 
$.getJSON("http://localhost/test.php?callback=?", function(data){ 
$(document.body).append("<hr />getJSON ok!" + data.reqUrl); 
}); 
}); 
</script>

注意:我在请求的地址中添加了“?callback=?”,这是做什么用的呢?

目的是让jQuery为我自动生成一个回调函数的名称,并将我注册的匿名回调函数映射到这个“自动生成的回调函数名称”上;
有点绕,我们来看看服务端返回的它收到的请求地址就明白了:

getJSON ok!/test.php?callback=jQuery1102031468501139651384_1467262280037&_=1467262280038

看到callback后面跟了参数值了吧,这就是jQuery自动生成的;再看服务端代码;

服务端

<?php 
echo "var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";"; 
echo $_GET["callback"] . "({\"reqUrl\": reqUrl });";

通过 $_GET["callback"] 获取客户端传递过来的回调函数名称;看输出:

var reqUrl = "/test.php?callback=jQuery1102019717387174726153_1467262461959&_=1467262461960"; 
jQuery1102019717387174726153_1467262461959({"reqUrl": reqUrl });

跨域交互三:jQuery.ajax

调用端:

<script type="text/javascript"> 
//注册页面加载完成回调函数(匿名) 
$(document).ready(function(){ 
//使用ajax方法调用跨域脚本; 
$.ajax({ 
url:"http://localhost/test.php", 
dataType: 'jsonp', 
success: function(data){ 
$(document.body).append("<hr />ajax ok!" + data.reqUrl); 
} 
}); 
}); 
</script>

注意:在请求的地址中不需要添加“?callback=?”,但我们使用“dataType: 'jsonp',”;

服务端

这个例子的服务端和上个是完全一样的!

使用总结

使用 getScript 的方式,你可以自己定义一个回调函数的名称,让服务端响应的时候使用你指定的回调函数名称;

使用 getJSON 的方式关键在于URL后面添加的“callback=?”;

使用 ajax 的方式关键在于参数中的数据类型设置“dataType: 'jsonp',”;

以上所述是小编给大家介绍的JS跨域交互(jQuery+php)之jsonp使用心得,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
JS判断字符串包含的方法
May 05 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 #Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 #Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 #Javascript
全面了解JavaScript的数据类型转换
Jul 01 #Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 #Javascript
浅谈JavaScript中的分支结构
Jul 01 #Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 #Javascript
You might like
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
一个比较简单的PHP 分页分组类
2009/12/10 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
php常用表单验证类用法实例
2015/06/18 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
jquery插件开发之实现md5插件
2014/03/17 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
python中的装饰器详解
2015/04/13 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
python删除过期log文件操作实例解析
2018/01/31 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
问卷调查计划书
2014/01/10 职场文书
师说教学反思
2014/02/07 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
消防安全培训工作总结
2015/10/23 职场文书
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫