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 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 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
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
ArrayList类(增强版)
2007/04/04 Javascript
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
jquery json 实例代码
2010/12/02 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
美德好少年主要事迹
2014/01/29 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
学生安全承诺书
2014/05/22 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
2014全年工作总结
2014/11/27 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python