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，参数是真正要返回的数据。）
参考文章（文中代码基于该参考文章修改）
AJAX JSONP源码实现（原理解析）的更多相关文章
- 笔记-iOS弹幕(源码)实现原理解析
最近,读完今年的第三本书<大话移动APP测试 Android与iOS>,在读到陈晔前辈改变中国测试行业的决心时,内心无比激动,作为一名初生的开发人员,我可能还无法理解测试行业的本质,但他那 ...
- Spring笔记(3) - debug源码AOP原理解析
案例 @EnableAspectJAutoProxy//开启基于注解的aop模式 @Configuration public class AOPConfig { //业务逻辑类加入容器中 @Bean ...
- JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...
- JSONP跨域的原理解析及其实现介绍
JSONP跨域的原理解析及其实现介绍 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-22 JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并 ...
- jQuery源码:从原理到实战
jQuery源码:从原理到实战 jQuery选择器对象 $(".my-class"); document.querySelectorAll*".my-class" ...
- MyBatis 源码分析 - 配置文件解析过程
* 本文速览 由于本篇文章篇幅比较大,所以这里拿出一节对本文进行快速概括.本篇文章对 MyBatis 配置文件中常用配置的解析过程进行了较为详细的介绍和分析,包括但不限于settings,typeAl ...
- 笔记-twisted源码-import reactor解析
笔记-twisted源码-import reactor解析 1. twisted源码解析-1 twisted reactor实现原理: 第一步: from twisted.internet ...
- InfluxDB源码目录结构解析
操作系统 : CentOS7.3.1611_x64 go语言版本:1.8.3 linux/amd64 InfluxDB版本:1.1.0 influxdata主目录结构 [root@localhost ...
- 34、[源码]-AOP原理-链式调用通知方法
34.[源码]-AOP原理-链式调用通知方法
随机推荐
- 关于content-type","application/x-www-form-urlencoded;charset=utf-8"的说明
在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlen ...
- js判断当前设备
最近用bootstrap做自适应,发现仍然很难很好的兼容web端和PC端的现实. 仔细观察百度,淘宝,京东等大型网站,发现这些网站都有对应不同客户端的子站. 例如: 站点 PC端url web端url ...
- 解决在CAPSLOCK开启情况下sendkeys大小写异常的问题
http://files.cnblogs.com/files/liuzhaoyzz/sendkeys%E5%A4%A7%E5%B0%8F%E5%86%99.rar 首先利用GetKeyState(vb ...
- zookeeper 应用
一,启动一个zk客户端 zookeeper/bin/zkCli.sh ls / 查看根目录下所有节点 create /znode data 创建节点znode,并添加数据内容为data ls /z ...
- 【转】Centos升级Python 2.7.12并安装pip、ipython
Centos系统一般默认就安装有Python2.6.6版本,不少软件需要2.7以上的,通过包管理工具安装不了最新的版本,通过源码编译可以方便安装指定版本,只需要把下面版本的数字换成你想要的版本号. 1 ...
- 揭开Socket编程的面纱
对TCP/IP.UDP.Socket编程这些词你不会很陌生吧?随着网络技术的发展,这些词充斥着我们的耳朵.那么我想问: 1. 什么是TCP/IP.UDP? 2. Socket在哪里呢? 3. Sock ...
- oracle笔记
一.sql*plus常用命令 (1)connect 用法:conn 用户名/密码@网络服务名[as sysdba/sysoper] 当特权用户连接时,必须带上as sysdba或是as sysoper ...
- activitygroup下的activity不回调onactivityresult的解决方法
就是activitygroup下的子activity启动第三方activity的时候需要通过getparent的startactivityforresult方法来启动.getparent其实就是这个a ...
- 会计凭证BAPI_ACC_DOCUMENT_POST
*&---------------------------------------------------------------------* *& Report ZFIFB107 ...
- python3内置函数
abs()Return the absolute value of a number. The argument may be an integer or a floating point numbe ...