JSONP是什么?

介绍JSONP之前 ,我们先了解一下,页面数据交互的发展过程。来看下面一个例子。
付款是我们日常中常见的一种金钱交易,用户在页面中点击付款按钮,网页提交请求给服务器,服务器收到请求后在数据库对金额进行扣减,然后将消息返回给页面,告诉用户给付款成功。
在jsonp ajax的概念实现之前,以上付款的网页数据交互过程是怎么实现的呢?
大家都知道form表单有提交post请求功能,我们可以利用form表单,告诉服务器【请求扣款】
页面代码如下:用表单提交post请求,请求路径为/pay

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h5>您的账户余额是<span id="amount">&&&amount&&&</span></h5>
<form action="/pay" method="post">//用表单提交post请求,请求路径为/pay
    <input type="submit" value="付款">
</form>
</body>
</html>

服务器代码:
当请求的路径为/pay时,数据库进行扣减金额一块钱,然后给页面返回success,否则告诉页面请求出错了。

    else if(path === '/pay'){
        var amount = fs.readFileSync('./db','utf8');
        var newAmount = amount - 1;
        fs.writeFileSync('./db',newAmount);
        response.write('success');
        response.end();
    }
    else{
        response.statusCode = 404
        response.setHeader('Content-Type', 'text/html;charset=utf-8')
        response.write('噢噢,好像出错了呢')
        response.end()
    }

效果如下:


image.png

image.png

这时候大家会发现一个问题,每次页面返回的success后都要再次刷新页面才能看到账户余额,这样的体验并不好,这时候神奇的前端程序员们又想到了一个办法SRJ方案 SRJ - Server Rendered JavaScript
这时候就不得不佩服前辈们的‘脑洞’啦。程序员想到script标签也可以发送请求,因此可以通过动态的创建script标签来向服务器发送请求,服务器完成操作后,返回结果动态的修该页面的账户金额;同时本地页面监听script标签的onload,onerror事件,来删除动态创建的script标签,节省内存。
服务器代码实现如下:

else if(path === '/pay'){
        var amount = fs.readFileSync('./db','utf8');
        var newAmount = amount - 1;
        fs.writeFileSync('./db',newAmount);
        response.setHeader('Content-Type', 'application/javascript')
        response.statusCode = 200;

        response.write(`amount.innerText = amount.innerText - 1`);
        response.end();

    }
    else{
        response.statusCode = 404
        response.setHeader('Content-Type', 'text/html;charset=utf-8')
        response.write('噢噢,好像出错了呢')
        response.end()
    }

页面实现:

<h5>您的账户余额是<span id="amount">&&&amount&&&</span></h5>
<button id="button">打钱</button>
<script>
    button.addEventListener('click',function(e){
        let script = document.createElement('script');
        script.src = '/pay';
        document.body.appendChild(script);
        script.onload = function(e){
            e.currentTarget.remove();
        }
        script.onerror = function (e) {
            alert('fail');
            e.currentTarget.remove();
        }
    })
</script>

解决了同一网站的信息交互,那么不同的网站之间(不同的域名),数据要怎么进行交互呢?以上的SRJ也是可以行得通的,只要修改地址为对方网站地址即可。因为script标签的请求不受域名限制。但是我们发现,如果使用SRJ方案,双方网站的代码耦合度太高,为了代码的解耦,有人提出了JSONP方案:
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
JSONP的主要思路是:
1.请求方通过动态创建的script标签的src路径指向响应方,并且在路径上添加一个查询参数(按照约定,参数名为callback),该查询参数告知响应方应该调用的函数名。同时请求方在本地定义了这个调用函数。如下:

  let functionName = 'tina'+parseInt(Math.random()*100000,10);
//给调用函数创建一个随机的函数名
  script.src = 'http://u.com:8002/pay?callback=' + functionName; 
//u.com为响应网站的域名,8002为响应网站的端口号




window[callback] = function(result){ //定义函数
            if(result === 'success'){
                amount.innerText = amount.innerText - 1;
            }
        }
        script.onload = function(e){
            e.currentTarget.remove();//执行结束删除script标签
            delete window[callback]; //执行结束删除函数
        }
        script.onerror = function (e) {
            alert('fail');
            e.currentTarget.remove();//执行结束删除script标签
            delete window[callback];//执行结束删除函数
        }
    })

2.响应方根据查询参数查找到函数名后,回调这个函数,做出响应。当回调函数响应的数据('success'P)是json格式时以下的代码就是JSONP。

response.write(`${query.callback}.call(undefinded,'success')`);

3.完成以上步骤后,请求方得到了响应的数据,就会返回到页面上。

以上代码是原生JS的实现,JQuery也封装了JSONP,代码如下

//u.com为响应网站的域名,8002为响应网站的端口号
$.ajax({
 url: "http://u.com:8002/pay",
 dataType: "jsonp",
 success: function( response ) {
     if(response === 'success'){
     amount.innerText = amount.innerText - 1
     }
 }
 })

 $.jsonp()

这里值得注意一下JQuery封装的JSONP虽然起了一个与ajax相近的名字,但是与ajax没有关系,因为ajax不支持跨域请求

了解完以上对JSONP的解释,我们也能很容易明白JSONP为什么不支持POST请求,是因为JSONP是通过动态创建scipt实现的,并且script标签不支持POST请求

以上是我个人对JSONP的理解,如果错误欢迎指出。