jsonp工作原理代码实现

最新推荐文章于 2023-07-02 22:24:55 发布
最新推荐文章于 2023-07-02 22:24:55 发布
阅读量100 收藏
点赞数
文章标签： js jsonp javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baleLjt/article/details/108328769
版权

**

代码实现jsonp工作原理

**



<!DOCTYPE html>
<html lang="en">


<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
</head>


<body>


     <script>
          // 函数参数解构
          function jsonp({ url, params, cb }) {
               return new Promise((resolve, reject) => {
                    // 全局的函数fn
                    window[cb] = function (data) {
                         resolve(data)
                    }
                    // script标签里面  params: {} -> prod=pc&from=pc_web&cb=show
                    let script = document.createElement('script')
                    // script.src = url +
                    let uri = ''
                    Object.keys(params).forEach(key => {
                         uri += `${key}=${params[key]}&`
                    })
                    script.src = url + uri + `cb=${cb}`
                    // 把script标签添加到document里面去
                    document.body.appendChild(script)
               })
          }


          jsonp({
               url: 'https://www.baidu.com/sugrec?',
               params: {
                    prod: 'pc',
                    from: 'pc_web',
                    wd: '小明'
               },
               cb: 'show'
          }).then(res => {
               console.log(res)
          })


     </script>


     <!-- 全局show方法 -->
     <!-- <script>
          function show(data) {
               console.log('show', da)
          }
     </script> -->
     <!-- 引入的外链接 -->
     <!-- <script src="https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=%E9%BB%91%E9%A9%AC1&cb=show"></script> -->
</body>


</html>
BaleLjt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现JSONP（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-03 320
JavaScript实现JSONP（附完整源码）
JSONP原理及实现
橘猫吃不胖的博客
11-27 882
JSONP原理及实现 1 概述 2 优点 3 缺点 4 实现
jsonp的原理与实现
油墨香^-^的博客
06-24 5304
1、概述 jsonp是一种跨域通信的手段，它的原理其实很简单： 首先是利用script标签的src属性来实现跨域。 通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。 由于使用script标签的src属性，因此只支持get方法 2、实现流程 1）、设定一个script标签 <script src="http://jsonp.js?callback=xxx"></script> 2）、cal
说说JSON和JSONP，也许你会豁然开朗
rznice的专栏
07-17 1889
前言 　　由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。 　　当然了，通过调用强大的PhoneGap插件然后打包，你可以实现100%的Socket通讯和本地数据库功能，又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能，但这两种方式都有其局限性，前者需要PhoneGap支持，后者要求用户设备必须支持We
JSONP 教程
unber的博客
05-25 502
本章节我们将向大家介绍 JSONP 的知识。Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
详细分析jsonp的原理和实现方式
11-30
三、JSONP的工作原理 1. 客户端（浏览器）创建一个全局函数，如`jsonpcallback`。 2. 在JavaScript代码中动态生成一个`<script>`标签，其`src`属性指向服务器提供的JSONP服务接口，例如`...
js代码-JSONP的实现
07-15
在这个"js代码-JSONP的实现"主题中，我们将深入探讨JSONP的工作原理，以及如何在JavaScript中实现它。 首先，理解JSONP的基本概念。JSONP的核心思想是动态创建`<script>`标签，将一个函数名作为参数传递给服务端，...
借助script进行Http跨域请求:JSONP实现原理及代码
12-11
[removed]元素的src属性能设置URL并发起HTTP GET请求, 使用[removed]元素实现脚本操作HTTP可以跨域通信而不受限与同源策略. 通常, 使用基于[removed]的Ajax传输协议时, 服务器响应采用JSON编码的数据格式, 当执行...
Jsonp及其实现原理
weixin_34233421的博客
02-25 127
参考资料 一、先说说JSON 首先JSON是一种基于文本的数据交换方式，或者叫做数据描述格式。 JSON的优点： 基于纯文本，跨平台传递极其简单； Javascript原生支持，后台语言几乎全部支持； 轻量级数据格式，占用字符数量极少，特别适合互联网传递； 可读性较强，虽然比不上XML那么一目了然，但在合理的依次缩进之后还是很容易识别的...
jsonp 详解 —— 终于搞懂 jsonp 了
最新发布
M_emory_的博客
07-02 9246
JSONP 不是一门编程语言，也不是什么特别的技术，它更像一个漏洞，程序员可以利用这个漏洞，实现跨域（可以简单理解为跨域名）传输数据。在介绍 JSONP 之前，先来介绍一下浏览器的同源策略。通过 jsonp，我们可以避开浏览器的同源策略，从而进行跨域请求。jsonp 是利用 HTML 标签的 src 属性引用资源不受同源策影响的特性来实现的，实现步骤如下：通过动态创建 script 标签，其 scr 指向非同源的 url，并传递一个 callback 参数给服务端。
手动实现JSONP
朱远辉的博客
05-18 255
手动实现JSONP：在上述代码中，前端代码定义了一个名为handleData的回调函数，用于接收服务端返回的数据。使用JSONP技术时，前端代码会生成一个动态的script标签，并在链接中附带需要获取的数据及回调函数名称等参数，然后将该script标签插入到页面中，以触发跨域请求并获取数据。在前端代码中定义一个动态的script标签，设置其src属性为服务端接口的URL地址，并在链接中添加callback参数，值为第一步定义的回调函数名称。在前端代码中定义一个回调函数，用于接收服务端返回的数据。
跨域解决办法以及实现JSONP代码
dongwei666的博客
04-25 1207
跨域、JSONP
Jquery ajax jsonp跨域调用实例代码
04-13 692
简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。URL说明允许通信同一域名下允许同一域名下不同文件夹允许同一域名，不同端口不允许同一域名，不同协议不允许域名和域名对应ip不允许主域相同，子域不同不允许同一域名，不同二级域名（同上）不允许不同域名不允许。
前端跨域jsonp的细节，挡住面试官的连环提问
AlexGeek
04-16 2571
1.前言 在前端面试中，想必每一个人都会被问到跨域相关的问题，背过八股文的小伙伴肯定对跨域的解决对答如流，常见的跨域解决方案在网上有很多整理，但是如果问到实现的细节，你是否能够手写实现或者深入解读呢？其实很多情况下，面试官不仅仅会考察第一层的概念，还会追问第二层、第三层内容，所以对于实现原理的掌握是必要的，今天笔者就整理一下跨域的基本方式，重点介绍jsonp的实现~ 2.跨域方案 常见的跨域解决方案有8种左右，在面试中能答出4-5种就可以了~ 2.1 如果只是想要实现主域名下的不同子域名的跨域操作，我们
JSONP代码
weixin_45082647的博客
07-31 271
先看下直接发起ajax请求会怎么样 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>跨域测试</title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> </head> <body>
JSONP原理及简单实现
php菜鸟博客
01-05 442
一.解决前端js请求数据跨域问题的两个方案 1.jsonp 需要前端和后端共同协定 2.CORS 只需要服务端改动 二.先说CORS 下面用服务端用php代码说明 header("Access-Control-Allow-Origin: *"); *代表允许来自所有域名的请求，也可以单独指定域名比如header("Access-Control-Allow-Origin: http://ww...
Ajax同源政策--学习
weixin_43482965的博客
04-02 342
一、Ajax请求限制 Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。 二、什么是同源 如果两个页面拥有相同的协议、域名和端口，那么这...
jsonp的实现原理？
03-14
jsonp的实现原理是利用script标签的src属性可以跨域访问的特性，将需要获取的数据包装成一个函数调用的形式，然后通过script标签的src属性将这个函数调用的代码请求到本地，从而实现跨域获取数据的目的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值