关于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. 程序设计入门——C语言 第6周编程练习 1 分解质因数（5分）

    1 分解质因数(5分) 题目内容: 每个非素数(合数)都可以写成几个素数(也可称为质数)相乘的形式,这几个素数就都叫做这个合数的质因数.比如,6可以被分解为2x3,而24可以被分解为2x2x2x3. ...

  2. centos7 升级内核到最新版本

    centos7 从问世以来,官网提供的镜像始终是3.10 版本,该版本最大的一个问题是对硬件驱动(尤其是无线网卡)的支持不是很好,本人亲测>5种机型,无线网卡均无法正常使用,如果是非主流机型,手 ...

  3. Git代码管理常用命令

    1) 远程仓库相关命令 检出仓库:$ git clone git://github.com/jquery/jquery.git查看远程仓库:$ git remote -v添加远程仓库:$ git re ...

  4. cf#382div2

    A. 题意:字符串长度n,每次可向左向右跳k个格子.要求不能在障碍物处停留('#'),可以在空地处停留(' . ').给出字符串,从G开始,问能不能到达T. 分析:直接从G处开始向两边搜,如果能到T则 ...

  5. 商业信息管理系统 Bizagi 建模pattern

    WCP 1- Sequence This pattern is used to model dependencies between tasks so that one task cannot sta ...

  6. 我需要在Web上完成一个图片上传的功能(+2)

    增加一个页面,用于判断传参是否正确. @{     //判断是否具备会员参数     if (UrlData.Count > 0)     {         Session["Arg ...

  7. c#数据绑定（3）——数据转化为信息

    文/嶽永鹏 本文主要在数据绑定1和2中新增了DataSet对象,练习了如何在DataSet中添加表.关系和约束,同时本文也简要的介绍了如何将数据转化为信息. 目标界面: XAML代码: <Gri ...

  8. easyui验证

    1.验证是否必填 class="easyui-validatebox" missingMessage="必须填写" 2.验证字符串长度 class=" ...

  9. pandas保存excel

    没有matlab那样的保存中间变量可以用jupyter创建文件然后在pycharm中打开但是字体很奇怪- -所以还是用excel的中间文件方式#测试涨停# ret = asc.getPctChange ...

  10. c#文本框限制输入内容

         //限制输入不能为中文和全角         private void zhbh_KeyPress(object sender, KeyPressEventArgs e)         { ...