一、通过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. ES6入门——数值的扩展

    1.二进制和八进制表示法 ES6提供了二进制和八进制数值的新的写法,分别用前缀0b或0B和0o或0O表示. 2.Number.isFinite(),Number.isNaN() ES6在Number对 ...

  2. html5自我总结

    2017年7月30日 合抱之木,生于毫末.九层之台,起于累土.软件行业要熟记和训练的东西有很多,在此,写一下如何快速搭建html及自我见解(这里只介绍我自己用到的,还有部分存在但是用不到的就不讲解了) ...

  3. 落地生根两周年，微软Azure进入2.0时代

    By: 申元庆 微软亚太科技有限公司董事长 微软亚太研发集团首席运营官 微软中国云计算与企业总经理 仿佛就在转眼间,微软Azure已经在中国落地生根两年了. 长风破浪会有时,直挂云帆济沧海.微软云技术 ...

  4. 个人Hadoop编程代码记录

    **WordCount package cn.cpl.recom; import java.io.IOException; import java.util.StringTokenizer; impo ...

  5. python 文件目录操作

    在Python程序中执行目录和文件的操作 Python内置的os模块可以直接调用操作系统提供的接口函数 Python交互式命令行 >>> import os>>> ...

  6. Win10安装msi程序报错2503和2502错误解决方案

    刚升级了系统到win10,重新搭建开发环境,在安装scala的时候一直报2503.2502错误,如图 试了好几种办法都不好使,现在罗列依次用到的三种方法: 一.命令提示符(管理员)启动 "w ...

  7. docker中自定ingress网络

    在某些时候,docker自动生成的ingress网络会与服务器上已经存在的网络产生冲突,这个时候,你需要自定义ingress. 在自定义前,你需要删除所有有端口发布的服务. 使用命令docker ne ...

  8. NO.012-2018.02.17《题都城南庄》唐代：崔护

    题都城南庄_古诗文网 题都城南庄 唐代:崔护 去年今日此门中,人面桃花相映红.去年春天,就在这扇门里,姑娘脸庞,相映鲜艳桃花.人面:指姑娘的脸.第三句中“人面”指代姑娘. 人面不知何处去,桃花依旧笑春 ...

  9. 2018 Multi-University Training Contest 4 Problem L. Graph Theory Homework 【YY】

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6343 Problem L. Graph Theory Homework Time Limit: 2000 ...

  10. git的一些小命令

    git_cmd git常用命令 <>代表变量,例如 代表分支名称 远程库 查看远程库信息 git remote -v 查看远程仓库:$ git remote -v 添加远程仓库:$ git ...