一、通过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. angular 动态组件类型

    出处:https://github.com/Penggggg/angular-component-practices 组件类型1:纯函数功能,而没有视图部分,即Factory(类似于$http) pr ...

  2. SQL点点滴滴_删除临时表

    select into 创建的表属于临时表,判断是否存在的方法 select c_adno,c_con_no into #temp from tb_contract IF OBJECT_ID( 'te ...

  3. 【Leetcode】【Medium】Best Time to Buy and Sell Stock II

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  4. 看了xici有写给孩子的信，maybe我也要写给孩子一些东西了

    看了xici有写给孩子的信,maybe我也要写给孩子一些东西了

  5. Dom4j的一个小例子,用于解析xml文件的元素获取方式

    import java.io.File; import java.io.IOException; import javax.xml.parsers.ParserConfigurationExcepti ...

  6. 苹果手机(ios系统)蓝牙BLE的一些特点

    摘自<BluetoothDesignGuidelines.pdf>文档 1. pairing: 苹果手机无法主动发起SMP配对流程,可通过以下两种方式发起配对流程: (1)从端主动发起配对 ...

  7. tensorflow训练代码

    from tensorflow.examples.tutorials.mnist import input_data import tensorflow as tf mnist = input_dat ...

  8. EasyPoi导入Excel

    EasyPoi的导出Excel功能和导入功能同样简单.我之前强调过,EasyPoi的原理本质就是Poi,正如MyBatis Plus的本质原理就是MyBatis. POI导入功能可以参考如下地址:ht ...

  9. sql获取时间、年龄

      mysql数据库获取年龄:TIMESTAMPDIFF(YEAR, [出生日期字段], CURDATE()) select * from (select name 姓名,TIMESTAMPDIFF( ...

  10. Hadoop 学习之——HDFS

    HDFS是HADOOP中的核心技术之一——分布式文件存储系统.Hadoop的作者Doug Cutting 和Mike 是根据Google发布关于GFS 的研究报告所设计出的分布式文件存储系统. 一.H ...