AJAX JSONP源码实现（原理解析）

关于JSONP以及跨域问题，请自行搜索。

本文重点给出AJAX JSONP的模拟实现代码，代码中JSONP的基本原理也一目了然。

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>模拟实现AJAX JSONP源码</title><script type="text/javascript">// 生成随机字符串function randomString(len) {len = len || 32;var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefhijklmnoprstuvwxyz1234567890";  var maxPos = chars.length;var pwd = '';for (i = 0; i < len; i++) {pwd += chars.charAt(Math.floor(Math.random() * maxPos));}return pwd;}function ajax_jsonp(data) {// 生成随机函数名并指向传入的回调函数var callbackfun = "jquery_" + randomString(32);eval( callbackfun+ " = data.success; "); // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）var url = data.url + "&callback="+callbackfun;// 创建script标签，设置其属性var script = document.createElement('script');script.setAttribute('src', url);// 把script标签加入head，此时调用开始
        document.getElementsByTagName('head')[0].appendChild(script); }// 模拟调用
    ajax_jsonp({url: "http://sax.sina.com.cn/newimpress?adunitid=PDPS000000047325&rotate_count=36",success: function(data){alert('ID ' + data.ad[0].id );}});</script>
</head>
<body></body>
</html>

基本工作思路：

1. 创建一个随机字符串作为回调函数名

2. 把传入的回调函数赋值给随机函数。

3. 把该随机函数名作为callback参数补充到传入的URL（真正要访问的跨域的URL）中

4. 动态创建出script元素并触发URL的访问。浏览器获取返回的JS代码并执行，也就是执行了传入的回调函数。

（第三方URL返回的必须是一个合法的JS函数调用字符串，其中函数名是参数callback，参数是真正要返回的数据。）

参考文章（文中代码基于该参考文章修改）

转载于:https://www.cnblogs.com/zhangfanwen/p/5486860.html

AJAX JSONP源码实现（原理解析）相关推荐

springfox源码_springfox-swagger原理解析与使用过程中遇到的坑
swagger简介 swagger确实是个好东西,可以跟据业务代码自动生成相关的api接口文档,尤其用于restful风格中的项目,开发人员几乎可以不用专门去维护rest api,这个框架可以自动为你 ...
(01)ORB-SLAM2源码无死角解析-(37) EPnP 算法原理详解→理论基础一:控制点选取、透视投影约束
讲解关于slam一系列文章汇总链接:史上最全slam从零开始,针对于本栏目讲解的(01)ORB-SLAM2源码无死角解析链接如下: (01)ORB-SLAM2源码无死角解析-(00)目录_最新无死角讲 ...
HashMap jdk1.7源码阅读与解析
转载自 HashMap源码阅读与解析一.导入语 HashMap是我们最常见也是最长使用的数据结构之一,它的功能强大.用处广泛.而且也是面试常见的考查知识点.常见问题可能有HashMap存储结构是什 ...
怎么证明建立了存储过程_【Filecoin源码仓库全解析】第七章：了解PoRep与PoSt并参与复制证明游戏
欢迎大家来到第七章,经过前章<[Filecoin源码仓库全解析]第六章:如何单机部署多节点集群及矿池设计思路>的介绍,我们分享了如何在单机部署多节点集群的知识以及矿池设计的一些思路. 我们 ...
唯一插件化Replugin源码及原理深度剖析--插件的安装、加载原理
上一篇唯一插件化Replugin源码及原理深度剖析–唯一Hook点原理在Replugin的初始化过程中,我将他们分成了比较重要3个模块,整体框架的初始化.hook系统ClassLoader.插件的 ...
(02)Cartographer源码无死角解析-(32) LocalTrajectoryBuilder2D::AddRangeData()→点云的体素滤波
讲解关于slam一系列文章汇总链接:史上最全slam从零开始,针对于本栏目讲解(02)Cartographer源码无死角解析-链接如下: (02)Cartographer源码无死角解析- (00)目录 ...
(01)ORB-SLAM2源码无死角解析-(56) 闭环线程→计算Sim3:理论推导(1)求解s,t
讲解关于slam一系列文章汇总链接:史上最全slam从零开始,针对于本栏目讲解的(01)ORB-SLAM2源码无死角解析链接如下(本文内容来自计算机视觉life ORB-SLAM2 课程课件): (0 ...
(01)ORB-SLAM2源码无死角解析-(62) BA优化(g2o)→追踪线程:Optimizer::PoseOptimization→仅位姿优化
讲解关于slam一系列文章汇总链接:史上最全slam从零开始,针对于本栏目讲解的(01)ORB-SLAM2源码无死角解析链接如下(本文内容来自计算机视觉life ORB-SLAM2 课程课件): (0 ...
(01)ORB-SLAM2源码无死角解析-(63) BA优化(g2o)→局部建图线程:Optimizer::LocalBundleAdjustment→位姿与地图点优化
讲解关于slam一系列文章汇总链接:史上最全slam从零开始,针对于本栏目讲解的(01)ORB-SLAM2源码无死角解析链接如下(本文内容来自计算机视觉life ORB-SLAM2 课程课件): (0 ...

AJAX JSONP源码实现（原理解析）

AJAX JSONP源码实现（原理解析）相关推荐

最新文章

热门文章