一、通过jsonp跨域

在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。

比如，有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是https://api.douban.com/v2/book/search?q=javascript&count=1(豆瓣)

那么a.html中的代码就可以这样：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JSONP实现跨域2</title>

</head>

<body>

    <div id="mydiv">

        <button id="btn">点击</button>

    </div>

</body>

<script type="text/javascript">

    function handleResponse(response){             //response参数为接收到的数据

            console.log(response);

    }

</script>

<script type="text/javascript">

    window.onload = function() {                       

    var oBtn = document.getElementById('btn');

    oBtn.onclick = function() {     

        var script = document.createElement("script");                     //动态加载script

        script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";           //跨域请求 callback参数对应方法
        document.body.insertBefore(script, document.body.firstChild); };           //将script标签加入到body里
     }; 

   </script> 

</html>

注：

我们看到获取数据的地址后面还有一个callback参数，按惯例是用这个参数名，但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的，就得按照提供数据的那一方的规定格式来操作了。

输出结果为：

二、jQuery封装JSONP

对于经常用jQuery的开发者来说，能注意到jQuery封装的$.ajax中有一个dataType属性，如果将该属性设置成dataType:"jsonp"，就能实现JSONP跨域了。需要了解的一点是，虽然jQuery将JSONP封装在$.ajax中，但是其本质与$.ajax不一样。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery实现JSONP</title>

</head>

<body>

    <div id="mydiv">

        <button id="btn">点击</button>

    </div>

</body>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<script type="text/javascript">

    $(function(){

        $("#btn").click(function(){

            $.ajax({

                async : true,

                url : "https://api.douban.com/v2/book/search",

                type : "GET",

                dataType : "jsonp", // 返回的数据类型，设置为JSONP方式

                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback

                jsonpCallback: 'handleResponse', //设置回调函数名

                data : {                       //拼接url

                    q : "javascript",

                    count : 1

                },

                success: function(response, status, xhr){

                    console.log('状态为：' + status + ',状态是：' + xhr.statusText);

                    console.log(response);

                }

            });

        });

    });

</script>

</html>

　　

跨域详解之-----Jsonp跨域的更多相关文章

  1. 跨域详解之jsonp，底层的实现原理

    分享一下跨域,不仅是因为现在的工作中遇到的越来越多,而且在面试中也经常被问到. 那么什么是跨域呢,我们来看官方给出的解释:浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的(所谓同源是指,域名 ...

  2. 图文详解 Android Binder跨进程通信机制 原理

    图文详解 Android Binder跨进程通信机制 原理 目录 目录 1. Binder到底是什么? 中文即 粘合剂,意思为粘合了两个不同的进程 网上有很多对Binder的定义,但都说不清楚:Bin ...

  3. HTTP协议头域详解

    HTTP协议头域详解 Requests部分 Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/html Accept-Charset 浏览器可以接受的字符编 ...

  4. JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  5. 【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  6. 详解XMLHttpRequest的跨域资源共享

    0x00 背景 在Browser Security-同源策略.伪URL的域这篇文章中提到了浏览器的同源策略,其中提到了XMLHttpRequest严格遵守同源策略,非同源不可请求.但是,在实践当中,经 ...

  7. webapi 跨域访问设置基于jsonp跨域

    JSONP实现跨域 Web API并没有提供JSONP  Formatter,但是这并不能影响我们前进的脚步,我们可以自定义Formatter来实现JSONP功能.既然是利用JSONP跨域,那么就得简 ...

  8. 跨域 （1） jsonp 跨域

    jsonp 的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. js&jquery跨域详解jsonp，jquery并发大量请求丢失回调bug

    URL  说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http:/ ...

随机推荐

  1. 故障排除：无法启动、访问或连接到 Azure 虚拟机上运行的应用程序

    有多种原因可导致无法启用或连接到在 Azure 虚拟机 (VM) 上运行的应用程序.原因包括应用程序未在预期端口上运行或侦听.侦听端口受到阻止,或网络规则未将流量正确传递到应用程序.本文说明有条理地找 ...

  2. 关于Excel文件导入到Sqlserver2008中出现截断错误的解决办法

    出现错误的可能原因: 1.数据库字段Varchar长度不够: 2.不能用Text类型: 3.数据中可能存在换行符: 4.数据项文本过长,超过4000: 5.前8行的最大长度不够大,后面有超过的. 解决 ...

  3. 关于NativeEvent的处理

    nativeEvent(const QByteArray &eventType, void *message, long *result){ chASSERT(message != NULL) ...

  4. Python初学者第一天 Python安装及第一个Python程序

    Python基础: 1day: 1.Python基础: A.编程语言介绍:     a. 计算机只能理解0和1.编程即写一段按照一定规则写代码,让计算机帮你干活:     b.机器语言:最底层的语言, ...

  5. mysql/MariaDB 搭建后创建密码及开启远程

    创建密码: mysqladmin -u root -p password 123 或 MariaDB [(none)]> use mysql MariaDB [mysql]> update ...

  6. 在IDE中集成boost

    1. 获得Boost 进入Boost的网站(http://www.boost.org/) 下载boost_1_62_0.zip 2. 解压Boost 解压 boost_1_62_0.zip ,比如解压 ...

  7. Java内存使用情况查看工具

    Java通过jvm自己管理内存,同时Java提供了一些命令行工具,用于查看内存使用情况.这里主要介绍一下jstat.jmap命令以及相关工具. 一.jstat查看 gc实时执行情况 jstat命令命令 ...

  8. Linux 命令行 发送邮件

    1.mail -s hi xx@yy.com 给xx@yy.com发一封主题为hi的信(没有正文) 编辑完内容后Ctrl-D结束. 2.echo "This is a test mail!& ...

  9. 018os模块

    import   osprint(os.getcwd())   # 获取当前目录  F:\python_code\fullstack_s2\week4\day18 os.chdir(r'C:/User ...

  10. 调整home和根分区大小

    目标:将VolGroup-lv_home缩小到100G,并将剩余的空间添加给VolGroup-lv_root ============================================= ...