关于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. sqllite 入门

    链接: http://www.jb51.net/article/52064.htm

  2. eclipse +maven+ssm搭建矿建

    记录一下搭建框架的过程1.下载最新的eclipse   https://www.eclipse.org/downloads/download.php?file=/oomph/epp/neon/R/ec ...

  3. QQ号验证

    №☆★〇█962319751,1611385654,209414856,2729767026,1213235712,1187970122,1393756744,2463317013,346171055 ...

  4. SPSS数据分析—配对Logistic回归模型

    Lofistic回归模型也可以用于配对资料,但是其分析方法和操作方法均与之前介绍的不同,具体表现 在以下几个方面1.每个配对组共有同一个回归参数,也就是说协变量在不同配对组中的作用相同2.常数项随着配 ...

  5. SPSS数据分析—聚类分析

    多元分析的主要思想之一就是降维,我们已经讲过了很多降维的方法,例如因子分析.主成分分析,多维尺度分析等,还有一种重要的降维方法,就是聚类分析. 聚类分析实质上就是按照距离远近将数据分成若干个类别,使得 ...

  6. 关于firstChild,firstElementChild和children

    <div> <p>123</p> </div> 在上面这段代码中,如果使用以下js代码 var oDiv=document.getElementByTa ...

  7. （转载）数据库出现ORA-00283/ORA-01610的问题

    在这里需要感谢棉花糖给予无私帮助,真的谢谢他!http://blog.itpub.net/67668/viewspace-353270/处理过程可以参照http://www.itpub.net/vie ...

  8. sql语句查询服务器的数据库，数据库的全部表和表的全部列

    下面是数据库的结构: 数据库名是:edushi_zixunok;表名是infoArticle --获取所有用户名 SELECT * FROM sys.sysusers --获取所有用户数据库 SELE ...

  9. ASP.NET 教程(一)

    ASP.NET 是一个开发框架,用于通过 HTML.CSS.JavaScript 以及服务器脚本来构建网页和网站. ASP.NET 支持三种开发模式: Web Pages.MVC (Model Vie ...

  10. 权重和层叠规则决定了CSS样式优先级

    一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...