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. git使用遇到的问题

    1.我新建了一个django项目,然后又在git上新建了一个仓库,然后我在django的项目文件内,将git上的项目clone到这个文件内的时候 git clone https://gitee.com ...

  2. java利用dom4j读取xml

    java连接oracle数据库的时候, 需要从特定地方读取xml文件中的sql去get结果集, xml文件放在和java文件: SqlLoaderFromXML的目录下OracleSQL, xml文件 ...

  3. nginx不记录指定文件类型的日志

    1.指定记录文件日志记录的内容. vim /usr/local/nginx/conf/nginx.conf如下部分: log_format dd '$remote_addr $http_x_forwa ...

  4. Jenkins pipeline+Maven+Gitlab

    参照文档:http://www.cnblogs.com/xiaodai12138/p/9996995.html

  5. python目录和引用关系

    这是我的项目目录 像这样引用没有直接画横线   但是运行时会报错:找不到 typeidea.typeidea.文件路径 图片拖出来看更清晰 后期补充: 解决方案: 如:右击:typeidea----- ...

  6. <数据结构系列3>队列的实现与变形（循环队列）

    数据结构第三课了,今天我们再介绍一种很常见的线性表——队列 就像它的名字,队列这种数据结构就如同生活中的排队一样,队首出队,队尾进队.以下一段是百度百科中对队列的解释: 队列是一种特殊的线性表,特殊之 ...

  7. GitLab使用小结

    对Git和GitLab的使用作一个小结 GitLab基于Git,可以作为团队开发项目使用,因此通常会有一个主分支master和其他分支,因此项目成员中任意一人不能随意push到主分支中,容易引起混乱: ...

  8. flask response 详解

    from flask import Flask,Response,jsonify #Flask = werkzeug(处理网络的) + sqlalchemy(处理数据库的) + jinja2 (处理模 ...

  9. 文件的上传（1）（表单上传和ajax文件异步上传）

    文件的上传(表单上传和ajax文件异步上传) 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举 ...

  10. Linux下面MariaDB 管理命令基础使用

    MariaDB 是 MySQL 的一个分,由于某些原因,使之取代了Mysql成为了 RHEL/CentOS 7 的默认数据库.针对数据库的操作我们经常做的操作就是增删查改,接下来就介绍下 MariaD ...