关于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. VS中Qt的探索02

    边看C++ GUI QT4教程,边在VS2010中进行编程学习探索. 在使用Qt设计师时,其中每一个对象的ObjectName属性是非常重要的,在程序功能的实现过程中,需要不断的使用该变量名. 当所有 ...

  2. 解决jquery操作checkbox全选全不选无法勾选问题

    最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...

  3. Java源文件编译成功但是运行时加载不到文件

    最近系统重装了一些,Java等环境变量都需要重新配置,配置好以后编写了一个Java源文件编译了一下,通过Javac编译源文件,编译成功,但是再通过Java运行时没找到报出找不到加载文件或者加载文件不存 ...

  4. MySQL 日期时间相关函数整理

    -- 为日期增加一个时间间隔:date_add() SELECT NOW(); YEAR); MONTH); DAY); HOUR); MINUTE); SECOND); MICROSECOND); ...

  5. webpack学习笔记--安装

    1 首先要安装node  Node.js 自带了软件包管理器 npm,Webpack 需要 Node.js v0.6 以上支持 2 npm install webpack -g 通常我们会将 Webp ...

  6. java 的 linq，不要再写令人讨厌的 for 了！

    package com.ly.linq; import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator ...

  7. C#获取全部目录和文件

    public class FileAccess{ //储存所有文件夹名 private ArrayList dirs; public FileAccess() { dirs = new ArrayLi ...

  8. PHP之OOP要点摘要

    类和对象:    类是生成对象的模板,对象是活动组件;    面向对象编程实际操作都是通过类的实例(而不是类本身)完成的:    访问控制(public.protected.private):(1) ...

  9. EntityFramework CodeFirst SQLServer转Oracle踩坑笔记

    接着在Oracle中使用Entity Framework 6 CodeFirst这篇博文,正在将项目从SQLServer 2012转至Oracle 11g,目前为止遇到的问题在此记录下. SQL Se ...

  10. asp.net网站运行出错：the underlying provider failed on open的解决

    在登录系统,通过linq查询时发生错误,the underlying provider failed on open,如何解决,请看: Step 1:Open Internet Information ...