JSONP 原理和使用

2024年2月26日 170次阅读 来源: 任重道远

JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。

它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

首先，网页动态插入<script>元素，由它向跨源网址发出请求。

 function addScriptTag(src) {
     var script = document.createElement('script');
     script.setAttribute("type", "text/javascript");
     script.src = src;
     document.body.appendChild(script);
 }
window.onload = function () {
    addScriptTag('http://127.0.0.1:3000?callback=foo');
}
function foo(data) {
    // 获取用户信息- 姓名：王小二 年龄：30
    console.log("获取用户信息- 姓名：" + data.name + " 年龄：" + data.age);
};

上面代码通过动态添加<script>元素，向服务器example.com发出请求。注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字，这对于JSONP是必需的。

服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。

nodejs 服务端代码为例：

const http = require('http');
const querystring  = require('querystring');
 http.createServer(function(req,res){
    let params = querystring.parse(req.url.replace(/\/?\?/, ""));
    let data = {"name": "王小二", "age": 30};
    res.writeHead(200, {"Content-Type":"application/json;charset=utf-8"});
    res.end(params.callback + "("+JSON.stringify(data)+")");
}).listen(3000);

由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的 JSON 数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。

    原文作者：任重道远
    原文地址: https://segmentfault.com/a/1190000017191124
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