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. chrome浏览器爬虫WebDriverException解决采用python + selenium + chrome + headless模式

    WebDriverException: Message: unknown error: Chrome failed to start: crashed 第一种:如果出现下面情况: chrome浏览器有 ...

  2. 【6】font-size 字体属性

    font-style                         --  字体风格 font-variant                      -- 小型大写字母文本 font-weigh ...

  3. Java学习之==>面向对象编程 Part1

    一.面向对象与面向过程 1.面向过程 角度是功能,以方法为最小单位,思考的是具体怎么做. 2.面向对象 角度是抽象,以类为最小单位,思考的是谁来做. 3.示例:“小明去上班” 面向过程 起床,刷牙洗脸 ...

  4. python安装mongodb

    提前把mongodb-linux-x86_64-rhel70-3.2.4.tgz放到和脚本相同目录下,然后把下复制到脚本里面,开始执行 #!/usr/bin/python #-*- codinig: ...

  5. Salesforce学习之路-developer篇（五）一文读懂Aura原理及实战案例分析

    1. 什么是Lightning Component框架? Lightning Component框架是一个UI框架,用于为移动和台式设备开发Web应用程序.这是一个单页面Web应用框架,用于为Ligh ...

  6. js脚本实现在该界面直接跳转到一个登录界面并且自动登录

    1:首先说明的是自动登录也是需要密码的,这是前一个网页传输过去的 2:这里我使用的是post提交表单的形式 <------------------------------------------ ...

  7. mysql——多表——合并查询结果

    合并查询结果 合并查询结果 是将多个select语句的查询结果合并到一起 union关键字,数据库会将所有的查询结果合并到一起,然后除掉相同的记录: union all关键字,只是简单的合并到一起 前 ...

  8. jquery ajax get 数组参数

    对一些get请求,但方法参数要求是数组或集合的,如下 public virtual ActionResult Test(List<int> ids) { return Json(" ...

  9. Solr 4.4.0安装

    软件包准备 JDK http://download.oracle.com/otn/java/jdk/6u45-b06/jdk-6u45-linux-x64.bin Solr https://archi ...

  10. 小记---------手动执行脚本正常执行，使用crontab定时执行时 不执行

    可能出现的原因就是因为crontab不会从用户的/etc/profile文件中读取环境变量,所以就出现 使用定时crontab执行时 无法执行 抛错 所以在使用crontab 定时执行脚本时  在脚本 ...