关于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源码实现（原理解析）的更多相关文章

  1. 笔记-iOS弹幕(源码)实现原理解析

    最近,读完今年的第三本书<大话移动APP测试 Android与iOS>,在读到陈晔前辈改变中国测试行业的决心时,内心无比激动,作为一名初生的开发人员,我可能还无法理解测试行业的本质,但他那 ...

  2. Spring笔记(3) - debug源码AOP原理解析

    案例 @EnableAspectJAutoProxy//开启基于注解的aop模式 @Configuration public class AOPConfig { //业务逻辑类加入容器中 @Bean ...

  3. JSONP跨域的原理解析

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...

  4. JSONP跨域的原理解析及其实现介绍

    JSONP跨域的原理解析及其实现介绍 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-22 JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并 ...

  5. jQuery源码:从原理到实战

    jQuery源码:从原理到实战 jQuery选择器对象 $(".my-class"); document.querySelectorAll*".my-class" ...

  6. MyBatis 源码分析 - 配置文件解析过程

    * 本文速览 由于本篇文章篇幅比较大,所以这里拿出一节对本文进行快速概括.本篇文章对 MyBatis 配置文件中常用配置的解析过程进行了较为详细的介绍和分析,包括但不限于settings,typeAl ...

  7. 笔记-twisted源码-import reactor解析

    笔记-twisted源码-import reactor解析 1.      twisted源码解析-1 twisted reactor实现原理: 第一步: from twisted.internet ...

  8. InfluxDB源码目录结构解析

    操作系统 : CentOS7.3.1611_x64 go语言版本:1.8.3 linux/amd64 InfluxDB版本:1.1.0 influxdata主目录结构 [root@localhost ...

  9. 34、[源码]-AOP原理-链式调用通知方法

    34.[源码]-AOP原理-链式调用通知方法

随机推荐

  1. 退役&&搬家

    牡丹江与鞍山两站作为最后的结束站.一银一铜就此结束了~ 此博客用来怀念ACM就此保留并不添加任何其它与其无关内容. ------------------------------------------ ...

  2. tcpdump用法

    http://man.linuxde.net/tcpdump http://www.cnblogs.com/yc_sunniwell/archive/2010/07/05/1771563.html

  3. 使用JS实现轮播图的效果

    其中的一些css样式代码就省略了,下面只把结构层html.行为层js的代码展示出来 ,看代码说事. 一.简单的轮播图 <div class="box" id="bo ...

  4. cordova iOS blank iframe iphone iframe 白屏 ios iframe 白屏

    (1)解决方案 http://stackoverflow.com/questions/36572537/cordova-ios-blank-iframe/36587026 在 index.html中配 ...

  5. 使用cocos2d-x c++ Android静态库

    在用cocos2d-x做Android开发时,每次clean后都会需要再次编译coco2d-x的库,十分耗时. 这里给出一个直接使用静态库而不用每次都编译源码的方法: 1\ 首先找到一个cocos2d ...

  6. Yii 读取CVS文件内容插入到数据库

    这个方法和上次写的读取txt文件的方法基本上差不多,直接贴代码,需要的直接拿走 function ImportExcel(){ $file = fopen('test.csv','r'); //输出文 ...

  7. 关于紫光a5扫描仪的安装

    同事需要扫描写东西,从别的机器上搬来紫光a5的扫描仪,不会安装,需要帮忙. 插上扫描仪,win7提示发现新硬件,开始自动安装驱动.等了一会儿,提示无法安装,看来得手工寻找驱动来安装了.上网搜索a5的驱 ...

  8. Zotero 使用指南

    DownLoad Page: https://onedrive.live.com/redir?resid=5084666E7B16AA85!109&authkey=!ABHQp7yfMnLpE ...

  9. 20169212《Linux内核原理与分析》第八周作业

    理论 task_struct的结构关系 非常庞大的数据结构,400多行代码.包括对进程链表的管理,控制台,文件系统描述,文件描述符,内存管理描述,信号描述等. 创建一个新进程在内核中的执行过程 for ...

  10. 查看APK中MD5签名的方法

    (需下载jdk) 1. 先将apk文件重命名为zip文件 2. 解压zip,其中的META-INF/CERT.RSA文件即MD5签名文件 3. cmd下打开黑窗口,敲入如下命令: keytool -p ...