一、通过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. 【Python】回文palindrome——利用字符串反转

    回文 palindrome Python 字符串反转string[::-1] Slice notation "[a : b : c]" means "count in i ...

  2. EditText的setInputType方法里面应该填什么？

    转自CSDN:http://blog.csdn.net/u014158743/article/details/52488010 | 以密码类型(password)为例 android:inputTyp ...

  3. Microsoft SQL Server 数据量大 导入导出 问题汇总

    问题一: 今天拿到一份有近百万条数据的Excel要导到数据库里面,我先在本地(2014)用自带Excel,然后生成脚本文件去服务器(2008)上执行:文件SQL打开不了. 解决方法: 用自带的sqlc ...

  4. order by注入点利用方式分析

    漏洞分析 使用sqli-lab中的lesson-52作为测试目标.关键代码为: error_reporting(0); $id=$_GET['sort']; if(isset($id)) { //lo ...

  5. Web API 2 入门——Web API 2中的操作结果（谷歌翻译）

    在这篇文章中 空虚 HttpResponseMessage IHttpActionResult 其他返回类型 作者:Mike Wasson 本主题描述ASP.NET Web API如何将控制器操作的返 ...

  6. 【Leetcode】【Easy】Path Sum

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  7. Node Sass could not find a binding for your current environment

    Node环境从8升级到10后,Node Sass could not find a binding for your current environment 标签(空格分隔): Node Node环境 ...

  8. CVE-2016-3231

    摘要:重现了下韩国小哥Lokihardt在pwn2own上的过沙箱提权漏洞. 1 #include <windows.h> 2 #include <atlbase.h> 3 # ...

  9. 推荐一个可以把网页背景色调成护眼色的Chrome扩展应用

    程序员一天有10几个小时要面对着电脑,老是这种白晃晃的屏幕,谁的眼睛受得了? 我在网上逛了一圈,找到一个比较实用的Chrome扩展应用,可以一键实现将Chrome打开网页的背景色修改成护眼的豆沙绿,这 ...

  10. request.getParameterMap和request.getParameter不一样的显示

    public class KeywordUtil {    /**     * 只提q参数关键字     *     * @param request     * @return 处理后的关键字Str ...