关于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. Spring的注解方式实现AOP

    Spring对AOP的实现提供了很好的支持.下面我们就使用Spring的注解来完成AOP做一个例子. 首先,为了使用Spring的AOP注解功能,必须导入如下几个包.aspectjrt.jar,asp ...

  2. SSIS excel2003文件导入列名显示为F1,F2 - FN

    问题现象: 数据源2003版本的EXCEL文件,第一列是空白,数据是从第二列开始的.所以SSIS中用EXCEL数据源倒入这个EXCEL时,所有的列显示不出来,显示的是F1,F2  - FN. 解决方法 ...

  3. 整理mac上的php环境

    重装了一下mb,重新编译环境太麻烦了,所以整理一下mac系统自带php环境用: OS X yosemite 10.10.5  自带apache,php 1,让apache启用php模块 sudo vi ...

  4. css样式之 direction

    今天看到 direction:rtl.一时有点发傻. 其实就是文本读取顺序.默认是ltr从左向右读.rtl是从右向左读取.

  5. MEF 生命周期PartCreationPolicy

    为什么要单独把这个生命周期捞出来单独说一说呢?因为我今天就被这个东东坑了一把……新加了一个界面,第二次打开界面的时候会报错“指定的元素已经是另一个元素的逻辑子元素”.好嘛,我一看,哟,感觉就是xaml ...

  6. Z表数据EXCEL导入

    很多项目都有这种需求,虽然别人用的各有不同,不过闲来无事,还是自己搞了一个出来.基于EXCEL的导入. *&------------------------------------------ ...

  7. sass1:

    less在处理CSS动画时,非常恶心,决定转向sass了.sass诞生得比less早,只是因为它是ruby写的,因此受众面够少.但我们不需要自己下编译器或使用命令行,我们可以koala这神器 首先几个 ...

  8. occ添加新的捕捉模式

    Load (theSelection, theShape, theType, theDeflection, theDeviationAngle, isAutoTriangulation, thePri ...

  9. STC12C5A60S2 双串口通信

    STC12C5A60S2单片机是一款功能比较强大的单片机,它拥有两个全双工串行通信接口,串口1的功能及操作与传统51单片机串行口相同:特殊的是STC12C5A60S2单片机内部有一个独立波特率发生器, ...

  10. SwitchHosts—hosts管理利器

    SwitchHosts是一个管理.快速切换Hosts小工具,开源软件,一键切换Hosts配置,非常实用,高效.开发Web过程成,部署有多套环境,网址域名都相同,部署在不同的服务器上,有开发环境.测试环 ...