jsonp 的例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>jsonp  跨域</title>

</head>

<body>

    <script>

        function  succ(data) {

            console.log(data)

//Object

// p: false

// q: "s"

// s: Array(10)

// 0: "双色球开奖结果"

// 1: "sk-ll"

// 2: "双色球"

// 3: "圣墟"

// 4: "switch"

// 5: "顺丰快递单号查询"

// 6: "神级龙卫"

// 7: "沈浪与苏若雪最新章节更新"

// 8: "申通快递单号查询"

// 9: "soul"

// length: 10

// __proto__: Array(0)

// __proto__: Object

        }

    </script>

    <script  src="http://suggestion.baidu.com/su?wd=S&p=3&cb=succ&from=superpage">

    </script>

</body>

</html>

jsonp  的原理：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <script>

        function jsonp({url,params,cb}) {

            //返回一个promise 的目的是 为了  下面的 then 函数返回数据

            return new Promise((resolve,reject)=>{

                //创建script

                let  script = document.createElement('script');

                // 声明方法

                 window[cb]= function  (data) {

                     resolve(data);

                     //得到数据移除script 标签

                     document.body.remove(script)

                 }

                 //合并参数

                 params = {...params,cb};

                 let  arrs = [];

                 //遍历数组 将 wd=S ，cb=succ 以这种形式添加到数组中

                 for(let  key  in params ) {

                     arrs.push(`${key}=${params[key]}`)

                 }

                 //链接script

                 script.src = `${url}?${arrs.join('&')}`;

                 //添加到body  中

                 document.body.appendChild(script)

            })

        }

        jsonp({

            url:'http://suggestion.baidu.com/su?wd=S&cb=succ',

            params:{

                wd:'b'

            },

            cb:'succ'

        }).then(data=>{

             console.log(data);

            //    {q: "s", p: false, s: Array(10)}

            //     p: false

            //     q: "s"

            //     s: (10) ["双色球开奖结果", "sk-ll", "双色球", "圣墟", "switch", "顺丰快递单号查询", "神级龙卫", "沈浪与苏若雪最新章节更新", "申通快递单号查询", "soul"]

            //     __proto__: Object

        })

    </script>

</body>

</html>

输出：

jsonp 只能处理get  请求

跨域 （1） jsonp 跨域的更多相关文章

  1. 前端跨域之jsonp跨域

    jsonp跨域原理 原理:因为通过script标签引入的js是不受同源策略的限制的(比如baidu.com的页面加载了google.com的js).所以我们可以通过script标签引入一个js或者一个 ...

  2. 跨域问题解决方式(HttpClient安全跨域 &amp; jsonp跨域)

    1 错误场景 今天要把项目部署到外网的时候,出现了这种问题, 我把两个项目放到自己本机的tomcat下, 进行代码调试, 执行 都没有问题的, 一旦把我须要调用接口的项目B放到其它的server上, ...

  3. 【跨域】jsonp跨域实现方法

    封装原生jsonp: 以跨域调取豆瓣电影最热榜单为例: function $jsonp(url,data,callback){ var funcName = 'jsonp_cb' + Math.ran ...

  4. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  5. 借助node实战JSONP跨域

    一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...

  6. jsonp跨域+ashx（示例）

    前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...

  7. Jsonp跨域访问

    很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...

  8. jsonp 跨域请求

    背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...

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

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

  10. Ajax跨域：Jsonp原理解析

    推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

随机推荐

  1. Difference Between Currency Swap and FX Swap

    [z]https://www.differencebetween.com/difference-between-currency-swap-and-vs-fx-swap/ Currency Swap ...

  2. Ubuntu 防火墙常用配置操作（ufw）【适用于 Debian 及其衍生版---Linux Mint、Deepin 等】-转

    Ubuntu 防火墙常用配置操作(ufw)[适用于 Debian 及其衍生版---Linux Mint.Deepin 等] 点击访问

  3. mysql主从复制架构配置

    第一个mysql1.下载mysql,解压,移动解压后的目录到指定目录下. 如:mv /usr/local/src/mysql-5.1.. /usr/local/mysql 创建mysql用户, use ...

  4. 如何在Ubuntu / CentOS 6.x上安装Bugzilla 4.4

    这里,我们将展示如何在一台Ubuntu 14.04或CentOS 6.5/7上安装Bugzilla.Bugzilla是一款基于web,用来记录跟踪缺陷数据库的bug跟踪软件,它同时是一款免费及开源软件 ...

  5. DocX 在文档中插入图片时，为什么不能按实际设置的大小插入，而Spire.Doc却可以

    我的目标目标要求:将一个图片插入到页面中,页面边界为0,使用下面的代码去实现(button1UseDocX_Click函数),生成的文档不能达到目的.而使用Spire.Doc却能达到目的button1 ...

  6. Day02:对象和类(下)

    构造方法 什么是构造方法 在类实例化对象时运行的一种特殊的方法 为什么需要构造方法 构造方法适合为对象的属性赋初值 编写构造方法 public 类名(){ //方法体 } 构造方法不写返回值 构造方法 ...

  7. 什么是redis？常用的命令有哪些？

    1.什么是redis? redis是一个高性能的key-value数据库,它是完全开源免费的,而且redis是一个NOSQL类型数据库,是为了解决高并发.高扩展,大数据存储等一系列的问题而产生的数据库 ...

  8. 牛客小白月赛13-H（单调栈+树状数组）

    题目链接:https://ac.nowcoder.com/acm/contest/549/H 题意:给一个柱状图,包括每个矩阵的宽度和高度,求能组成的最大矩阵的面积. 思路:显然最大矩阵的高一定为n个 ...

  9. java学习笔记 - 线程池（一）

    线程池(Thread Pool):把一个或多个线程通过统一的方式进行调度和重复使用的技术,避免了因为线程过多而带来使用上的开销 优点:(面试题)可重复使用已有线程,避免对象创建.消亡和过度切换的性能开 ...

  10. Qt两个类通过信号槽通信

    qt需要通过信号槽来通信,connect的时候总是返回false,请教了公司的一个小哥,才解决了问题,虽然是个很白痴的问题. bool b = QObject::connect(m_pCollectO ...