手写jsonp

最新推荐文章于 2024-03-04 10:13:55 发布
最新推荐文章于 2024-03-04 10:13:55 发布
阅读量165 收藏
点赞数
分类专栏： javascript
原文链接：https://segmentfault.com/a/1190000007665361
版权

文章目录

前端：

<!DOCTYPE html>
<html>

<head>
    <title>手写jsonp</title>
</head>

<body>
    <p>
        jsonp的原理与实现 https://segmentfault.com/a/1190000007665361
    </p>
    <script type="text/javascript">
        function jsonp(req) {
            var script = document.createElement('script');
            var url = req.url + '?callback=' + req.callback.name;
            script.src = url;
            document.getElementsByTagName('head')[0].appendChild(script);
        }
        function getscript(res) {
            console.log(res)
        }
        jsonp({
            url: 'http://localhost:3000',
            callback: getscript
        });

        /*上面jsonp的实现有些不足：
        1.我们传递的回调必须是一个全局方法，我们都知道要尽量减少全局的方法。

        2.需要加入一些参数校验，确保接口可以正常执行。
        */

        (function (global) {
            var id = 0,
                container = document.getElementsByTagName("head")[0];

            function jsonp1(options) {
                if (!options || !options.url) return;

                var scriptNode = document.createElement("script"),
                    data = options.data || {},
                    url = options.url,
                    callback = options.callback,
                    fnName = "jsonp" + id++;

                // 添加回调函数
                data["callback"] = fnName;

                // 拼接url
                var params = [];
                for (var key in data) {
                    params.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
                }
                url = url.indexOf("?") > 0 ? (url + "&") : (url + "?");
                url += params.join("&");
                scriptNode.src = url;

                // 传递的是一个匿名的回调函数，要执行的话，暴露为一个全局方法
                global[fnName] = function (ret) {
                    callback && callback(ret);
                    container.removeChild(scriptNode);
                    delete global[fnName];
                }

                // 出错处理
                scriptNode.onerror = function () {
                    callback && callback({ error: "error" });
                    container.removeChild(scriptNode);
                    global[fnName] && delete global[fnName];
                }

                scriptNode.type = "text/javascript";
                container.appendChild(scriptNode)
            }

            global.jsonp1 = jsonp1;

        })(this);

        jsonp1({
            url: "http://localhost:3000",
            data: { id: 1 },
            callback: function (ret) {
                console.log(ret);
            }
        });
    </script>
</body>

</html>

后台：

var http = require('http');
var urllib = require('url');

var port = 3000;
var data = {'data':'world'};

