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. Python基本语法_输入/输出语句详解

    目录 目录 前言 输入 raw_input input raw_input 和 input 的区别 输出 print print 基本格式化输出 print复杂格式化输出 flags标志位 width ...

  2. mingw 编译 libopus 1.3.1 时 注意事项

    OPUS_STACK_PROTECTOR 默认是使用的, 在 windows 上编译时一定要去掉选项不然 -lopus 链接时出现错误undefined reference to `__stack_c ...

  3. MySQL orzdba、dodba、top、iostat、vmstat、perf等

    1 mysq自带的mysqladmin命令 mysqladmin -usystem -p*** -h127.0.0.1 -P3306 -r -i 1 extended-status \ |grep & ...

  4. :成功配置 centos + nginx + .net core 2.0

    https://segmentfault.com/a/1190000010763523

  5. 第 10 章 python进程与多进程

    一.背景知识 顾明思义,进程即正在执行的一个过程,进程是对正在云的程序的一个抽象. 进程的概念起源与操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一,操作系统的其他所 ...

  6. shell脚本4

    1.从FTP服务器下载文件 #!/bin/bash if [ $# -ne 1 ]; then echo "Usage: $0 filename" fi dir=$(dirname ...

  7. MySQL 服务正在启动 MySQL 服务无法启动解决途径

    解决方案: 1.删除自己手动创建的data文件夹: 2.管理员权限CMD的bin目录下,移除已错误安装的mysqld服务: mysqld -remove MySQL出现删除成功! 3.在CMD的bin ...

  8. 10大IT社区

    技术社区导航 http://tooool.org/ 1. cnblogs 人多内容质量最高 2.csdn csdn的注册人数多,但新手多 3.java eye java eye注册用户刚突破10万,但 ...

  9. c语言l博客作业04

    这作业属于那个课程 c语言程序设计ll 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-4/homework/9772 我在这个课程的目标 ...

  10. poj3252（数位dp）（模板）

    题目链接:https://vjudge.net/problem/POJ-3252 题意:求[l,r]之间的Round Number数,RN数即化为二进制后0的个数不少于1的个数的数. 思路:之前用组合 ...