JSONP是什么

介绍JSONP之前，我们先了解一下，页面数据交互的发展过程。来看下面一个例子。

付款是我们日常中常见的一种金钱交易，用户在页面中点击付款按钮，网页提交请求给服务器，服务器收到请求后在数据库对金额进行扣减，然后将消息返回给页面，告诉用户给付款成功。
在jsonp ajax的概念实现之前，以上付款的网页数据交互过程是怎么实现的呢？
大家都知道form表单有提交post请求功能，我们可以利用form表单，告诉服务器【请求扣款】

1.用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()
    }

效果如下：

2.SRJ方案

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

服务器代码实现如下：

else if(path === '/pay'){
        var amount = fs.readFileSync('./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>

3.JSONP

解决了同一网站的信息交互，那么不同的网站之间（不同的域名），数据要怎么进行交互呢？以上的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的理解，如有错误欢迎指出。

1.用form表单提交请求

2.SRJ方案

3.JSONP

JSONP的主要思路是：

相关推荐