由于浏览器中的同源策略,不同的域名,不同的协议,甚至不同的端口都无法请求数据。因此出现了浏览器跨域请求数据问题。

  Jsonp是解决跨域问题的一个非常流行的方法。

  JSONP(JSON with Padding),其实就是被包裹在函数调用中的JSON。

callback({"name": "Kate"});

  1. JSONP原理

  通过script标签进行跨域操作,载入的请求js文件中的内容会执行我们在url中指定的函数,并且,传入的参数,就是我们请求的数据。

  2. JSONP简单实现

 <script>
// 先定义我们将要处理数据的函数
function myFun(data) {
console.log(data);
}
</script> <!-- 我们使用script标签来进行跨域请求,并使用callback标明我们将要处理数据的函数 -->
<!-- 此处我使用的是聚合数据的数据资源 -->
<script src="http://v.juhe.cn/expressonline/getCarriers.php?key=6a1038e454e6d4b25457b911c8d9b815&callback=myFun"></script>

最终显示为:

我们成功获取不同域名下的资源。并通过自定义的myFun函数将获得的数据打印出来了。

  3. 简单实现jQuery中jsonp

  在使用jsonp过程中,可能因为请求数据的API要求不同,我们需要构建自己的jsonp方法,下面我们简单介绍一种类似jQuery中jsonp的实现。

  首先,我们创建一个以jQuery开头的随机的函数名,并将其挂载到window对象中。在这个函数中,我们调用我们传入的回调函数处理数据。

  然后,我们开始处理传入的url,此时,我们规定传入的url不带有callback查询字符串,方便我们根据不同的API要求传入对应的参数。

  最后,我们创建script标签,并指定其src为前面处理好的url,将其添加到文档中,即可获取数据。

 <script>
// 自定义框架名称myFrame
var myFrame = {}; // 添加jsonp方法
myFrame.jsonp = function(url, callback) {
// 生成随机函数名
var cbname = 'jQuery' + new Date().getTime(); // 把cbname作为函数名挂载到window对象上
window[cbname] = function(data) {
// 调用传入的回调函数处理数据
callback(data); // 调用数据之后,删除创建的script标签
// 放置script标签无限增长
document.body.removeChild(script);
} // 拼接url,将callback添加到url中,
// 如:http://api.douban.com/v2/movie/in_theaters?callback=;jQuery1487687886270
url += url.indexOf('?') == -1 ? '?' : '&';
url += 'callback=' + cbname; // 创建script标签
var script = document.createElement('script');
// 添加script标签属性
script.src = url;
script.type = 'text/javascript'; // 将script标签添加到文档中,此时开始请求我们的数据
document.body.appendChild(script); } // 调用框架中的方法,此时使用豆瓣API
myFrame.jsonp('http://api.douban.com/v2/movie/in_theaters', function(data) {
console.log(data);
});
</script>

成功请求到数据:

script标签请求到的内容:

jQuery中jsonp函数实现的更多相关文章

  1. jquery 中jsonp的实现原理

    在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的 ajax是不能进行跨域请求的.但 img.iframe .script等标签是个例外,这些标签可以通过 src属性请求到其 ...

  2. 解读jQuery中extend函数

    $.extend.apply( null, [ true, { "a" : 1, "b" : 2 } ] );//console.log(window.a); ...

  3. jQuery中live函数的替代-【jQuery】

    在老版本的jQuery中,当需要对页面上某个由ajax加载的某片段的页面内容响应事件时,可以使用live函数来响应其事件,比如: $('a').live('click', function() { b ...

  4. jQuery中attr()函数 VS prop()函数

    http://www.365mini.com/page/jquery-attr-vs-prop.htm 在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法 ...

  5. jquery中ready函数,$(function(){})与自执行函数的区别

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 关于jQuery中toggle()函数的使用

    今天遇到一个有趣的例子,将它记录下来. 一个一级菜单,里边有一个二级菜单,二级菜单是通过锚点来链接页面元素的.想要实现的效果是当点击锚点时,页面链接到相应锚点,同时二级菜单隐藏,再点击一级菜单时,继续 ...

  7. jQuery中bind函数绑定多个事件

    名人名言:道德是真理之花.——雨果 在jQuery中绑定多个事件名称是,使用空格隔开,举例如下: $("#foo").bind("mouseenter mouseleav ...

  8. 关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例

    部署环境:Window 7 SP1+IIS7 成功方案: 其成功解决问题的几个重要因素如下: 1.       由于WebService默认不支持Get请求,所以要在Web.config配置文件内的& ...

  9. JQuery中on()函数详解

    JQuery API中定义的on方法,专业名词很多,读起来并不是那么容易,而对于开发人员知道函数怎么使用就可以了.本文将JQuery的说明翻译如下: on(events,[selector],[dat ...

随机推荐

  1. Ajax完整结构和删除

    1.ajax完整结构 注意:(1)最后一个没有"," (2)ajax对网速要求高,最好有各种提示和使用按钮(可使其失效,防止重复加载) $.ajax({ url: "aj ...

  2. mysql数据库优化小结

    一.常见数据库的优化操作 1.表的设计要符合三范式. 2.添加适当的索引,索引对查询速度影响很大,必须添加索引.主键索引,唯一索引,普通索引,全文索引 3.添加适当存储过程,触发器,事务等. 4.读写 ...

  3. Android Touch(1)事件的传递流程(*)

    1,Activity,ViewGroup,View的关系 2,触摸事件 3,传递事件时的重要函数 4,事件传递流程参考图 5,其它参考资料 1,Activity,ViewGroup,View的关系 本 ...

  4. C#.bat文件清理工程目录

    另外一种方法是自己写一个bat文件来清理,非常方便,下面是自己写的验证过比较好用的方法. bat文件内容如下: echo 正在清理VS2010工程中不需要的文件 echo 请确保本文件放置在工程目录之 ...

  5. exit()与_exit()的区别(转)

    http://blog.csdn.net/lwj103862095/article/details/8640037 从图中可以看出,_exit 函数的作用是:直接使进程停止运行,清除其使用的内存空间, ...

  6. Axios使用说明

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...

  7. 高清语音技术(WBS)及其在手机和蓝牙耳机中的实现

    高清语音也被称为宽带语音,是一种能为蜂窝网络.移动电话和无线耳机传输高清.自然语音质量的音频技术.与传统的窄带电话相比,高清语音很大程度上提高了语音质量,减少了听觉负担. 通信产业链上的所有网络和设备 ...

  8. js -【 数组】判断一个变量是数组类型的几种方法

    怎么判断一个数组是数组呢? 其实这个也是一个常考的题目.依稀记得我为数不多的面试经过中都被问道过. 方案一: instanceof variable instanceof Array 解决思路: 使用 ...

  9. 初始化ArrayList的两种方法[转]

    方式一:  ArrayList<String> list = new ArrayList<String>();  String str01 = String("str ...

  10. MySQL学习(二): 数据类型记录

    整形: 浮点型: 日期时间:(使用较少,可能存在跨区域问题) 字符型: CHAR(M):定长,会将位数补充到M位 VARCHAR(M):非定长,最多到达M位 ENUM('v1','v2',...):从 ...