http.createServer(function(req,res){
    var params = urllib.parse(req.url,true);
    if(params.query.callback){
        console.log(params.query.callback);
        //jsonp
        var str = params.query.callback + '(' + JSON.stringify(data) + ')';
        res.end(str);
    } else {
        res.end();
    }
    
}).listen(port,function(){
    console.log('jsonp server is on');
});
我不是小白脸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js代码-js手写jsonp
07-15
本文将深入探讨JS手写JSONP的工作原理和实现方法。 **JSONP简介** JSONP全称为“JSON with Padding”，其核心思想是利用HTML中的`<script>`标签可以跨域加载资源的特性。JSONP允许服务端提供一个可执行的JavaScript...
JavaScript基础：手写实现JSONP
imagine_tion的博客
04-07 5328
一、原理 jsonp的核心原理是利用script标签没有同源限制的方式，可以发送跨域的get请求（只能发送get请求）。script标签中的src属性将请求参数和当前请求的回调函数名拼接在链接上。最终由服务端接收到请求之后拼接成前端可执行的字符串的形式返回。这个结果字符串最终会在前端的script标签中解析并执行。 利用<script>标签没有跨域限制的漏洞,网页可以得到从其他来源动态产生的JSON数据。JSONP请求一定需要对方的服务器做支持才可以。 JSONP和AJAX对比： JSONP.
如何手写一个Jsonp方法
酿己的博客
05-29 3714
封装JSONP方法 近期重温了网盘存有的黑马视频，里面讲到了Jsonp方法的封装，突发奇想，我也封装了一下Jsonp方法来跨域请求到Node服务器拿到的Mysql里的数据，废话不多说，立马开始！ Jsonp原理 首先什么是Jsonp呢，Jsonp(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。 我们在日常使用中可以注意到，img标签可以引入其他网站的图片，也就是在src属性上可以请求不同源地址从而拿到图片，还有link标签的href属性以及scr
js手写实现jsonp
最新发布
Dou_Hua6的博客
03-04 409
JSONP的实现原理是：客户端通过动态创建 script 标签，将需要跨域请求的 URL 作为 script 标签的 src 属性值，并在 URL 中携带一个回调函数的名称(一般为 callback 或 cb)，服务端收到请求后，根据参数进行处理，并将处理结果作为一个参数传递给客户端指定的回调函数，最后返回给客户端的内容为回调函数的调用，并将处理结果作为参数传递进去，这样客户端就可以获取到跨域请求的数据了。跨域指的是在一个域名下的网页去请求另一个域名下的资源。2.处理url中的回调函数。
手写JSONP
qq_56392992的博客
04-09 159
const jsonp = ({ url, params, callBackName }) => { const getUrl = () => { let urlStr = '' //循环params参数对象 拼接参数 for (let key in params) { if (params.hasOwnProperty...
JavaScript中模拟实现jsonp
10-24
在Web开发中，跨域请求一直是...当然，需要注意的是，JSONP请求的安全性不如现代的CORS（Cross-Origin Resource Sharing）跨域请求方法，且JSONP仅支持GET请求方式，这些限制使得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跨域实现百度搜索功能(v1.0.0)
07-12
原生Js利用Jsonp跨域实现百度搜索功能
手写实现JSONP功能
swallowblank的博客
06-23 976
相信很多人都看过jsonp的相关知识，对jsonp的工作原理大致有所了解，不过眼看千遍不如手写一遍，今天就手写实现一下jsonp。 JSONP全称json with padding是解决跨域问题的策略之一。 该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，并构造出一个执行该函数的字符串，返回的字符串能直接作为js执行，这样客户端就可以定制自己的函数以处理返回的数据。 如果要理解jsonp很重要的一点是，用scr
定时关闭广告2020/11/24
weixin_50286102的博客
11-24 504
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=
Ajax - 手写JSONP跨域实现及原理详解
江南烟雨却痴缠丶
12-19 567
JSONP实现原理 jsonp，其实就是单纯为了实现跨域请求而创造的一个欺骗(trick)。 虽然，因为同源策略的影响，不能通过XMLHttpRequest请求不同域上的数据(Cross -origin reads)。但是，在页面上引入不同域上的js脚本文件却是可以的(Cross -origin embedding)。因此，在js文件载入完毕之后，触发回调，可以将需要的data作为参数传入 注...
JSONP的手写实现
冻书的博客
02-19 439
JSONP的前世今生 JSONP的出现是为了解决跨域——浏览器请求资源调用的问题而出现的。 在了解跨域概念之前，需要先学习同源策略 同源策略 同源策略是浏览器的一个功能，Same Origin Policy，同源就是当协议、域名、端口号一致时就是同源。不同源的客户端脚本在没有明确授权下，不能读写对方的资源。简单地理解就是因为JavaScript同源策略的限制，它是浏览器为了安全性考虑一种非常重要的策略，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。 跨域就是为了突破同源策略的限
手写一个jsonp
kumayato的博客
06-13 6384
(function (window,document) { "use strict"; var jsonp = function (url,data,callback) { // 1.将传入的data数据转化为url字符串形式 // {id:1,name:'zhangsan'} => id=1&name=zhangsan var data
Vue学习笔记 02day_06.客户端Jsonp页面（结合Node手写Jsonp服务器，解剖Jsonp原理）
xinpz的博客
09-12 263
  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
[手写系列]手写一个JSONP
MS6324_ZAKU的博客
11-26 213
写一个JSONP 好久没写了,现在觉得还挺简单的… 原理就是服务器返回告诉浏览器运行预先设置好的函数啊,一个是你让浏览器执行函数,一个是你告诉服务器再告诉浏览器执行函数,没啥区别. 思路 因为浏览器不能跨域,但是不禁止script标签加载不同源的网站,script标签随便加载.那么就可以用script发送不同源的ajax请求 测试 先用node写一个服务器,端口8888监听请求 写了肯定没人看,还是截图直观,一看就懂 terminal node执行,测试成功开启 好了现在随便找个能写script的页面测
jsonp cookie
01-11
JSONP（JSON with Padding）是一种跨域数据请求技术，它允许在不受同源策略限制的前提下从不同域的服务器上获取数据。它的原理是通过在请求URL中添加一个回调函数的名称，服务器返回的数据会作为该回调函数的参数而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值