手写jsonp

最新推荐文章于 2024-03-04 10:13:55 发布
最新推荐文章于 2024-03-04 10:13:55 发布
阅读量86 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanghao_25/article/details/123794411
版权

实现步骤

1.创建script元素，设置src属性，并插入文档中，同时触发AJAX请求

2.返回Promise对象，then函数才行继续，回调函数中进行数据处理

3.script元素删除清理

<!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>
    /**
     * 手写jsonp并返回Promise对象
     * 参数url，data:json对象，callback函数
     */
    function jsonp(url, data = {}, callback = 'callback') {
      // 处理json对象，拼接url
      data.callback = callback
      let params = []
      for (let key in data) {
        params.push(key + '=' + data[key])
      }
      console.log(params.join('&'))
      // 创建script元素
      let script = document.createElement('script')
      script.src = url + '?' + params.join('&')
      document.body.appendChild(script)
      // 返回promise
      return new Promise((resolve, reject) => {
        window[callback] = (data) => {
          try {
            resolve(data)
          } catch (e) {
            reject(e)
          } finally {
            // 移除script元素
            script.parentNode.removeChild(script)
            console.log(script)
          }
        }
      })

    }
    jsonp('http://photo.sina.cn/aj/index', {
      page: 1,
      cate: 'recommend'
    }, 'jsoncallback').then(data => {
      console.log(data)
    })
  </script>
</body>

</html>
beginnerProgrammer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何手写一个Jsonp方法
酿己的博客
05-29 3674
封装JSONP方法 近期重温了网盘存有的黑马视频，里面讲到了Jsonp方法的封装，突发奇想，我也封装了一下Jsonp方法来跨域请求到Node服务器拿到的Mysql里的数据，废话不多说，立马开始！ Jsonp原理 首先什么是Jsonp呢，Jsonp(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。 我们在日常使用中可以注意到，img标签可以引入其他网站的图片，也就是在src属性上可以请求不同源地址从而拿到图片，还有link标签的href属性以及scr
定时关闭广告2020/11/24
weixin_50286102的博客
11-24 483
setTimeout(function() { ad.style.display = ‘none’ }, 2000) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=
JavaScript基础：手写实现JSONP
imagine_tion的博客
04-07 5298
一、原理 jsonp的核心原理是利用script标签没有同源限制的方式，可以发送跨域的get请求（只能发送get请求）。script标签中的src属性将请求参数和当前请求的回调函数名拼接在链接上。最终由服务端接收到请求之后拼接成前端可执行的字符串的形式返回。这个结果字符串最终会在前端的script标签中解析并执行。 利用<script>标签没有跨域限制的漏洞,网页可以得到从其他来源动态产生的JSON数据。JSONP请求一定需要对方的服务器做支持才可以。 JSONP和AJAX对比： JSONP.
js手写实现jsonp
最新发布
Dou_Hua6的博客
03-04 380
JSONP的实现原理是：客户端通过动态创建 script 标签，将需要跨域请求的 URL 作为 script 标签的 src 属性值，并在 URL 中携带一个回调函数的名称(一般为 callback 或 cb)，服务端收到请求后，根据参数进行处理，并将处理结果作为一个参数传递给客户端指定的回调函数，最后返回给客户端的内容为回调函数的调用，并将处理结果作为参数传递进去，这样客户端就可以获取到跨域请求的数据了。跨域指的是在一个域名下的网页去请求另一个域名下的资源。2.处理url中的回调函数。
手写JSONP
qq_56392992的博客
04-09 153
const jsonp = ({ url, params, callBackName }) => { const getUrl = () => { let urlStr = '' //循环params参数对象 拼接参数 for (let key in params) { if (params.hasOwnProperty...
js代码-js手写jsonp
07-15
本文将深入探讨JS手写JSONP的工作原理和实现方法。 **JSONP简介** JSONP全称为“JSON with Padding”，其核心思想是利用HTML中的`<script>`标签可以跨域加载资源的特性。JSONP允许服务端提供一个可执行的JavaScript...
JavaScript中模拟实现jsonp
10-24
主要介绍了JavaScript中模拟实现jsonp,本文直接给出实现代码,代码中包含详细注释,需要的朋友可以参考下
js代码-手写代码练习----jsonp ， ajax , 解决跨域问题几种方式
07-16
在这个主题中，我们将探讨两种常见的异步数据获取技术——JSONP（JSON with Padding）和AJAX（Asynchronous JavaScript and XML），以及它们如何帮助我们解决跨域问题。 ### JSONP JSONP是一种在浏览器端解决跨域...
浏览器js手写汉字
04-20
4. **JSONP**：如果QQ输入API只支持JSONP（JSON with Padding）跨域请求，那么我们需要处理回调函数，因为fetch API默认不支持JSONP，可能需要使用传统的XMLHttpRequest对象。 5. **错误处理**：考虑浏览器兼容性时...
手写实现JSONP功能
swallowblank的博客
06-23 970
相信很多人都看过jsonp的相关知识，对jsonp的工作原理大致有所了解，不过眼看千遍不如手写一遍，今天就手写实现一下jsonp。 JSONP全称json with padding是解决跨域问题的策略之一。 该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，并构造出一个执行该函数的字符串，返回的字符串能直接作为js执行，这样客户端就可以定制自己的函数以处理返回的数据。 如果要理解jsonp很重要的一点是，用scr
JSONP跨域实现百度搜索功能(v1.0.0)
07-12
原生Js利用Jsonp跨域实现百度搜索功能
JSONP的手写实现
冻书的博客
02-19 435
JSONP的前世今生 JSONP的出现是为了解决跨域——浏览器请求资源调用的问题而出现的。 在了解跨域概念之前，需要先学习同源策略 同源策略 同源策略是浏览器的一个功能，Same Origin Policy，同源就是当协议、域名、端口号一致时就是同源。不同源的客户端脚本在没有明确授权下，不能读写对方的资源。简单地理解就是因为JavaScript同源策略的限制，它是浏览器为了安全性考虑一种非常重要的策略，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。 跨域就是为了突破同源策略的限
手写一个jsonp
kumayato的博客
06-13 6380
(function (window,document) { "use strict"; var jsonp = function (url,data,callback) { // 1.将传入的data数据转化为url字符串形式 // {id:1,name:'zhangsan'} => id=1&name=zhangsan var data
简易版手写JSONP
DoubleClick的博客
02-18 282
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
手写登录借口,jsonp跨域传值
小井的博客
02-20 564
第一种用jsonp接值 列如在views中写下 html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> head> body> table> tr> td>用户名：td> td>input type="text" name="username" cla
Ajax - 手写JSONP跨域实现及原理详解
江南烟雨却痴缠丶
12-19 565
JSONP实现原理 jsonp，其实就是单纯为了实现跨域请求而创造的一个欺骗(trick)。 虽然，因为同源策略的影响，不能通过XMLHttpRequest请求不同域上的数据(Cross -origin reads)。但是，在页面上引入不同域上的js脚本文件却是可以的(Cross -origin embedding)。因此，在js文件载入完毕之后，触发回调，可以将需要的data作为参数传入 注...
jsonp cookie
01-11
JSONP（JSON with Padding）是一种跨域数据请求技术，它允许在不受同源策略限制的前提下从不同域的服务器上获取数据。它的原理是通过在请求URL中添加一个回调函数的名称，服务器返回的数据会作为该回调函数的参数而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值